"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Plus, FileText, ChevronRight, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { fetchPayrollRuns, fetchPayslipsForRun } from "@/lib/supabase/payroll-actions";
import {
  STATUS_LABELS,
  STATUS_COLORS,
  formatDateShort,
  type PayrollRunSummary,
  type PayslipWithEmployee,
} from "@/lib/supabase/payroll-types";
import PageSkeleton from "./PageSkeleton";

const FLAG_EMOJIS: Record<string, string> = {
  AU: "🇦🇺", US: "🇺🇸", GB: "🇬🇧", CA: "🇨🇦", NZ: "🇳🇿", SG: "🇸🇬",
  DE: "🇩🇪", FR: "🇫🇷", ES: "🇪🇸", IT: "🇮🇹", IE: "🇮🇪", NL: "🇳🇱",
  BE: "🇧🇪", AT: "🇦🇹", PT: "🇵🇹", FI: "🇫🇮", SE: "🇸🇪", DK: "🇩🇰",
  NO: "🇳🇴", PL: "🇵🇱",
};

function formatCurrency(amount: number): string {
  return `$${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

export default function PayrollListPage({ onRunPayroll }: { onRunPayroll: () => void }) {
  const router = useRouter();
  const [runs, setRuns] = useState<PayrollRunSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedRun, setExpandedRun] = useState<string | null>(null);
  const [payslips, setPayslips] = useState<PayslipWithEmployee[]>([]);
  const [payslipsLoading, setPayslipsLoading] = useState(false);

  useEffect(() => {
    let cancelled = false;
    fetchPayrollRuns()
      .then((r) => { if (!cancelled) setRuns(r); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const handleExpandRun = async (runId: string) => {
    if (expandedRun === runId) { setExpandedRun(null); return; }
    setExpandedRun(runId);
    setPayslipsLoading(true);
    try {
      const ps = await fetchPayslipsForRun(runId);
      setPayslips(ps);
    } catch { setPayslips([]); }
    finally { setPayslipsLoading(false); }
  };

  const viewPayslip = (runId: string, employeeId: string, ps?: string, pe?: string) => {
    const params = new URLSearchParams({ run: runId, emp: employeeId });
    if (ps) params.set("ps", ps);
    if (pe) params.set("pe", pe);
    router.push(`/payroll?${params.toString()}`, { scroll: false });
  };

  if (loading) return <PageSkeleton name="Payroll" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Payroll</h1>
          <p className="text-gray-500 mt-1">Run payroll and view payslips</p>
        </div>
        <Button
          onClick={onRunPayroll}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          Run Payroll
        </Button>
      </div>

      {/* Run list */}
      {runs.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
            <FileText className="w-8 h-8 text-gray-300" />
          </div>
          <p className="text-sm text-gray-500 font-medium">No payroll runs yet</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">Run your first payroll to get started</p>
          <Button
            onClick={onRunPayroll}
            size="sm"
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
          >
            <Plus className="w-3.5 h-3.5" />
            Run Payroll
          </Button>
        </div>
      ) : (
        <div className="space-y-3">
          {runs.map((run) => (
            <div key={run.id} className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
              <button
                onClick={() => handleExpandRun(run.id)}
                className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50/50 transition-colors cursor-pointer"
              >
                <div className="flex items-center gap-4 flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <span className="text-xl">{FLAG_EMOJIS[run.jurisdiction_country_code] || "🌍"}</span>
                    <ChevronRight className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${expandedRun === run.id ? "rotate-90" : ""}`} />
                  </div>
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <Calendar className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                      <span className="text-sm font-medium text-gray-900">
                        {formatDateShort(run.period_start)} — {formatDateShort(run.period_end)}
                      </span>
                    </div>
                    <span className="text-xs text-gray-500 capitalize">{run.pay_frequency} · {run.employee_count} employee{run.employee_count !== 1 ? "s" : ""}</span>
                  </div>
                </div>
                <div className="flex items-center gap-4 flex-shrink-0">
                  <div className="text-right hidden sm:block">
                    <p className="text-sm font-medium text-gray-900">{formatCurrency(run.total_gross)}</p>
                    <p className="text-xs text-gray-500">Net: {formatCurrency(run.total_net)}</p>
                  </div>
                  <Badge variant="outline" className={`text-xs border ${STATUS_COLORS[run.status]}`}>
                    {STATUS_LABELS[run.status]}
                  </Badge>
                </div>
              </button>

              {/* Expanded payslips */}
              {expandedRun === run.id && (
                <div className="border-t border-gray-100">
                  {payslipsLoading ? (
                    <div className="flex items-center justify-center py-8">
                      <div className="w-5 h-5 border-2 border-teal-500 border-t-transparent rounded-full animate-spin" />
                    </div>
                  ) : payslips.length === 0 ? (
                    <div className="py-8 text-center text-sm text-gray-400">No payslips found</div>
                  ) : (
                    <table className="w-full">
                      <thead>
                        <tr className="border-b border-gray-100 bg-gray-50/50">
                          <th className="text-left text-[11px] font-medium text-gray-500 py-2 px-4">Employee</th>
                          <th className="text-right text-[11px] font-medium text-gray-500 py-2 px-4">Gross</th>
                          <th className="text-right text-[11px] font-medium text-gray-500 py-2 px-4 hidden sm:table-cell">Deductions</th>
                          <th className="text-right text-[11px] font-medium text-gray-500 py-2 px-4">Net</th>
                          <th className="w-10"></th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-50">
                        {payslips.map((ps) => (
                          <tr key={ps.id} className="hover:bg-gray-50/50 transition-colors">
                            <td className="py-2.5 px-4">
                              <div className="flex items-center gap-2">
                                <div className="w-6 h-6 rounded-full bg-teal-500 flex items-center justify-center text-white text-[10px] font-semibold flex-shrink-0">
                                  {ps.employee?.first_name?.[0]}{ps.employee?.last_name?.[0]}
                                </div>
                                <span className="text-sm text-gray-900">{ps.employee?.first_name} {ps.employee?.last_name}</span>
                              </div>
                            </td>
                            <td className="py-2.5 px-4 text-right text-sm text-gray-900 font-medium">{ps.gross_pay.toFixed(2)}</td>
                            <td className="py-2.5 px-4 text-right text-sm text-gray-500 hidden sm:table-cell">{ps.total_deductions.toFixed(2)}</td>
                            <td className="py-2.5 px-4 text-right text-sm text-emerald-600 font-semibold">{ps.net_pay.toFixed(2)}</td>
                            <td className="py-2.5 px-4">
                              <button
                                onClick={() => viewPayslip(run.id, ps.employee_id, run.period_start, run.period_end)}
                                className="text-xs text-[#1D9E75] hover:underline font-medium cursor-pointer"
                              >
                                View
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}