
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, Building2, Phone, Mail, Briefcase, Hash } from "lucide-react";

export default function VendorScoreHoverCard({ vendor, children }) {
  // Safety checks for vendor data
  if (!vendor) {
    return children;
  }

  const getScoreColor = (score) => {
    if (!score) return "text-slate-400";
    if (score >= 95) return "text-green-600";
    if (score >= 90) return "text-blue-600";
    if (score >= 85) return "text-yellow-600";
    return "text-red-600";
  };

  const getPerformanceGrade = (fillRate) => {
    if (!fillRate) return { grade: "N/A", color: "bg-slate-400" };
    if (fillRate >= 97) return { grade: "A+", color: "bg-green-600" };
    if (fillRate >= 95) return { grade: "A", color: "bg-green-500" };
    if (fillRate >= 90) return { grade: "B+", color: "bg-blue-500" };
    if (fillRate >= 85) return { grade: "B", color: "bg-yellow-500" };
    return { grade: "C", color: "bg-orange-500" };
  };

  const performance = getPerformanceGrade(vendor.fillRate);

  return (
    <HoverCard openDelay={200}>
      <HoverCardTrigger asChild>
        {children}
      </HoverCardTrigger>
      <HoverCardContent className="w-[450px] p-0" side="right" align="start">
        {/* Header */}
        <div className="bg-gradient-to-br from-[#0A39DF] to-[#1C323E] p-5 text-white">
          <div className="flex items-start justify-between mb-3">
            <div className="flex items-start gap-3">
              <div className="w-12 h-12 bg-white rounded-lg flex items-center justify-center">
                <Building2 className="w-6 h-6 text-[#0A39DF]" />
              </div>
              <div>
                <h3 className="font-bold text-lg">{vendor.name || vendor.legal_name || "Vendor"}</h3>
                <div className="flex items-center gap-2 mt-1">
                  <Badge variant="outline" className="bg-white/20 border-white/40 text-white font-mono text-xs">
                    <Hash className="w-3 h-3 mr-1" />
                    {vendor.vendorNumber || vendor.vendor_number || "N/A"}
                  </Badge>
                </div>
                <p className="text-sm text-white/80 mt-1">{vendor.specialty || "General Services"}</p>
              </div>
            </div>
            <Badge className={`${performance.color} text-white font-bold text-lg px-3 py-1`}>
              {performance.grade}
            </Badge>
          </div>
          
          <div className="grid grid-cols-2 gap-3 mt-4">
            <div className="bg-white/10 rounded-lg p-2">
              <p className="text-xs text-white/70">Monthly Spend</p>
              <p className="text-lg font-bold">{vendor.spend || "N/A"}</p>
            </div>
            <div className="bg-white/10 rounded-lg p-2">
              <p className="text-xs text-white/70">Total Staff</p>
              <p className="text-lg font-bold">{vendor.employees ? vendor.employees.toLocaleString() : "N/A"}</p>
            </div>
          </div>
        </div>

        {/* Company Information */}
        <div className="p-5 space-y-4">
          <div>
            <h4 className="text-xs font-semibold text-slate-500 uppercase mb-3">Company Information</h4>
            <div className="space-y-2">
              <div className="flex items-center gap-3">
                <MapPin className="w-4 h-4 text-slate-400" />
                <div>
                  <p className="text-sm font-medium text-slate-900">{vendor.region || "N/A"}</p>
                  <p className="text-xs text-slate-500">{vendor.state || "N/A"}</p>
                </div>
              </div>
              
              <div className="flex items-center gap-3">
                <Briefcase className="w-4 h-4 text-slate-400" />
                <div>
                  <p className="text-sm font-medium text-slate-900">{vendor.specialty || "N/A"}</p>
                  <p className="text-xs text-slate-500">Primary Service</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <Phone className="w-4 h-4 text-slate-400" />
                <p className="text-sm text-slate-700">{vendor.primary_contact_phone || "(555) 123-4567"}</p>
              </div>

              <div className="flex items-center gap-3">
                <Mail className="w-4 h-4 text-slate-400" />
                <p className="text-sm text-slate-700">{vendor.primary_contact_email || `contact@${(vendor.name || "vendor").toLowerCase().replace(/\s+/g, '').replace(/[()&]/g, '')}.com`}</p>
              </div>
            </div>
          </div>

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

          {/* Performance Metrics */}
          {(vendor.fillRate || vendor.onTimeRate || vendor.csat || vendor.employees) && (
            <div className="pt-3 border-t border-slate-200">
              <h4 className="text-xs font-semibold text-slate-500 uppercase mb-3">Performance Metrics</h4>
              <div className="grid grid-cols-2 gap-3">
                {/* Fill Rate */}
                {vendor.fillRate && (
                  <div className="bg-slate-50 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <TrendingUp className="w-4 h-4 text-emerald-600" />
                      <span className="text-xs font-medium text-slate-600">Fill Rate</span>
                    </div>
                    <p className={`text-2xl font-bold ${getScoreColor(vendor.fillRate)}`}>
                      {vendor.fillRate}%
                    </p>
                    <div className="w-full bg-slate-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-gradient-to-r from-emerald-500 to-emerald-600 h-1.5 rounded-full transition-all duration-300" 
                        style={{ width: `${vendor.fillRate}%` }}
                      />
                    </div>
                  </div>
                )}

                {/* On-Time Rate */}
                {vendor.onTimeRate && (
                  <div className="bg-slate-50 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <Shield className="w-4 h-4 text-blue-600" />
                      <span className="text-xs font-medium text-slate-600">On-Time</span>
                    </div>
                    <p className={`text-2xl font-bold ${getScoreColor(vendor.onTimeRate)}`}>
                      {vendor.onTimeRate}%
                    </p>
                    <div className="w-full bg-slate-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-gradient-to-r from-blue-500 to-blue-600 h-1.5 rounded-full transition-all duration-300" 
                        style={{ width: `${vendor.onTimeRate}%` }}
                      />
                    </div>
                  </div>
                )}

                {/* Customer Satisfaction */}
                {vendor.csat && (
                  <div className="bg-slate-50 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <Award className="w-4 h-4 text-amber-600" />
                      <span className="text-xs font-medium text-slate-600">CSAT Score</span>
                    </div>
                    <p className="text-2xl font-bold text-amber-600">
                      {vendor.csat}/5.0
                    </p>
                    <div className="w-full bg-slate-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-gradient-to-r from-amber-500 to-amber-600 h-1.5 rounded-full transition-all duration-300" 
                        style={{ width: `${(vendor.csat / 5) * 100}%` }}
                      />
                    </div>
                  </div>
                )}

                {/* Workforce */}
                {vendor.employees && (
                  <div className="bg-slate-50 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <Users className="w-4 h-4 text-purple-600" />
                      <span className="text-xs font-medium text-slate-600">Workforce</span>
                    </div>
                    <p className="text-2xl font-bold text-purple-600">
                      {vendor.employees.toLocaleString()}
                    </p>
                    <p className="text-xs text-slate-500 mt-1">Active staff</p>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="bg-blue-50 p-3 border-t border-blue-200">
          <p className="text-xs text-center text-slate-600">
            Hover over vendor name in any table to see details • Click for full profile
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
