"use client";

import { useMemo, useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { EXTERNAL_EXPENSE_CATEGORIES, externalExpenseCategoryLabel, type ExternalExpenseCategory } from "@/lib/externalExpenses";

type ExpenseRow = {
  id: string;
  shopId: string | null;
  shopName: string;
  date: Date;
  category: string;
  description: string;
  amount: number;
  affectsProfit: boolean;
};

function money(value: number) {
  return `Rp${Math.round(value).toLocaleString("id-ID")}`;
}

function dateValue(date: Date) {
  return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Jakarta", year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
}

export default function ExternalExpenseManager({
  defaultDate,
  rows,
}: {
  defaultDate: string;
  rows: ExpenseRow[];
}) {
  const router = useRouter();
  const [date, setDate] = useState(defaultDate || dateValue(new Date()));
  const [category, setCategory] = useState<ExternalExpenseCategory>(EXTERNAL_EXPENSE_CATEGORIES[0].value);
  const [description, setDescription] = useState("");
  const [amount, setAmount] = useState("");
  const [affectsProfit, setAffectsProfit] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [notice, setNotice] = useState("");
  const categoryConfig = useMemo(() => EXTERNAL_EXPENSE_CATEGORIES.find((item) => item.value === category)!, [category]);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(true);
    setError("");
    setNotice("");
    try {
      const response = await fetch("/api/reports", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ shopId: null, date, category, description, amount, affectsProfit }),
      });
      const payload = await response.json().catch(() => null) as { ok?: boolean; error?: string } | null;
      if (!response.ok || !payload?.ok) throw new Error(payload?.error || "Pengeluaran gagal disimpan.");
      setDescription("");
      setAmount("");
      setNotice("Catatan pengeluaran tersimpan. Arus kas dan laba bersih sudah diperbarui.");
      router.refresh();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Pengeluaran gagal disimpan.");
    } finally {
      setBusy(false);
    }
  }

  async function remove(id: string) {
    if (!window.confirm("Hapus catatan pengeluaran ini? Angka arus kas dan laba akan dihitung ulang.")) return;
    setBusy(true);
    setError("");
    setNotice("");
    try {
      const response = await fetch("/api/reports", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });
      const payload = await response.json().catch(() => null) as { ok?: boolean; error?: string } | null;
      if (!response.ok || !payload?.ok) throw new Error(payload?.error || "Catatan pengeluaran gagal dihapus.");
      setNotice("Catatan dihapus dan angka laporan diperbarui.");
      router.refresh();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Catatan pengeluaran gagal dihapus.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <section className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
      <header className="border-b border-slate-200 bg-slate-50/80 px-5 py-4 dark:border-slate-800 dark:bg-slate-950/50">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div><h2 className="text-base font-bold text-slate-900 dark:text-white">Catat pengeluaran di luar Shopee</h2><p className="mt-1 max-w-3xl text-xs leading-5 text-slate-500">Catat biaya bersama untuk seluruh bisnis atau pilih toko bila pengeluaran memang khusus untuk satu toko. Pembelian stok/bahan masuk arus kas saja secara default supaya tidak dihitung dua kali dengan HPP barang terjual.</p></div>
          <span className="rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">{rows.length} catatan pada periode ini</span>
        </div>
      </header>

      <form onSubmit={submit} className="grid gap-3 p-5 sm:grid-cols-2 xl:grid-cols-5">
        <div className="flex items-center gap-2 rounded-xl border border-violet-200 bg-violet-50 px-3 py-2.5 text-xs font-bold text-violet-900 dark:border-violet-900 dark:bg-violet-950/30 dark:text-violet-200"><span aria-hidden="true">◎</span> Berlaku untuk seluruh bisnis</div>
        <label className="space-y-1.5 text-xs font-semibold text-slate-600 dark:text-slate-300"><span>Tanggal transaksi</span><input className="block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-100 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" type="date" required value={date} onChange={(event) => setDate(event.target.value)} disabled={busy} /></label>
        <label className="space-y-1.5 text-xs font-semibold text-slate-600 dark:text-slate-300 xl:col-span-1"><span>Kategori</span><select className="block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-100 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" value={category} onChange={(event) => { const next = event.target.value as ExternalExpenseCategory; setCategory(next); setAffectsProfit(EXTERNAL_EXPENSE_CATEGORIES.find((item) => item.value === next)?.defaultAffectsProfit ?? true); }} disabled={busy}>{EXTERNAL_EXPENSE_CATEGORIES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></label>
        <label className="space-y-1.5 text-xs font-semibold text-slate-600 dark:text-slate-300 xl:col-span-2"><span>Keterangan</span><input className="block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-100 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" maxLength={200} placeholder="Contoh: pembelian kardus / gaji harian" required value={description} onChange={(event) => setDescription(event.target.value)} disabled={busy} /></label>
        <label className="space-y-1.5 text-xs font-semibold text-slate-600 dark:text-slate-300"><span>Nominal (Rp)</span><input className="block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-right text-sm tabular-nums text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-100 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" type="number" min="1" max="1000000000000" step="1" inputMode="numeric" placeholder="0" required value={amount} onChange={(event) => setAmount(event.target.value)} disabled={busy} /></label>
        <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3 sm:col-span-2 xl:col-span-5 dark:border-slate-800">
          <label className="flex max-w-3xl items-start gap-2 text-xs leading-5 text-slate-600 dark:text-slate-300"><input className="mt-1 accent-emerald-600" type="checkbox" checked={affectsProfit} onChange={(event) => setAffectsProfit(event.target.checked)} disabled={busy} /><span><b className="text-slate-800 dark:text-slate-100">Kurangi dari laba bersih</b><br />{categoryConfig.defaultAffectsProfit ? "Aktif untuk biaya operasional. Matikan bila hanya ingin mencatat arus kas." : "Nonaktif untuk pembelian stok/bahan. Aktifkan hanya jika biaya ini belum terwakili oleh HPP barang terjual."}</span></label>
          <button className="ui-button ui-button-primary min-w-40" type="submit" disabled={busy}>{busy ? "Menyimpan…" : "Simpan pengeluaran"}</button>
        </div>
        <p className="text-[11px] leading-5 text-slate-500 sm:col-span-2 xl:col-span-5">Iklan Shopee tidak dicatat di sini—top up dan autodebet sudah diambil dari data Saldo Penjual. Biaya bersama dicatat satu kali untuk seluruh bisnis, bukan digandakan ke tiap toko.</p>
        {error ? <div role="alert" className="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold text-rose-800 sm:col-span-2 xl:col-span-5">{error}</div> : null}
        {notice ? <div role="status" className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 sm:col-span-2 xl:col-span-5">{notice}</div> : null}
      </form>

      <div className="border-t border-slate-200 dark:border-slate-800">
        <div className="flex flex-wrap items-center justify-between gap-2 px-5 py-3"><h3 className="text-sm font-bold text-slate-800 dark:text-slate-100">Riwayat pengeluaran eksternal</h3><div className="text-xs text-slate-500">Kas keluar {money(rows.reduce((sum, row) => sum + row.amount, 0))} · Mengurangi laba {money(rows.filter((row) => row.affectsProfit).reduce((sum, row) => sum + row.amount, 0))}</div></div>
        {rows.length ? <div className="overflow-x-auto"><table className="report-table min-w-[800px]"><thead><tr><th>Tanggal</th><th>Alokasi & kategori</th><th>Keterangan</th><th>Dampak laba</th><th className="text-right">Kas keluar</th><th><span className="sr-only">Aksi</span></th></tr></thead><tbody>{rows.map((row) => <tr key={row.id}><td className="whitespace-nowrap">{new Intl.DateTimeFormat("id-ID", { timeZone: "Asia/Jakarta", day: "numeric", month: "short", year: "numeric" }).format(new Date(row.date))}</td><td><div className="font-semibold">{row.shopName}</div><div className="mt-1 text-xs text-slate-500">{externalExpenseCategoryLabel(row.category)}</div></td><td className="max-w-[320px] whitespace-normal">{row.description}</td><td><span className={`rounded-full px-2 py-1 text-[10px] font-bold ${row.affectsProfit ? "bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`}>{row.affectsProfit ? "Kurangi laba" : "Arus kas saja"}</span></td><td className="text-right font-bold tabular-nums text-rose-700">-{money(row.amount)}</td><td className="text-right"><button type="button" className="rounded-lg px-2.5 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-50 disabled:opacity-50 dark:text-rose-300 dark:hover:bg-rose-950/40" onClick={() => void remove(row.id)} disabled={busy}>Hapus</button></td></tr>)}</tbody></table></div> : <div className="px-5 pb-5"><div className="rounded-xl border border-dashed border-slate-300 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">Belum ada pengeluaran eksternal pada periode ini.</div></div>}
      </div>
    </section>
  );
}