"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { addPayment } from "../../actions";

export default function AddPaymentForm({ assignmentId }: { assignmentId: string }) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const router = useRouter();

  async function onSubmit(formData: FormData) {
    setSaving(true);
    await addPayment(formData);
    setSaving(false);
    setOpen(false);
    router.refresh();
  }

  if (!open) {
    return (
      <button className="btn-ghost text-sm text-blue-600" onClick={() => setOpen(true)}>
        + Registrar abono
      </button>
    );
  }

  return (
    <form action={onSubmit} className="mt-2 grid grid-cols-1 gap-2 rounded-lg bg-slate-50 p-3 sm:grid-cols-12">
      <input type="hidden" name="assignmentId" value={assignmentId} />
      <input name="amount" type="number" step="0.01" min="0" required placeholder="Monto" className="input sm:col-span-3" />
      <input name="date" type="date" className="input sm:col-span-3" />
      <select name="method" className="input sm:col-span-2">
        <option value="Efectivo">Efectivo</option>
        <option value="Transferencia">Transferencia</option>
        <option value="Tarjeta">Tarjeta</option>
        <option value="Otro">Otro</option>
      </select>
      <input name="note" placeholder="Nota" className="input sm:col-span-2" />
      <div className="flex gap-1 sm:col-span-2">
        <button type="submit" disabled={saving} className="btn-primary text-sm">{saving ? "…" : "Guardar"}</button>
        <button type="button" className="btn-ghost text-sm" onClick={() => setOpen(false)}>✕</button>
      </div>
    </form>
  );
}