"use client";

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

interface Leave {
  id: number;
  employeeId: number;
  employeeName: string;
  leaveType: string;
  startDate: string;
  endDate: string;
  days: number;
  reason: string;
  status: string;
}

interface EmployeeOpt { id: number; fullName: string }

export default function LeavePage() {
  const [rows, setRows] = useState<Leave[] | null>(null);
  const [employees, setEmployees] = useState<EmployeeOpt[]>([]);
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [form, setForm] = useState({ employeeId: "", leaveType: "Annual", startDate: "", endDate: "", days: 1, reason: "" });

  useEffect(() => {
    fetch("/api/leave").then((r) => r.json()).then(setRows);
    fetch("/api/employees").then((r) => r.json()).then((d) => setEmployees(d.map((e: { id: number; fullName: string }) => ({ id: e.id, fullName: e.fullName }))));
  }, []);

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setError("");
    try {
      const res = await fetch("/api/leave", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to save");
      const emp = employees.find((x) => x.id === Number(form.employeeId));
      setRows((prev) => [{ ...data, employeeName: emp?.fullName ?? "—" }, ...(prev ?? [])]);
      setOpen(false);
      setForm({ employeeId: "", leaveType: "Annual", startDate: "", endDate: "", days: 1, reason: "" });
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

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

  const remove = async (row: Leave) => {
    if (!confirm("Delete this leave request?")) return;
    const prev = rows;
    setRows((r) => (r ?? []).filter((x) => x.id !== row.id));
    const res = await fetch(`/api/leave/${row.id}`, { method: "DELETE" });
    if (!res.ok) setRows(prev);
  };

  return (
    <div>
      <PageHeader
        title="Leave Management"
        subtitle="Track and approve employee leave requests"
        action={<button onClick={() => { setError(""); setOpen(true); }} className={btnPrimary}>+ New request</button>}
      />

      {!rows ? (
        <PageLoader label="Loading leave requests…" />
      ) : rows.length === 0 ? (
        <EmptyState
          icon="🌴"
          title="No leave requests"
          description="Record employee leave requests and manage approvals here."
          action={<button onClick={() => setOpen(true)} className={btnPrimary}>+ New request</button>}
        />
      ) : (
        <TableShell head={["Employee", "Type", "Dates", "Days", "Reason", "Status", ""]}>
          {rows.map((r) => (
            <tr key={r.id} className="hover:bg-slate-50">
              <td className="whitespace-nowrap px-4 py-3 font-medium text-slate-900">{r.employeeName}</td>
              <td className="px-4 py-3 text-slate-600">{r.leaveType}</td>
              <td className="whitespace-nowrap px-4 py-3 text-slate-600">{r.startDate} → {r.endDate}</td>
              <td className="px-4 py-3 text-slate-600">{r.days}</td>
              <td className="max-w-[200px] truncate px-4 py-3 text-slate-500">{r.reason}</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 === "pending" && (
                    <>
                      <button onClick={() => setStatus(r, "approved")} className={btnGhost}>Approve</button>
                      <button onClick={() => setStatus(r, "rejected")} className={btnDanger}>Reject</button>
                    </>
                  )}
                  <button onClick={() => remove(r)} className={btnDanger}>Delete</button>
                </div>
              </td>
            </tr>
          ))}
        </TableShell>
      )}

      <Modal open={open} onClose={() => setOpen(false)} title="New leave request">
        <form onSubmit={submit}>
          {error && <div className="mb-4 rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">{error}</div>}
          <div className="space-y-4">
            <Field label="Employee *">
              <select className={inputCls} required value={form.employeeId} onChange={(e) => setForm({ ...form, employeeId: e.target.value })}>
                <option value="">Select employee…</option>
                {employees.map((e) => <option key={e.id} value={e.id}>{e.fullName}</option>)}
              </select>
            </Field>
            <Field label="Leave type">
              <select className={inputCls} value={form.leaveType} onChange={(e) => setForm({ ...form, leaveType: e.target.value })}>
                {["Annual", "Sick", "Maternity", "Paternity", "Compassionate", "Study", "Unpaid"].map((t) => <option key={t}>{t}</option>)}
              </select>
            </Field>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <Field label="Start date *"><input type="date" className={inputCls} required value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} /></Field>
              <Field label="End date *"><input type="date" className={inputCls} required value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} /></Field>
              <Field label="Working days"><input type="number" min={1} className={inputCls} value={form.days} onChange={(e) => setForm({ ...form, days: Number(e.target.value) })} /></Field>
            </div>
            <Field label="Reason">
              <textarea className={inputCls} rows={2} value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })} />
            </Field>
          </div>
          <div className="mt-6 flex justify-end gap-2">
            <button type="button" onClick={() => setOpen(false)} className={btnGhost}>Cancel</button>
            <button type="submit" disabled={saving} className={btnPrimary}>
              {saving && <Spinner className="h-4 w-4 text-white" />}
              {saving ? "Saving…" : "Submit request"}
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}