import Link from "next/link";
import { saveTransaction } from "@/app/w/[ws]/actions";
import { today } from "@/lib/format";
import type { Account, Category, Transaction } from "@/lib/types";

export function TransactionForm({
  ws, accounts, categories, tx, back, defaultStatus = "pago", cancelHref,
}: {
  ws: string;
  accounts: Account[];
  categories: Category[];
  tx?: Transaction | null;
  back: string;
  defaultStatus?: "pago" | "pendente";
  cancelHref: string;
}) {
  const editing = !!tx;
  const status = tx ? (tx.paid_at ? "pago" : "pendente") : defaultStatus;
  const activeAccounts = accounts.filter((a) => !a.archived || a.id === tx?.account_id);

  return (
    <form action={saveTransaction} className="card mb-6 space-y-4">
      <input type="hidden" name="ws" value={ws} />
      <input type="hidden" name="back" value={back} />
      {tx && <input type="hidden" name="id" value={tx.id} />}

      <div className="flex items-center justify-between">
        <h2 className="font-semibold">{editing ? "Editar lançamento" : "Novo lançamento"}</h2>
        <div className="inline-flex rounded-lg border border-stone-200 p-0.5 text-sm">
          {(["despesa", "receita"] as const).map((t) => (
            <label key={t} className="cursor-pointer">
              <input type="radio" name="type" value={t} defaultChecked={(tx?.type ?? "despesa") === t} className="peer sr-only" />
              <span className={`block rounded-md px-3 py-1 capitalize peer-checked:text-white ${t === "receita" ? "peer-checked:bg-income" : "peer-checked:bg-expense"}`}>
                {t}
              </span>
            </label>
          ))}
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div className="sm:col-span-2">
          <label className="label">Descrição</label>
          <input className="input" name="description" required defaultValue={tx?.description} placeholder="Ex.: Aluguel, Fee cliente X" />
        </div>
        <div>
          <label className="label">Valor (R$)</label>
          <input className="input tabular" name="amount" required inputMode="decimal" defaultValue={tx?.amount} placeholder="0,00" />
        </div>
        <div>
          <label className="label">{status === "pendente" ? "Vencimento" : "Data"}</label>
          <input className="input" type="date" name="date" required defaultValue={tx?.date ?? today()} />
        </div>

        <div>
          <label className="label">Categoria</label>
          <select className="input" name="category_id" defaultValue={tx?.category_id ?? ""}>
            <option value="">— sem categoria —</option>
            <optgroup label="Despesas">
              {categories.filter((c) => c.type === "despesa").map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </optgroup>
            <optgroup label="Receitas">
              {categories.filter((c) => c.type === "receita").map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </optgroup>
          </select>
        </div>
        <div>
          <label className="label">Conta</label>
          <select className="input" name="account_id" defaultValue={tx?.account_id ?? activeAccounts[0]?.id ?? ""}>
            <option value="">— sem conta —</option>
            {activeAccounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
          </select>
        </div>
        <div>
          <label className="label">Status</label>
          <select className="input" name="status" defaultValue={status}>
            <option value="pago">Pago / recebido</option>
            <option value="pendente">Pendente (a pagar/receber)</option>
          </select>
        </div>
        <div>
          <label className="label">Cliente / fornecedor</label>
          <input className="input" name="counterparty" defaultValue={tx?.counterparty ?? ""} />
        </div>

        {!editing && (
          <>
            <div>
              <label className="label">Repetir</label>
              <select className="input" name="repeat" defaultValue="nao">
                <option value="nao">Não repetir</option>
                <option value="mensal">Mensal (mesmo valor)</option>
                <option value="parcelas">Parcelado (divide o valor)</option>
              </select>
            </div>
            <div>
              <label className="label">Nº de meses / parcelas</label>
              <input className="input" name="times" type="number" min={1} max={120} defaultValue={12} />
            </div>
          </>
        )}
        <div className={editing ? "sm:col-span-2 lg:col-span-4" : "sm:col-span-2"}>
          <label className="label">Observações</label>
          <input className="input" name="notes" defaultValue={tx?.notes ?? ""} />
        </div>
      </div>

      <div className="flex justify-end gap-2">
        <Link href={cancelHref} className="btn">Cancelar</Link>
        <button className="btn-primary">{editing ? "Salvar" : "Adicionar"}</button>
      </div>
      {!editing && (
        <p className="text-xs text-stone-500">
          Em lançamentos repetidos, só o primeiro entra como pago; os demais ficam pendentes em <i>Pagar e receber</i>.
        </p>
      )}
    </form>
  );
}