"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { StatCard } from "@/components/dashboard/stats";
import {
  FileText,
  Shield,
  Eye,
  ThumbsUp,
  Building2,
  MapPin,
  ArrowRight,
  Settings,
} from "lucide-react";
import { mockSellerLeads } from "@/lib/mock-data";
import { formatCurrency } from "@/lib/utils";

// Simulate deals sent to this buyer
const receivedDeals = mockSellerLeads.slice(0, 3);

export default function BuyerPortalPage() {
  return (
    <div className="space-y-6 animate-page-in">
      {/* Welcome */}
      <div className="relative rounded-xl bg-gradient-to-r from-navy-800 to-navy-900 p-6 text-white overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0" style={{
            backgroundImage: "radial-gradient(circle at 80% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 50%)",
          }} />
        </div>
        <div className="relative">
          <h1 className="text-2xl font-bold">Welcome, Robert</h1>
          <p className="text-sm text-navy-300 mt-1">
            Here are your latest deal opportunities and activity.
          </p>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 stagger-in">
        <StatCard
          title="Deals Received"
          value={receivedDeals.length}
          icon={FileText}
          iconColor="text-blue-600"
        />
        <StatCard
          title="NDAs Signed"
          value={2}
          icon={Shield}
          iconColor="text-emerald-600"
        />
        <StatCard
          title="Deals Reviewed"
          value={receivedDeals.length}
          icon={Eye}
          iconColor="text-indigo-600"
        />
        <StatCard
          title="Interest Expressed"
          value={1}
          icon={ThumbsUp}
          iconColor="text-gold-600"
        />
      </div>

      {/* Recent Deals */}
      <Card className="hover-lift">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-lg">Recent Deals</CardTitle>
          <Link href="/portal/deals">
            <Button variant="ghost" size="sm">
              View All <ArrowRight className="ml-1 h-4 w-4" />
            </Button>
          </Link>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {receivedDeals.map((deal, idx) => (
              <Link href="/portal/deals" key={deal.id}>
                <div
                  className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-lg border border-navy-100 hover:border-gold-300 hover:shadow-sm transition-all cursor-pointer"
                >
                  <div className="flex items-center gap-3 sm:gap-4">
                    <div className="flex h-10 w-10 sm:h-11 sm:w-11 items-center justify-center rounded-lg bg-gradient-to-br from-navy-50 to-navy-100 flex-shrink-0">
                      <Building2 className="h-5 w-5 text-navy-600" />
                    </div>
                    <div className="min-w-0">
                      <h3 className="text-sm font-semibold text-navy-900 truncate">{deal.address}</h3>
                      <div className="flex items-center gap-2 sm:gap-3 mt-0.5 flex-wrap">
                        <span className="text-xs text-navy-500">{deal.asset_type}</span>
                        <span className="text-xs text-navy-300 hidden sm:inline">•</span>
                        <span className="text-xs text-navy-500 flex items-center gap-1">
                          <MapPin className="h-3 w-3" />
                          {deal.market}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center justify-between sm:justify-end gap-3 sm:gap-4 ml-13 sm:ml-0">
                    <div className="text-left sm:text-right">
                      <p className="text-sm font-semibold text-navy-900">
                        {formatCurrency(deal.asking_price)}
                      </p>
                      <p className="text-xs text-navy-500">
                        {deal.cap_rate ? `${deal.cap_rate}% cap` : ""}
                      </p>
                    </div>
                    <Badge variant={idx < 2 ? "success" : "warning"}>
                      {idx < 2 ? "NDA Signed" : "Pending NDA"}
                    </Badge>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Card className="hover-lift cursor-pointer">
          <Link href="/portal/preferences">
            <CardContent className="p-6 flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gold-50">
                <Settings className="h-6 w-6 text-gold-600" />
              </div>
              <div>
                <h3 className="text-sm font-semibold text-navy-900">Update Preferences</h3>
                <p className="text-xs text-navy-500">
                  Refine your acquisition criteria to get better matches
                </p>
              </div>
              <ArrowRight className="h-5 w-5 text-navy-300 ml-auto" />
            </CardContent>
          </Link>
        </Card>
        <Card className="hover-lift cursor-pointer">
          <Link href="/portal/deals">
            <CardContent className="p-6 flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
                <FileText className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <h3 className="text-sm font-semibold text-navy-900">Browse Deals</h3>
                <p className="text-xs text-navy-500">
                  View all deals matched to your criteria
                </p>
              </div>
              <ArrowRight className="h-5 w-5 text-navy-300 ml-auto" />
            </CardContent>
          </Link>
        </Card>
      </div>
    </div>
  );
}
