import React from "react";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Badge } from "@/components/ui/badge";
import { Award, Shield, DollarSign, TrendingUp, Users, MapPin } from "lucide-react";

export default function VendorHoverCard({ vendor, children }) {
  // Mock performance data - would come from backend
  const performanceData = {
    overallScore: vendor.name === "Legendary Event Staffing" ? "A+" : vendor.name === "Instawork" ? "A" : "B+",
    compliance: vendor.name === "Legendary Event Staffing" ? 98 : 95,
    billingAccuracy: vendor.name === "Legendary Event Staffing" ? 99.5 : 96,
    fillRate: vendor.name === "Legendary Event Staffing" ? 97 : 92
  };

  const getScoreColor = (score) => {
    if (score >= 97) return "text-green-600";
    if (score >= 90) return "text-blue-600";
    if (score >= 80) return "text-yellow-600";
    return "text-red-600";
  };

  return (
    <HoverCard openDelay={200}>
      <HoverCardTrigger asChild>
        {children}
      </HoverCardTrigger>
      <HoverCardContent className="w-96 p-0" side="right" align="start">
        <div className="bg-gradient-to-br from-slate-50 to-white p-4 border-b border-slate-200">
          <div className="flex items-start justify-between mb-3">
            <div>
              <h3 className="font-bold text-lg text-[#1C323E]">{vendor.name}</h3>
              <p className="text-sm text-slate-600">{vendor.specialty}</p>
            </div>
            <Badge className={`${performanceData.overallScore === 'A+' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'} font-bold text-lg px-3 py-1`}>
              {performanceData.overallScore}
            </Badge>
          </div>
          
          <div className="flex items-center gap-4 text-sm text-slate-600">
            <div className="flex items-center gap-1">
              <MapPin className="w-4 h-4" />
              <span>{vendor.region}</span>
            </div>
            <div className="flex items-center gap-1">
              <Users className="w-4 h-4" />
              <span>{vendor.employees.toLocaleString()} staff</span>
            </div>
          </div>
        </div>

        <div className="p-4 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            {/* Compliance */}
            <div className="bg-green-50 rounded-lg p-3 border border-green-200">
              <div className="flex items-center gap-2 mb-1">
                <Shield className="w-4 h-4 text-green-600" />
                <span className="text-xs font-medium text-slate-600">Compliance</span>
              </div>
              <p className={`text-2xl font-bold ${getScoreColor(performanceData.compliance)}`}>
                {performanceData.compliance}%
              </p>
            </div>

            {/* Billing Accuracy */}
            <div className="bg-blue-50 rounded-lg p-3 border border-blue-200">
              <div className="flex items-center gap-2 mb-1">
                <DollarSign className="w-4 h-4 text-blue-600" />
                <span className="text-xs font-medium text-slate-600">Billing Accuracy</span>
              </div>
              <p className={`text-2xl font-bold ${getScoreColor(performanceData.billingAccuracy)}`}>
                {performanceData.billingAccuracy}%
              </p>
            </div>

            {/* Fill Rate */}
            <div className="bg-emerald-50 rounded-lg p-3 border border-emerald-200 col-span-2">
              <div className="flex items-center gap-2 mb-2">
                <TrendingUp className="w-4 h-4 text-emerald-600" />
                <span className="text-xs font-medium text-slate-600">Fill Rate</span>
              </div>
              <div className="flex items-center gap-3">
                <p className={`text-2xl font-bold ${getScoreColor(performanceData.fillRate)}`}>
                  {performanceData.fillRate}%
                </p>
                <div className="flex-1">
                  <div className="w-full bg-slate-200 rounded-full h-2">
                    <div 
                      className="bg-gradient-to-r from-emerald-500 to-emerald-600 h-2 rounded-full transition-all duration-300" 
                      style={{ width: `${performanceData.fillRate}%` }}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Software Badge */}
          <div className="pt-3 border-t border-slate-200">
            <p className="text-xs text-slate-500 mb-2">Technology Stack</p>
            {vendor.softwareType === "platform" && (
              <Badge className="bg-green-100 text-green-700">
                ✅ {vendor.software}
              </Badge>
            )}
            {vendor.softwareType === "building" && (
              <Badge className="bg-blue-100 text-blue-700">
                ⚙️ {vendor.software}
              </Badge>
            )}
            {vendor.softwareType === "partial" && (
              <Badge className="bg-yellow-100 text-yellow-700">
                ⚙️ {vendor.software}
              </Badge>
            )}
            {vendor.softwareType === "traditional" && (
              <Badge className="bg-gray-100 text-gray-700">
                ❌ {vendor.software}
              </Badge>
            )}
          </div>

          <p className="text-xs text-slate-500 text-center pt-2 border-t border-slate-200">
            Click for full details
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}