"use client";

import { useEffect, useState } from "react";
import { Banknote, Plus, Trash2 } from "lucide-react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import RoleGate from "@/components/auth/RoleGate";
import { listCuentas } from "@/lib/pb/cuentas";
import { createPago, deletePago, unlinkPagoFromPedido, todayIsoDate } from "@/lib/pb/pagos";
import type { Cuenta, Pago } from "@/lib/types/pago";
import { money } from "@/lib/format";

interface Props {
  clienteId: string;
  presupuestoId?: string;
  pedidoId?: string;
  pagos: Pago[];
  onChanged: () => Promise<void> | void;
  onPaymentCreated?: () => Promise<void> | void;
}

export default function PaymentsPanel({ clienteId, presupuestoId, pedidoId, pagos, onChanged, onPaymentCreated }: Props) {
  const [cuentas, setCuentas] = useState<Cuenta[]>([]);
  const [monto, setMonto] = useState("");
  const [cuenta, setCuenta] = useState("");
  const [fecha, setFecha] = useState(todayIsoDate());
  const [nota, setNota] = useState("Seña");
  const [saving, setSaving] = useState(false);
  const [confirmDel, setConfirmDel] = useState<Pago | null>(null);
  const [delBusy, setDelBusy] = useState(false);
  const total = pagos.reduce((sum, pago) => sum + (pago.monto || 0), 0);

  useEffect(() => {
    (async () => {
      const list = await listCuentas();
      setCuentas(list);
      setCuenta((current) => current || list[0]?.id || "");
    })();
  }, []);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!clienteId || !cuenta || !Number(monto)) return;
    setSaving(true);
    try {
      await createPago({
        monto: Number(monto),
        cuenta,
        fecha,
        cliente: clienteId,
        presupuesto: presupuestoId,
        pedido: pedidoId,
        nota,
      });
      setMonto("");
      await onPaymentCreated?.();
      await onChanged();
    } finally {
      setSaving(false);
    }
  }

  async function doDeleteBoth(pago: Pago) {
    setDelBusy(true);
    try {
      await deletePago(pago.id);
      await onChanged();
      setConfirmDel(null);
    } finally {
      setDelBusy(false);
    }
  }

  async function doUnlinkFromPedido(pago: Pago) {
    if (!pedidoId) return;
    setDelBusy(true);
    try {
      await unlinkPagoFromPedido(pago.id, pedidoId);
      await onChanged();
      setConfirmDel(null);
    } finally {
      setDelBusy(false);
    }
  }

  return (
    <section className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h2 className="flex items-center gap-2 font-bold text-ink">
            <Banknote size={16} /> Pagos
          </h2>
          <p className="text-xs text-faint">Impactan Caja automaticamente. Admin-only.</p>
        </div>
        <span className="rounded-xl bg-canvas px-3 py-1.5 text-sm font-bold text-ink">
          Pagado: {money(total)}
        </span>
      </div>

      <div className="space-y-2">
        {pagos.length === 0 ? (
          <p className="rounded-xl border border-dashed border-line bg-canvas px-3 py-4 text-center text-sm text-faint">
            Sin pagos cargados.
          </p>
        ) : (
          pagos.map((pago) => (
            <div key={pago.id} className="flex flex-wrap items-center gap-2 rounded-xl border border-line bg-surface px-3 py-2">
              <span className="font-bold text-brand">{money(pago.monto)}</span>
              <span className="rounded-full bg-canvas px-2 py-0.5 text-xs text-ink-soft">
                {pago.expand?.cuenta?.nombre || pago.cuenta}
              </span>
              <span className="text-xs text-faint">{(pago.fecha || "").slice(0, 10)}</span>
              {pago.nota && <span className="min-w-0 flex-1 truncate text-sm text-ink-soft">{pago.nota}</span>}
              <RoleGate role="admin">
                <button
                  type="button"
                  onClick={() => setConfirmDel(pago)}
                  className="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg text-faint hover:bg-red-50 hover:text-bad"
                  title="Borrar pago"
                >
                  <Trash2 size={14} />
                </button>
              </RoleGate>
            </div>
          ))
        )}
      </div>

      <RoleGate role="admin">
        <form onSubmit={submit} className="grid grid-cols-1 gap-2 rounded-xl border border-line bg-canvas p-3 md:grid-cols-[1fr_1fr_1fr_1.2fr_auto]">
          <Input label="Monto" type="number" inputMode="decimal" min="1" value={monto} onChange={(e) => setMonto(e.target.value)} />
          <label className="flex flex-col gap-1.5">
            <span className="text-sm font-medium text-ink-soft">Cuenta</span>
            <select
              value={cuenta}
              onChange={(e) => setCuenta(e.target.value)}
              className="h-11 rounded-xl border border-line bg-surface px-3 text-sm outline-none focus:border-brand"
            >
              {cuentas.map((c) => (
                <option key={c.id} value={c.id}>{c.nombre}</option>
              ))}
            </select>
          </label>
          <Input label="Fecha" type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
          <Input label="Nota" value={nota} onChange={(e) => setNota(e.target.value)} />
          <Button type="submit" loading={saving} className="self-end">
            <Plus size={16} /> Pago
          </Button>
        </form>
      </RoleGate>

      {confirmDel && (
        <div
          className="fixed inset-0 z-50 grid place-items-center bg-black/40 p-4"
          onClick={() => { if (!delBusy) setConfirmDel(null); }}
        >
          <div
            className="w-full max-w-md rounded-2xl border border-line bg-surface p-5 shadow-[var(--shadow-lg)]"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="font-extrabold text-ink">Borrar pago de {money(confirmDel.monto)}</h3>
            <p className="mt-1 text-sm text-ink-soft">
              {pedidoId
                ? "Elegí qué hacer con este pago:"
                : "Se borra el pago y su movimiento de Caja asociado."}
            </p>
            <div className="mt-4 flex flex-col gap-2">
              {pedidoId && (
                <Button type="button" variant="secondary" fullWidth loading={delBusy} onClick={() => doUnlinkFromPedido(confirmDel)}>
                  Solo desvincular del pedido (queda en Caja)
                </Button>
              )}
              <Button type="button" variant="danger" fullWidth loading={delBusy} onClick={() => doDeleteBoth(confirmDel)}>
                Borrar del pedido y de la Caja
              </Button>
              <Button type="button" variant="ghost" fullWidth disabled={delBusy} onClick={() => setConfirmDel(null)}>
                Cancelar
              </Button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}