"use client";

import React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  MapPin,
  DollarSign,
  TrendingUp,
  Square,
  Calendar,
  Shield,
  ThumbsUp,
  ThumbsDown,
  FileText,
} from "lucide-react";
import { useApiData } from "@/hooks/use-api-data";
import { mockSellerLeads } from "@/lib/mock-data";
import { formatCurrency, formatNumber } from "@/lib/utils";
import type { SellerLead } from "@/types";

export default function PortalDealsPage() {
  const { data: apiSellers } = useApiData<SellerLead[]>('/api/sellers', []);
  const allSellers = apiSellers.length > 0 ? apiSellers : mockSellerLeads;

  const buyerDeals = allSellers.slice(0, 4).map((deal, idx) => ({
    ...deal,
    ndaSigned: idx < 2,
    interested: idx === 0 ? true : null,
  }));

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-navy-900">Available Deals</h1>
        <p className="text-sm text-navy-500 mt-1">
          Deals matched to your acquisition criteria. Sign NDAs to access full details.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
        {buyerDeals.map((deal) => (
          <Card key={deal.id} className="overflow-hidden hover:shadow-md transition-shadow">
            {/* Property header */}
            <div className="bg-gradient-to-r from-navy-800 to-navy-700 p-5 text-white">
              <div className="flex items-center justify-between mb-2">
                <Badge className="bg-gold-500/20 text-gold-300 border-gold-500/30">
                  {deal.asset_type}
                </Badge>
                {deal.ndaSigned ? (
                  <Badge className="bg-emerald-500/20 text-emerald-300 border-emerald-500/30">
                    <Shield className="mr-1 h-3 w-3" />
                    NDA Signed
                  </Badge>
                ) : (
                  <Badge className="bg-amber-500/20 text-amber-300 border-amber-500/30">
                    NDA Required
                  </Badge>
                )}
              </div>
              <h3 className="text-lg font-semibold">
                {deal.ndaSigned ? deal.address : "••••• " + deal.market.split(",")[0]}
              </h3>
              <div className="flex items-center gap-1 text-navy-300 text-sm mt-1">
                <MapPin className="h-3.5 w-3.5" />
                {deal.market}
              </div>
            </div>

            <CardContent className="p-5">
              {/* Key metrics */}
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-navy-400" />
                  <div>
                    <p className="text-xs text-navy-400">Asking Price</p>
                    <p className="text-sm font-bold text-navy-900">
                      {formatCurrency(deal.asking_price)}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <TrendingUp className="h-4 w-4 text-navy-400" />
                  <div>
                    <p className="text-xs text-navy-400">Cap Rate</p>
                    <p className="text-sm font-bold text-navy-900">
                      {deal.cap_rate ? `${deal.cap_rate}%` : "TBD"}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Square className="h-4 w-4 text-navy-400" />
                  <div>
                    <p className="text-xs text-navy-400">Size</p>
                    <p className="text-sm font-bold text-navy-900">
                      {deal.sqft ? `${formatNumber(deal.sqft)} SF` : "N/A"}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4 text-navy-400" />
                  <div>
                    <p className="text-xs text-navy-400">Year Built</p>
                    <p className="text-sm font-bold text-navy-900">
                      {deal.year_built || "N/A"}
                    </p>
                  </div>
                </div>
              </div>

              {/* NOI (only if NDA signed) */}
              {deal.ndaSigned && (
                <div className="bg-navy-50 rounded-lg p-3 mb-4">
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-navy-500">NOI</span>
                    <span className="text-sm font-bold text-navy-900">
                      {deal.noi ? formatCurrency(deal.noi) : "N/A"}
                    </span>
                  </div>
                  {deal.notes && (
                    <p className="text-xs text-navy-600 mt-2">{deal.notes}</p>
                  )}
                </div>
              )}

              {!deal.ndaSigned && (
                <div className="bg-amber-50 rounded-lg p-3 mb-4 text-center">
                  <Shield className="h-5 w-5 text-amber-600 mx-auto mb-1" />
                  <p className="text-xs text-amber-800 font-medium">
                    Sign NDA to access full financials and documents
                  </p>
                </div>
              )}

              {/* Actions */}
              <div className="flex gap-2">
                {deal.ndaSigned ? (
                  <>
                    <Button variant="gold" size="sm" className="flex-1">
                      <FileText className="mr-1 h-3.5 w-3.5" />
                      View OM
                    </Button>
                    {deal.interested === null && (
                      <>
                        <Button variant="outline" size="sm" className="flex-1">
                          <ThumbsUp className="mr-1 h-3.5 w-3.5" />
                          Interested
                        </Button>
                        <Button variant="ghost" size="sm">
                          <ThumbsDown className="h-3.5 w-3.5" />
                        </Button>
                      </>
                    )}
                    {deal.interested === true && (
                      <Badge variant="success" className="px-4">
                        <ThumbsUp className="mr-1 h-3 w-3" />
                        Interested
                      </Badge>
                    )}
                  </>
                ) : (
                  <Link href={`/portal/nda/${deal.id}`} className="flex-1">
                    <Button variant="gold" size="sm" className="w-full">
                      <Shield className="mr-1 h-3.5 w-3.5" />
                      Sign NDA
                    </Button>
                  </Link>
                )}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
