import { Archive, ArchiveRestore, Trash2 } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getLookups, getWorkspace } from "@/lib/data";
import { money } from "@/lib/format";
import { ACCOUNT_TYPES } from "@/lib/types";
import { PageHeader } from "@/components/PageHeader";
import { ConfirmButton } from "@/components/ConfirmButton";
import { createWorkspace, deleteCategory, renameWorkspace, saveAccount, saveCategory, toggleArchiveAccount } from "../actions";

export default async function Cadastros({ params }: { params: Promise<{ ws: string }> }) {
  const { ws } = await params;
  const supabase = await createClient();
  const [workspace, lookups, balRes] = await Promise.all([
    getWorkspace(ws),
    getLookups(ws),
    supabase.from("account_balances").select("id,balance").eq("workspace_id", ws),
  ]);
  const bal = new Map((balRes.data ?? []).map((b) => [b.id as string, Number(b.balance)]));
  const Hidden = () => <input type="hidden" name="ws" value={ws} />;

  return (
    <>
      <PageHeader title="Contas e categorias" subtitle="Cadastros desta carteira" />

      <section className="mb-8">
        <h2 className="mb-3 font-semibold">Contas</h2>
        <div className="card overflow-x-auto p-0">
          <table className="table">
            <thead><tr><th>Nome</th><th>Tipo</th><th>Saldo inicial</th><th className="text-right!">Saldo atual</th><th /></tr></thead>
            <tbody>
              {lookups.accounts.map((a) => (
                <tr key={a.id} className={a.archived ? "opacity-50" : ""}>
                  <td colSpan={3}>
                    <form action={saveAccount} className="grid grid-cols-[1fr_auto_8rem_auto] gap-2">
                      <Hidden /><input type="hidden" name="id" value={a.id} />
                      <input className="input py-1" name="name" defaultValue={a.name} />
                      <select className="input py-1" name="type" defaultValue={a.type}>
                        {Object.entries(ACCOUNT_TYPES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                      </select>
                      <input className="input py-1 tabular" name="initial_balance" inputMode="decimal" defaultValue={a.initial_balance} />
                      <button className="btn btn-sm">Salvar</button>
                    </form>
                  </td>
                  <td className={`text-right font-medium tabular ${(bal.get(a.id) ?? 0) < 0 ? "text-expense" : ""}`}>{money(bal.get(a.id))}</td>
                  <td className="text-right">
                    <form action={toggleArchiveAccount}>
                      <Hidden /><input type="hidden" name="id" value={a.id} /><input type="hidden" name="archived" value={a.archived ? "1" : "0"} />
                      <button className="btn-ghost" title={a.archived ? "Reativar" : "Arquivar"}>{a.archived ? <ArchiveRestore size={14} /> : <Archive size={14} />}</button>
                    </form>
                  </td>
                </tr>
              ))}
              <tr className="bg-stone-50">
                <td colSpan={5}>
                  <form action={saveAccount} className="grid grid-cols-[1fr_auto_8rem_auto] gap-2">
                    <Hidden />
                    <input className="input py-1" name="name" placeholder="Nova conta (ex.: Nubank, Itaú PJ, Caixa)" required />
                    <select className="input py-1" name="type" defaultValue="corrente">
                      {Object.entries(ACCOUNT_TYPES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                    </select>
                    <input className="input py-1" name="initial_balance" inputMode="decimal" placeholder="Saldo inicial" />
                    <button className="btn-primary btn-sm">Adicionar</button>
                  </form>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="mb-8 grid gap-4 md:grid-cols-2">
        {(["despesa", "receita"] as const).map((type) => (
          <div key={type}>
            <h2 className="mb-3 font-semibold">Categorias de {type}</h2>
            <div className="card space-y-2">
              {lookups.categories.filter((c) => c.type === type).map((c) => (
                <div key={c.id} className="flex items-center gap-2">
                  <form action={saveCategory} className="flex flex-1 gap-2">
                    <Hidden /><input type="hidden" name="id" value={c.id} /><input type="hidden" name="type" value={type} />
                    <input type="color" name="color" defaultValue={c.color} className="h-8 w-8 shrink-0 cursor-pointer rounded border border-stone-300" />
                    <input className="input py-1" name="name" defaultValue={c.name} />
                    <button className="btn btn-sm">Salvar</button>
                  </form>
                  <form action={deleteCategory}>
                    <Hidden /><input type="hidden" name="id" value={c.id} />
                    <ConfirmButton message={`Excluir "${c.name}"? Os lançamentos ficam sem categoria.`} className="btn-ghost hover:text-red-600"><Trash2 size={14} /></ConfirmButton>
                  </form>
                </div>
              ))}
              <form action={saveCategory} className="flex gap-2 border-t border-stone-100 pt-3">
                <Hidden /><input type="hidden" name="type" value={type} />
                <input type="color" name="color" defaultValue={type === "receita" ? "#16a34a" : "#64748b"} className="h-8 w-8 shrink-0 cursor-pointer rounded border border-stone-300" />
                <input className="input py-1" name="name" placeholder="Nova categoria" required />
                <button className="btn-primary btn-sm">Adicionar</button>
              </form>
            </div>
          </div>
        ))}
      </section>

      <section className="grid gap-4 md:grid-cols-2">
        <form action={renameWorkspace} className="card space-y-3">
          <Hidden />
          <div className="font-semibold">Nome desta carteira</div>
          <div className="flex gap-2"><input className="input" name="name" defaultValue={workspace.name} /><button className="btn">Salvar</button></div>
        </form>
        <form id="nova-carteira" action={createWorkspace} className="card space-y-3">
          <div className="font-semibold">Nova carteira</div>
          <div className="flex gap-2">
            <input className="input" name="name" placeholder="Ex.: Outra empresa" required />
            <select className="input w-auto" name="kind"><option value="empresa">Empresa</option><option value="pessoal">Pessoal</option></select>
            <button className="btn-primary">Criar</button>
          </div>
          <p className="text-xs text-stone-500">Cada carteira tem contas, categorias, orçamento e membros próprios.</p>
        </form>
      </section>
    </>
  );
}