import { useMemo, useState } from "react";
import { Badge } from "@/common/components/ui/badge";
import { Button } from "@/common/components/ui/button";
import { Card, CardContent } from "@/common/components/ui/card";
import { Input } from "@/common/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/common/components/ui/select";
import DashboardLayout from "@/features/layouts/DashboardLayout";
import { useListCertificates, useListStaff, useListTaxForms } from "@/dataconnect-generated/react";
import { dataConnect } from "@/features/auth/firebase";
import { format } from "date-fns";
import { AnimatePresence, motion } from "framer-motion";
import {
  CheckCircle2,
  Download,
  FileText,
  Search,
  Users,
  XCircle,
  Clock
} from "lucide-react";


export default function ComplianceDashboard() {
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");

  const { data: staffData, isLoading: staffLoading } = useListStaff(dataConnect);
  const { data: taxFormsData, isLoading: taxFormsLoading } = useListTaxForms(dataConnect);
  const { data: certificatesData, isLoading: certificatesLoading } = useListCertificates(dataConnect);

  const staff = staffData?.staffs || [];
  const taxForms = taxFormsData?.taxForms || [];
  const certificates = certificatesData?.certificates || [];

  const isLoading = staffLoading || taxFormsLoading || certificatesLoading;

  // Build compliance matrix
  const complianceMatrix = useMemo(() => {
    return staff.map(s => {
      const staffTaxForms = taxForms.filter(tf => tf.staffId === s.id);
      const i9 = staffTaxForms.find(tf => tf.formType === 'I9');
      const w4 = staffTaxForms.find(tf => tf.formType === 'W4');
      const staffCerts = certificates.filter(c => c.staffId === s.id);

      const hasExpiredCerts = staffCerts.some(c => c.status === 'EXPIRED');
      const hasExpiringCerts = staffCerts.some(c => c.status === 'EXPIRING_SOON' || c.status === 'EXPIRING');
      
      let certsStatus = 'MISSING';
      if (staffCerts.length > 0) {
        if (hasExpiredCerts) certsStatus = 'EXPIRED';
        else if (hasExpiringCerts) certsStatus = 'EXPIRING';
        else certsStatus = 'CURRENT';
      }

      const isI9Compliant = i9?.status === 'APPROVED';
      const isW4Compliant = w4?.status === 'APPROVED';
      const isCertsCompliant = staffCerts.length > 0 && !hasExpiredCerts;

      const isCompliant = isI9Compliant && isW4Compliant && isCertsCompliant;

      return {
        id: s.id,
        fullName: s.fullName,
        i9Status: i9?.status || 'MISSING',
        w4Status: w4?.status || 'MISSING',
        certsStatus,
        isCompliant,
        hasExpiringCerts,
        hasExpiredCerts
      };
    });
  }, [staff, taxForms, certificates]);

  // Filtered matrix
  const filteredMatrix = useMemo(() => {
    let result = complianceMatrix;

    if (searchTerm) {
      result = result.filter(row => 
        row.fullName.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    if (statusFilter === 'compliant') {
      result = result.filter(row => row.isCompliant);
    } else if (statusFilter === 'non-compliant') {
      result = result.filter(row => !row.isCompliant);
    } else if (statusFilter === 'expiring') {
      result = result.filter(row => row.hasExpiringCerts);
    } else if (statusFilter === 'missing') {
      result = result.filter(row => row.i9Status === 'MISSING' || row.w4Status === 'MISSING' || row.certsStatus === 'MISSING');
    }

    return result;
  }, [complianceMatrix, searchTerm, statusFilter]);

  // Stats
  const stats = useMemo(() => {
    const total = complianceMatrix.length;
    const compliant = complianceMatrix.filter(r => r.isCompliant).length;
    const missingDocs = complianceMatrix.reduce((acc, r) => {
      if (r.i9Status === 'MISSING') acc++;
      if (r.w4Status === 'MISSING') acc++;
      return acc;
    }, 0);
    const expiringCerts = certificates.filter(c => c.status === 'EXPIRING_SOON' || c.status === 'EXPIRING').length;
    const complianceRate = total > 0 ? Math.round((compliant / total) * 100) : 0;

    return { total, compliant, missingDocs, expiringCerts, complianceRate };
  }, [complianceMatrix, certificates]);

  const handleExport = () => {
    const headers = ["Staff Name", "I-9 Status", "W-4 Status", "Certifications Status", "Overall Compliance"];
    const rows = filteredMatrix.map(r => [
      r.fullName,
      r.i9Status,
      r.w4Status,
      r.certsStatus,
      r.isCompliant ? "Compliant" : "Non-Compliant"
    ]);

    const csvContent = [headers, ...rows].map(e => e.join(",")).join("\n");
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute("download", `compliance_report_${format(new Date(), 'yyyy-MM-dd')}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'APPROVED':
      case 'CURRENT':
        return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">Current</Badge>;
      case 'EXPIRING':
      case 'EXPIRING_SOON':
        return <Badge className="bg-amber-500/10 text-amber-600 border-amber-500/20">Expiring</Badge>;
      case 'EXPIRED':
        return <Badge className="bg-rose-500/10 text-rose-600 border-rose-500/20">Expired</Badge>;
      case 'MISSING':
      case 'NOT_STARTED':
        return <Badge variant="outline" className="text-muted-foreground">Missing</Badge>;
      case 'PENDING':
      case 'SUBMITTED':
        return <Badge className="bg-blue-500/10 text-blue-600 border-blue-500/20">Pending</Badge>;
      default:
        return <Badge variant="secondary">{status}</Badge>;
    }
  };

  return (
    <DashboardLayout
      title="Compliance Dashboard"
      subtitle="Overview of staff compliance status and certifications"
    >
      <div className="space-y-6">
        {/* Stats Bar */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="border-border/50 glass">
            <CardContent className="p-4 flex items-center gap-4">
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-black text-foreground">{stats.complianceRate}%</p>
                <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Compliance Rate</p>
              </div>
            </CardContent>
          </Card>

          <Card className="border-border/50 glass">
            <CardContent className="p-4 flex items-center gap-4">
              <div className="w-12 h-12 bg-rose-500/10 rounded-xl flex items-center justify-center border border-rose-500/20">
                <FileText className="w-6 h-6 text-rose-500" />
              </div>
              <div>
                <p className="text-2xl font-black text-foreground">{stats.missingDocs}</p>
                <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Missing Docs</p>
              </div>
            </CardContent>
          </Card>

          <Card className="border-border/50 glass">
            <CardContent className="p-4 flex items-center gap-4">
              <div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center border border-amber-500/20">
                <Clock className="w-6 h-6 text-amber-500" />
              </div>
              <div>
                <p className="text-2xl font-black text-foreground">{stats.expiringCerts}</p>
                <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Expiring Certs</p>
              </div>
            </CardContent>
          </Card>

          <Card className="border-border/50 glass">
            <CardContent className="p-4 flex items-center gap-4">
              <div className="w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center border border-cyan-500/20">
                <Users className="w-6 h-6 text-cyan-500" />
              </div>
              <div>
                <p className="text-2xl font-black text-foreground">{stats.total}</p>
                <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Total Staff</p>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Filters & Actions */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div className="flex flex-1 items-center gap-4 w-full md:w-auto">
            <Input
              placeholder="Search staff..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              leadingIcon={<Search className="w-4 h-4" />}
              className="max-w-xs"
            />
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="All Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="compliant">Compliant</SelectItem>
                <SelectItem value="non-compliant">Non-Compliant</SelectItem>
                <SelectItem value="expiring">Expiring Certs</SelectItem>
                <SelectItem value="missing">Missing Docs</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <Button onClick={handleExport} variant="outline" className="gap-2">
            <Download className="w-4 h-4" />
            Export Report
          </Button>
        </div>

        {/* Table */}
        <Card>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-muted/40 border-b border-border/50">
                    <th className="text-left py-4 px-6 font-bold text-xs uppercase tracking-wider text-muted-foreground">Staff Name</th>
                    <th className="text-center py-4 px-6 font-bold text-xs uppercase tracking-wider text-muted-foreground">I-9 Status</th>
                    <th className="text-center py-4 px-6 font-bold text-xs uppercase tracking-wider text-muted-foreground">W-4 Status</th>
                    <th className="text-center py-4 px-6 font-bold text-xs uppercase tracking-wider text-muted-foreground">Certifications</th>
                    <th className="text-center py-4 px-6 font-bold text-xs uppercase tracking-wider text-muted-foreground">Overall</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border/40">
                  <AnimatePresence mode="popLayout">
                    {filteredMatrix.map((row) => (
                      <motion.tr
                        key={row.id}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="hover:bg-primary/5 transition-colors group"
                      >
                        <td className="py-4 px-6">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center text-primary font-bold text-xs">
                              {row.fullName.charAt(0)}
                            </div>
                            <span className="font-medium text-foreground">{row.fullName}</span>
                          </div>
                        </td>
                        <td className="py-4 px-6 text-center">
                          {getStatusBadge(row.i9Status)}
                        </td>
                        <td className="py-4 px-6 text-center">
                          {getStatusBadge(row.w4Status)}
                        </td>
                        <td className="py-4 px-6 text-center">
                          {getStatusBadge(row.certsStatus)}
                        </td>
                        <td className="py-4 px-6 text-center">
                          {row.isCompliant ? (
                            <div className="flex items-center justify-center gap-1.5 text-emerald-600 font-bold text-xs">
                              <CheckCircle2 className="w-3.5 h-3.5" />
                              COMPLIANT
                            </div>
                          ) : (
                            <div className="flex items-center justify-center gap-1.5 text-rose-600 font-bold text-xs">
                              <XCircle className="w-3.5 h-3.5" />
                              NON-COMPLIANT
                            </div>
                          )}
                        </td>
                      </motion.tr>
                    ))}
                  </AnimatePresence>
                </tbody>
              </table>
              {filteredMatrix.length === 0 && !isLoading && (
                <div className="p-12 text-center text-muted-foreground">
                  No staff members found matching the criteria.
                </div>
              )}
              {isLoading && (
                <div className="p-12 text-center text-muted-foreground">
                  Loading compliance data...
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}
