"use client";

import { useActionState } from "react";
import { submitProof } from "@/app/(store)/actions";

export default function ProofForm({ token, method, suggested }: { token: string; method: "BKASH" | "NAGAD" | "BANK"; suggested: number }) {
  const [state, action, pending] = useActionState(submitProof, null);
  const e = (k: string) => state?.errors?.[k];
  return (
    <form action={action} className="grid sm:grid-cols-2 gap-4">
      <input type="hidden" name="token" value={token} /><input type="hidden" name="method" value={method} />
      <div><label htmlFor="amount" className="label">Amount sent (৳)</label><input id="amount" name="amount" type="number" inputMode="numeric" min={1} defaultValue={suggested} required className="field" />{e("amount") && <p className="text-rose text-[13px] mt-1">{e("amount")}</p>}</div>
      <div><label htmlFor="reference" className="label">Transaction ID</label><input id="reference" name="reference" required className="field" autoComplete="off" />{e("reference") && <p className="text-rose text-[13px] mt-1">{e("reference")}</p>}</div>
      <div className="sm:col-span-2"><label htmlFor="senderNumber" className="label">{method === "BANK" ? "Account name or number you paid from" : "Number you paid from"}</label><input id="senderNumber" name="senderNumber" required className="field" />{e("senderNumber") && <p className="text-rose text-[13px] mt-1">{e("senderNumber")}</p>}</div>
      <div className="sm:col-span-2">
        <button className="btn-solid" disabled={pending}>{pending ? "Submitting…" : "Submit payment details"}</button>
        {state?.message && <p role="status" className={`mt-3 text-[14px] ${state.ok ? "" : "text-rose"}`}>{state.message}</p>}
        <p className="text-[13px] text-stone mt-2">Your payment stays “awaiting verification” until our team checks it.</p>
      </div>
    </form>
  );
}