import React from "react";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Star, MapPin, Clock, Award, TrendingUp, AlertCircle } from "lucide-react";

/**
 * Worker Info Hover Card
 * Shows comprehensive staff info: role, ratings, history, reliability
 */

export default function WorkerInfoCard({ staff, trigger }) {
  if (!staff) return trigger;
  
  const reliabilityColor = (score) => {
    if (score >= 95) return "text-green-600";
    if (score >= 85) return "text-amber-600";
    return "text-red-600";
  };
  
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        {trigger}
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="space-y-4">
          {/* Header */}
          <div className="flex items-start gap-3">
            <Avatar className="w-14 h-14">
              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold text-lg">
                {staff.employee_name?.charAt(0)}
              </AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h4 className="font-bold text-slate-900">{staff.employee_name}</h4>
              <p className="text-sm text-slate-600">{staff.position}</p>
              {staff.position_2 && (
                <p className="text-xs text-slate-500">Also: {staff.position_2}</p>
              )}
            </div>
          </div>
          
          {/* Rating & Reliability */}
          <div className="grid grid-cols-2 gap-3">
            <div className="flex items-center gap-2 bg-amber-50 rounded-lg p-2">
              <Star className="w-4 h-4 text-amber-500" />
              <div>
                <p className="text-xs text-slate-500">Rating</p>
                <p className="font-bold text-amber-700">{staff.rating || 4.5} ★</p>
              </div>
            </div>
            <div className="flex items-center gap-2 bg-green-50 rounded-lg p-2">
              <TrendingUp className="w-4 h-4 text-green-600" />
              <div>
                <p className="text-xs text-slate-500">Reliability</p>
                <p className={`font-bold ${reliabilityColor(staff.reliability_score || 90)}`}>
                  {staff.reliability_score || 90}%
                </p>
              </div>
            </div>
          </div>
          
          {/* Experience & History */}
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm">
              <Clock className="w-4 h-4 text-slate-400" />
              <span className="text-slate-600">
                {staff.total_shifts || 0} shifts completed
              </span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <MapPin className="w-4 h-4 text-slate-400" />
              <span className="text-slate-600">{staff.hub_location || staff.city || "Unknown location"}</span>
            </div>
            {staff.certifications && staff.certifications.length > 0 && (
              <div className="flex items-center gap-2 text-sm">
                <Award className="w-4 h-4 text-slate-400" />
                <span className="text-slate-600">
                  {staff.certifications.length} certification{staff.certifications.length > 1 ? 's' : ''}
                </span>
              </div>
            )}
          </div>
          
          {/* Certifications */}
          {staff.certifications && staff.certifications.length > 0 && (
            <div className="space-y-1">
              <p className="text-xs font-semibold text-slate-700 uppercase">Certifications</p>
              <div className="flex flex-wrap gap-1">
                {staff.certifications.slice(0, 3).map((cert, idx) => (
                  <Badge key={idx} variant="outline" className="text-xs">
                    {cert.name || cert.cert_name}
                  </Badge>
                ))}
              </div>
            </div>
          )}
          
          {/* Performance Indicators */}
          <div className="grid grid-cols-3 gap-2 pt-2 border-t">
            <div className="text-center">
              <p className="text-xs text-slate-500">On-Time</p>
              <p className="font-bold text-sm text-green-600">
                {staff.shift_coverage_percentage || 95}%
              </p>
            </div>
            <div className="text-center">
              <p className="text-xs text-slate-500">No-Shows</p>
              <p className="font-bold text-sm text-slate-700">
                {staff.no_show_count || 0}
              </p>
            </div>
            <div className="text-center">
              <p className="text-xs text-slate-500">Cancels</p>
              <p className="font-bold text-sm text-slate-700">
                {staff.cancellation_count || 0}
              </p>
            </div>
          </div>
          
          {/* Warnings */}
          {staff.background_check_status !== 'cleared' && (
            <div className="flex items-center gap-2 bg-red-50 rounded-lg p-2">
              <AlertCircle className="w-4 h-4 text-red-600" />
              <p className="text-xs text-red-600">Background check pending</p>
            </div>
          )}
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}