"use client";

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

const METHODS = [
  { value: "EFECTIVO", label: "Efectivo" },
  { value: "TRANSFERENCIA", label: "Transferencia" },
  { value: "TARJETA", label: "Tarjeta" },
  { value: "REGALO", label: "Regalo" },
] as const;

export default function InvoiceSubmitModal({
  invoiceId,
  invoiceNumber,
  amountMxn,
}: {
  invoiceId: string;
  invoiceNumber: number;
  amountMxn: number;
}) {
  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 submitInvoicePayment(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)}>
        Pagar factura
      </button>

      <Modal open={open} onClose={() => setOpen(false)} title="Enviar 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> ·{" "}
            {new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(amountMxn)}
          </p>

          <div>
            <label className="label">Forma de pago *</label>
            <div className="grid grid-cols-2 gap-2">
              {METHODS.map((m) => (
                <label
                  key={m.value}
                  className="flex cursor-pointer items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
                >
                  <input type="radio" name="paymentMethod" value={m.value} required />
                  {m.label}
                </label>
              ))}
            </div>
          </div>

          <FileUpload name="receiptUrl" label="Comprobante de pago *" accept="image/*,.pdf" />

          <p className="text-xs text-slate-500">
            Tu pago quedará en revisión. El administrador lo confirmará y tu licencia se activará.
          </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 ? "Enviando…" : "Enviar pago"}
            </button>
          </div>
        </form>
      </Modal>
    </>
  );
}