"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Modal from "@/components/Modal";
import { approveInvoicePayment } from "../actions";

export default function InvoiceApproveModal({
  invoiceId,
  invoiceNumber,
  agencyName,
  paymentMethod,
  receiptUrl,
}: {
  invoiceId: string;
  invoiceNumber: number;
  agencyName: string;
  paymentMethod: string | null;
  receiptUrl: string | null;
}) {
  const [open, setOpen] = useState(false);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const router = useRouter();

  async function onSubmit(formData: FormData) {
    setSaving(true);
    setError("");
    const res = await approveInvoicePayment(formData);
    setSaving(false);
    if (res && "error" in res && res.error) {
      setError(res.error);
      return;
    }
    setOpen(false);
    router.refresh();
  }

  return (
    <>
      <button className="btn-primary text-sm" onClick={() => setOpen(true)}>
        Aprobar pago
      </button>

      <Modal open={open} onClose={() => setOpen(false)} title="Aprobar pago de factura">
        <form action={onSubmit} className="space-y-4">
          <input type="hidden" name="id" value={invoiceId} />

          <p className="text-sm text-slate-600">
            Factura <b>#{invoiceNumber}</b> · {agencyName}
          </p>

          <div className="rounded-lg bg-slate-50 p-3 text-sm">
            <p>
              <span className="text-slate-500">Método reportado:</span>{" "}
              <b>{paymentMethod ?? "—"}</b>
            </p>
            {receiptUrl ? (
              <p className="mt-2">
                <a href={receiptUrl} target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">
                  Ver comprobante de la agencia →
                </a>
              </p>
            ) : null}
          </div>

          <p className="text-sm text-slate-500">
            Al aprobar, la factura quedará como pagada y la licencia de la agencia pasará a{" "}
            <b>Activa</b>.
          </p>

          {error ? (
            <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>
          ) : null}

          <div className="flex justify-end gap-2">
            <button type="button" className="btn-ghost" onClick={() => setOpen(false)}>
              Cancelar
            </button>
            <button type="submit" disabled={saving} className="btn-primary">
              {saving ? "Aprobando…" : "Confirmar aprobación"}
            </button>
          </div>
        </form>
      </Modal>
    </>
  );
}