"use client";

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

interface Client {
  id: number;
  name: string;
  contactPerson: string;
  email: string;
  phone: string;
  kraPin: string;
  address: string;
}

const blank = { name: "", contactPerson: "", email: "", phone: "", kraPin: "", address: "" };

export default function ClientsPage() {
  const [rows, setRows] = useState<Client[] | null>(null);
  const [modal, setModal] = useState<null | { mode: "create" } | { mode: "edit"; row: Client }>(null);
  const [form, setForm] = useState(blank);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

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

  const openCreate = () => { setForm(blank); setError(""); setModal({ mode: "create" }); };
  const openEdit = (row: Client) => { setForm({ ...row }); setError(""); setModal({ mode: "edit", row }); };

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setError("");
    const editing = modal?.mode === "edit" ? modal.row : null;
    try {
      const res = await fetch(editing ? `/api/clients/${editing.id}` : "/api/clients", {
        method: editing ? "PUT" : "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");
      setRows((prev) => (editing ? (prev ?? []).map((r) => (r.id === editing.id ? data : r)) : [data, ...(prev ?? [])]));
      setModal(null);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const remove = async (row: Client) => {
    if (!confirm(`Delete ${row.name}? Their invoices will also be removed.`)) return;
    const prev = rows;
    setRows((r) => (r ?? []).filter((x) => x.id !== row.id));
    const res = await fetch(`/api/clients/${row.id}`, { method: "DELETE" });
    if (!res.ok) setRows(prev);
  };

  return (
    <div>
      <PageHeader
        title="Clients"
        subtitle="Companies and customers you invoice"
        action={<button onClick={openCreate} className={btnPrimary}>+ Add client</button>}
      />

      {!rows ? (
        <PageLoader label="Loading clients…" />
      ) : rows.length === 0 ? (
        <EmptyState
          icon="🏢"
          title="No clients yet"
          description="Add your first client to start creating invoices."
          action={<button onClick={openCreate} className={btnPrimary}>+ Add client</button>}
        />
      ) : (
        <TableShell head={["Client", "Contact", "Phone", "KRA PIN", "Address", ""]}>
          {rows.map((r) => (
            <tr key={r.id} className="hover:bg-slate-50">
              <td className="px-4 py-3">
                <p className="font-medium text-slate-900">{r.name}</p>
                <p className="text-xs text-slate-500">{r.email}</p>
              </td>
              <td className="whitespace-nowrap px-4 py-3 text-slate-600">{r.contactPerson}</td>
              <td className="whitespace-nowrap px-4 py-3 text-slate-600">{r.phone}</td>
              <td className="whitespace-nowrap px-4 py-3 font-mono text-xs text-slate-500">{r.kraPin}</td>
              <td className="max-w-[180px] truncate px-4 py-3 text-slate-500">{r.address}</td>
              <td className="whitespace-nowrap px-4 py-3 text-right">
                <div className="flex justify-end gap-2">
                  <button onClick={() => openEdit(r)} className={btnGhost}>Edit</button>
                  <button onClick={() => remove(r)} className={btnDanger}>Delete</button>
                </div>
              </td>
            </tr>
          ))}
        </TableShell>
      )}

      <Modal open={!!modal} onClose={() => setModal(null)} title={modal?.mode === "edit" ? "Edit client" : "Add client"}>
        <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="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="Company name *" className="sm:col-span-2">
              <input className={inputCls} required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            <Field label="Contact person"><input className={inputCls} value={form.contactPerson} onChange={(e) => setForm({ ...form, contactPerson: e.target.value })} /></Field>
            <Field label="Email"><input type="email" className={inputCls} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></Field>
            <Field label="Phone"><input className={inputCls} value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></Field>
            <Field label="KRA PIN"><input className={inputCls} value={form.kraPin} onChange={(e) => setForm({ ...form, kraPin: e.target.value })} /></Field>
            <Field label="Address" className="sm:col-span-2">
              <input className={inputCls} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
            </Field>
          </div>
          <div className="mt-6 flex justify-end gap-2">
            <button type="button" onClick={() => setModal(null)} className={btnGhost}>Cancel</button>
            <button type="submit" disabled={saving} className={btnPrimary}>
              {saving && <Spinner className="h-4 w-4 text-white" />}
              {saving ? "Saving…" : "Save client"}
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}