import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Building2, MapPin, DollarSign, TrendingUp, Home, Factory, Store, Hotel, Layers, Mountain } from "lucide-react";
import { formatCurrency, formatNumber, getStatusColor } from "@/lib/utils";
import type { SellerLead } from "@/types";

const assetIcons: Record<string, typeof Building2> = {
  Office: Building2,
  Industrial: Factory,
  Retail: Store,
  Multifamily: Home,
  "Mixed-Use": Layers,
  Land: Mountain,
  Hospitality: Hotel,
  Other: Building2,
};

interface DealCardProps {
  deal: SellerLead;
  matchCount?: number;
}

export function DealCard({ deal, matchCount }: DealCardProps) {
  const AssetIcon = assetIcons[deal.asset_type] || Building2;

  return (
    <div className="rounded-xl border border-navy-100 bg-white p-5 hover-lift group">
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-navy-50 group-hover:bg-gold-50 transition-colors">
            <AssetIcon className="h-4 w-4 text-navy-600 group-hover:text-gold-600 transition-colors" />
          </div>
          <div>
            <span className="text-xs font-medium text-navy-400 uppercase tracking-wider">
              {deal.asset_type}
            </span>
          </div>
        </div>
        <Badge className={getStatusColor(deal.status)} variant="secondary">
          {deal.status}
        </Badge>
      </div>

      <h3 className="text-base font-semibold text-navy-900 mb-1 line-clamp-1">{deal.address}</h3>

      <div className="flex items-center gap-1.5 text-sm text-navy-500 mb-4">
        <MapPin className="h-3.5 w-3.5" />
        <span>{deal.market}</span>
      </div>

      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className="flex items-center gap-1.5">
          <DollarSign className="h-3.5 w-3.5 text-navy-400" />
          <div>
            <p className="text-xs text-navy-400 font-light">Asking Price</p>
            <p className="text-sm font-semibold text-navy-900">{formatCurrency(deal.asking_price)}</p>
          </div>
        </div>
        <div className="flex items-center gap-1.5">
          <TrendingUp className="h-3.5 w-3.5 text-navy-400" />
          <div>
            <p className="text-xs text-navy-400 font-light">Cap Rate</p>
            <p className="text-sm font-semibold text-navy-900">
              {deal.cap_rate ? `${deal.cap_rate}%` : "TBD"}
            </p>
          </div>
        </div>
      </div>

      {deal.sqft && (
        <p className="text-xs text-navy-400 mb-3">
          {formatNumber(deal.sqft)} SF
          {deal.units ? ` • ${deal.units} units` : ""}
          {deal.year_built ? ` • Built ${deal.year_built}` : ""}
        </p>
      )}

      <div className="flex items-center justify-between pt-3 border-t border-navy-50">
        {matchCount !== undefined && (
          <span className="text-xs text-navy-500">
            <span className="font-semibold text-navy-700">{matchCount}</span> buyer matches
          </span>
        )}
        <Link
          href={`/dashboard/sellers`}
          className="text-xs font-medium text-gold-600 hover:text-gold-700 transition-colors"
        >
          View Details →
        </Link>
      </div>
    </div>
  );
}
