"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  PageHeader, PageLoader, EmptyState, Modal, Badge, TableShell,
  fmtKes, inputCls, btnPrimary, btnGhost, btnDanger, Field, Spinner,
} from "@/components/ui";

interface Run {
  id: number;
  period: string;
  periodLabel: string;
  status: string;
  totalGross: number;
  totalDeductions: number;
  totalNet: number;
  employeeCount: number;
}

export default function PayrollPage() {
  const [rows, setRows] = useState<Run[] | null>(null);
  const [open, setOpen] = useState(false);
  const [period, setPeriod] = useState(() => new Date().toISOString().slice(0, 7));
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch("/api/payroll").then((r) => r.json()).then(setRows);
  }, []);

  const generate = async () => {
    setSaving(true);
    setError("");
    try {
      const res = await fetch("/api/payroll", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ period }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to generate payroll");
      setRows((prev) => [data, ...(prev ?? [])]);
      setOpen(false);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const setStatus = async (run: Run, status: string) => {
    setRows((prev) => (prev ?? []).map((r) => (r.id === run.id ? { ...r, status } : r))); // optimistic
    const res = await fetch(`/api/payroll/${run.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status }),
    });
    if (!res.ok) setRows((prev) => (prev ?? []).map((r) => (r.id === run.id ? run : r)));
  };

  const remove = async (run: Run) => {
    if (!confirm(`Delete payroll run for ${run.periodLabel}?`)) return;
    const prev = rows;
    setRows((r) => (r ?? []).filter((x) => x.id !== run.id));
    const res = await fetch(`/api/payroll/${run.id}`, { method: "DELETE" });
    if (!res.ok) setRows(prev);
  };

  return (
    <div>
      <PageHeader
        title="Payroll"
        subtitle="Kenyan statutory deductions: PAYE, NSSF, SHIF & Housing Levy"
        action={<button onClick={() => { setError(""); setOpen(true); }} className={btnPrimary}>+ Run payroll</button>}
      />

      <div className="mb-6 grid grid-cols-1 gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-xs text-slate-600 sm:grid-cols-2 lg:grid-cols-4">
        <p><span className="font-semibold text-slate-800">PAYE:</span> banded 10%–35%, relief KES 2,400/mo</p>
        <p><span className="font-semibold text-slate-800">NSSF:</span> 6% Tier I & II (max KES 4,320)</p>
        <p><span className="font-semibold text-slate-800">SHIF:</span> 2.75% of gross (min KES 300)</p>
        <p><span className="font-semibold text-slate-800">Housing Levy:</span> 1.5% of gross pay</p>
      </div>

      {!rows ? (
        <PageLoader label="Loading payroll runs…" />
      ) : rows.length === 0 ? (
        <EmptyState
          icon="🧮"
          title="No payroll runs yet"
          description="Generate your first payroll run to compute salaries with all Kenyan statutory deductions."
          action={<button onClick={() => setOpen(true)} className={btnPrimary}>+ Run payroll</button>}
        />
      ) : (
        <TableShell head={["Period", "Employees", "Gross", "Deductions", "Net Pay", "Status", ""]}>
          {rows.map((r) => (
            <tr key={r.id} className="hover:bg-slate-50">
              <td className="px-4 py-3">
                <Link href={`/dashboard/payroll/${r.id}`} className="font-medium text-blue-700 hover:underline">
                  {r.periodLabel}
                </Link>
              </td>
              <td className="px-4 py-3 text-slate-600">{r.employeeCount}</td>
              <td className="whitespace-nowrap px-4 py-3">{fmtKes(r.totalGross)}</td>
              <td className="whitespace-nowrap px-4 py-3 text-rose-600">−{fmtKes(r.totalDeductions)}</td>
              <td className="whitespace-nowrap px-4 py-3 font-semibold text-emerald-700">{fmtKes(r.totalNet)}</td>
              <td className="px-4 py-3"><Badge value={r.status} /></td>
              <td className="whitespace-nowrap px-4 py-3 text-right">
                <div className="flex justify-end gap-2">
                  {r.status === "draft" && (
                    <button onClick={() => setStatus(r, "approved")} className={btnGhost}>Approve</button>
                  )}
                  {r.status === "approved" && (
                    <button onClick={() => setStatus(r, "paid")} className={btnGhost}>Mark paid</button>
                  )}
                  <Link href={`/dashboard/payroll/${r.id}`} className={btnGhost}>Payslips</Link>
                  <button onClick={() => remove(r)} className={btnDanger}>Delete</button>
                </div>
              </td>
            </tr>
          ))}
        </TableShell>
      )}

      <Modal open={open} onClose={() => setOpen(false)} title="Run payroll">
        {error && <div className="mb-4 rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">{error}</div>}
        <p className="mb-4 text-sm text-slate-600">
          Payroll will be computed for all <span className="font-semibold">active employees</span> with PAYE, NSSF,
          SHIF and Affordable Housing Levy deducted automatically.
        </p>
        <Field label="Payroll period">
          <input type="month" className={inputCls} value={period} onChange={(e) => setPeriod(e.target.value)} />
        </Field>
        <div className="mt-6 flex justify-end gap-2">
          <button onClick={() => setOpen(false)} className={btnGhost}>Cancel</button>
          <button onClick={generate} disabled={saving} className={btnPrimary}>
            {saving && <Spinner className="h-4 w-4 text-white" />}
            {saving ? "Computing…" : "Generate payroll"}
          </button>
        </div>
      </Modal>
    </div>
  );
}