import React from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Mail, Phone, MapPin, Calendar, Edit, Building2, Navigation, Route, Star, TrendingUp, XCircle } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { format } from "date-fns";

const departmentColors = {
  Operations: "bg-[#0A39DF]/10 text-[#0A39DF] border-[#0A39DF]/30",
  Sales: "bg-emerald-100 text-emerald-800 border-emerald-300",
  HR: "bg-[#C8DBDC]/40 text-[#1C323E] border-[#C8DBDC]",
  Finance: "bg-purple-100 text-purple-800 border-purple-300",
  IT: "bg-[#1C323E]/10 text-[#1C323E] border-[#1C323E]/30",
  Marketing: "bg-pink-100 text-pink-800 border-pink-300",
  "Customer Service": "bg-blue-100 text-blue-800 border-blue-300",
  Logistics: "bg-amber-100 text-amber-800 border-amber-300"
};

export default function StaffCard({ staff }) {
  const navigate = useNavigate();

  const getInitials = (name) => {
    if (!name) return "?";
    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
  };

  const renderStars = (rating) => {
    const stars = [];
    const fullStars = Math.floor(rating || 0);
    const hasHalfStar = (rating || 0) % 1 >= 0.5;
    
    for (let i = 0; i < 5; i++) {
      if (i < fullStars) {
        stars.push(<Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />);
      } else if (i === fullStars && hasHalfStar) {
        stars.push(<Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" style={{clipPath: 'inset(0 50% 0 0)'}} />);
      } else {
        stars.push(<Star key={i} className="w-4 h-4 text-slate-300" />);
      }
    }
    return stars;
  };

  const coveragePercentage = staff.shift_coverage_percentage || 0;
  const cancellationCount = staff.cancellation_count || 0;
  const rating = staff.rating || 0;

  const getCoverageColor = (percentage) => {
    if (percentage >= 90) return "text-green-600 bg-green-50";
    if (percentage >= 70) return "text-yellow-600 bg-yellow-50";
    return "text-red-600 bg-red-50";
  };

  return (
    <Card className="hover:shadow-xl transition-all duration-300 border-slate-200 overflow-hidden group hover:-translate-y-1">
      <CardHeader className="bg-gradient-to-br from-slate-50 via-white to-slate-50 p-6 border-b border-slate-200">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 bg-gradient-to-br from-[#0A39DF] to-[#1C323E] rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition-transform duration-300">
              {staff.initial || getInitials(staff.employee_name)}
            </div>
            <div>
              <h3 className="font-bold text-[#1C323E] text-lg group-hover:text-[#0A39DF] transition-colors">
                {staff.employee_name}
              </h3>
              <p className="text-slate-600 font-medium">{staff.position}</p>
              
              {/* Rating */}
              <div className="flex items-center gap-1 mt-2">
                {renderStars(rating)}
                <span className="text-sm text-slate-600 ml-1">({rating.toFixed(1)})</span>
              </div>
            </div>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => navigate(createPageUrl(`EditStaff?id=${staff.id}`))}
            className="hover:bg-[#0A39DF]/10 hover:text-[#0A39DF]"
          >
            <Edit className="w-4 h-4" />
          </Button>
        </div>
      </CardHeader>
      
      <CardContent className="p-6 space-y-4">
        {/* Performance Metrics */}
        <div className="grid grid-cols-2 gap-3 pb-4 border-b border-slate-200">
          <div className={`p-3 rounded-lg ${getCoverageColor(coveragePercentage)}`}>
            <div className="flex items-center gap-2 mb-1">
              <TrendingUp className="w-4 h-4" />
              <span className="text-xs font-medium">Coverage</span>
            </div>
            <div className="text-2xl font-bold">{coveragePercentage}%</div>
          </div>
          
          <div className={`p-3 rounded-lg ${cancellationCount > 5 ? 'bg-red-50 text-red-600' : cancellationCount > 2 ? 'bg-yellow-50 text-yellow-600' : 'bg-green-50 text-green-600'}`}>
            <div className="flex items-center gap-2 mb-1">
              <XCircle className="w-4 h-4" />
              <span className="text-xs font-medium">Cancellations</span>
            </div>
            <div className="text-2xl font-bold">{cancellationCount}</div>
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          {staff.department && (
            <Badge className={`${departmentColors[staff.department]} border font-medium`}>
              <Building2 className="w-3 h-3 mr-1" />
              {staff.department}
            </Badge>
          )}
          {staff.english && (
            <Badge variant="outline" className="border-slate-300 text-slate-700">
              English: {staff.english}
            </Badge>
          )}
          {staff.invoiced && (
            <Badge className="bg-green-50 text-green-700 border-green-200 border">
              Invoiced
            </Badge>
          )}
        </div>

        <div className="space-y-3 text-sm">
          {staff.manager && (
            <div className="flex items-center gap-2 text-slate-600">
              <Mail className="w-4 h-4 text-[#0A39DF]" />
              <span className="font-medium">Manager:</span>
              <span>{staff.manager}</span>
            </div>
          )}
          {staff.contact_number && (
            <div className="flex items-center gap-2 text-slate-600">
              <Phone className="w-4 h-4 text-[#0A39DF]" />
              <span>{staff.contact_number}</span>
            </div>
          )}
          {staff.hub_location && (
            <div className="flex items-center gap-2 text-slate-600">
              <MapPin className="w-4 h-4 text-[#0A39DF]" />
              <span>{staff.hub_location}</span>
            </div>
          )}
          {staff.event_location && (
            <div className="flex items-center gap-2 text-slate-600">
              <Navigation className="w-4 h-4 text-[#0A39DF]" />
              <span className="font-medium">Event:</span>
              <span>{staff.event_location}</span>
            </div>
          )}
          {staff.track && (
            <div className="flex items-center gap-2 text-slate-600">
              <Route className="w-4 h-4 text-[#0A39DF]" />
              <span className="font-medium">Track:</span>
              <span>{staff.track}</span>
            </div>
          )}
          {staff.check_in && (
            <div className="flex items-center gap-2 text-slate-600">
              <Calendar className="w-4 h-4 text-[#0A39DF]" />
              <span className="font-medium">Last Check-in:</span>
              <span>{format(new Date(staff.check_in), "MMM d, yyyy")}</span>
            </div>
          )}
        </div>

        {staff.schedule_days && (
          <div className="pt-3 border-t border-slate-200">
            <p className="text-xs text-slate-500 font-medium mb-1">Schedule</p>
            <p className="text-sm text-[#1C323E]">{staff.schedule_days}</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}