import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Progress } from "@/components/ui/progress";
import { MapPin, Building2, DollarSign } from "lucide-react";
import { formatCurrency, getInitials, getStatusColor } from "@/lib/utils";
import type { Buyer } from "@/types";
import Link from "next/link";

interface BuyerCardProps {
  buyer: Buyer;
}

export function BuyerCard({ buyer }: BuyerCardProps) {
  const engagementPercent = Math.min(buyer.engagement_score, 100);

  return (
    <div className="rounded-xl border border-navy-100 bg-white p-5 hover-lift">
      <div className="flex items-start gap-3 mb-4">
        <Avatar className="h-10 w-10">
          <AvatarFallback className="bg-navy-100 text-navy-700 text-xs font-semibold">
            {getInitials(buyer.name)}
          </AvatarFallback>
        </Avatar>
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2">
            <h3 className="text-sm font-semibold text-navy-900 truncate">{buyer.name}</h3>
            <Badge className={getStatusColor(buyer.status)} variant="secondary">
              {buyer.status}
            </Badge>
          </div>
          {buyer.company && (
            <p className="text-xs text-navy-500 truncate">{buyer.company}</p>
          )}
        </div>
      </div>

      {/* Criteria */}
      <div className="space-y-2 mb-4">
        {buyer.asset_types.length > 0 && (
          <div className="flex items-start gap-2">
            <Building2 className="h-3.5 w-3.5 text-navy-400 mt-0.5 flex-shrink-0" />
            <div className="flex flex-wrap gap-1">
              {buyer.asset_types.map((type) => (
                <span
                  key={type}
                  className="inline-flex text-xs bg-navy-50 text-navy-600 rounded px-1.5 py-0.5"
                >
                  {type}
                </span>
              ))}
            </div>
          </div>
        )}
        {buyer.target_locations.length > 0 && (
          <div className="flex items-start gap-2">
            <MapPin className="h-3.5 w-3.5 text-navy-400 mt-0.5 flex-shrink-0" />
            <span className="text-xs text-navy-600">
              {buyer.target_locations.slice(0, 3).join(", ")}
              {buyer.target_locations.length > 3 && ` +${buyer.target_locations.length - 3} more`}
            </span>
          </div>
        )}
        {(buyer.price_min || buyer.price_max) && (
          <div className="flex items-center gap-2">
            <DollarSign className="h-3.5 w-3.5 text-navy-400 flex-shrink-0" />
            <span className="text-xs text-navy-600">
              {buyer.price_min ? formatCurrency(buyer.price_min) : "Any"} —{" "}
              {buyer.price_max ? formatCurrency(buyer.price_max) : "No Max"}
            </span>
          </div>
        )}
      </div>

      {/* Engagement */}
      <div className="pt-3 border-t border-navy-50">
        <div className="flex items-center justify-between mb-1.5">
          <span className="text-xs text-navy-400">Engagement</span>
          <span className="text-xs font-semibold text-navy-700">{buyer.engagement_score}/100</span>
        </div>
        <Progress value={engagementPercent} className="h-1.5" />
      </div>

      <div className="mt-3 flex justify-end">
        <Link
          href={`/dashboard/buyers/${buyer.id}`}
          className="text-xs font-medium text-gold-600 hover:text-gold-700 transition-colors"
        >
          View Profile →
        </Link>
      </div>
    </div>
  );
}
