"use client";
import { useState } from "react";
export function ReportForm({ slug }: { slug: string }) {
  const [state, setState] = useState<"idle" | "sending" | "done" | "error">("idle"); const [msg, setMsg] = useState("");
  return (
    <form className="card max-w-xl p-4" onSubmit={async (e) => { e.preventDefault(); setState("sending"); const fd = new FormData(e.currentTarget);
      const r = await fetch("/api/report", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ slug, message: fd.get("message"), contact: fd.get("contact"), website: fd.get("website") }) });
      setState(r.ok ? "done" : "error"); if (!r.ok) setMsg((await r.json().catch(() => ({}))).error ?? "Could not send"); }}>
      <p className="text-sm text-fg-2">Broken link, outdated license, wrong category, or a tool that no longer exists? Tell us; reports are reviewed by the editor.</p>
      <label className="label mt-3" htmlFor={`msg-${slug}`}>What is wrong?</label>
      <textarea id={`msg-${slug}`} name="message" required minLength={10} maxLength={2000} rows={3} className="input" placeholder="The pricing model changed to… / The docs link now redirects to…" />
      <label className="label mt-3" htmlFor={`contact-${slug}`}>Contact (optional)</label>
      <input id={`contact-${slug}`} name="contact" type="email" maxLength={200} className="input" placeholder="you@example.org" autoComplete="email" />
      <input type="text" name="website" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden />
      <div className="mt-3 flex items-center gap-3"><button className="btn-primary" disabled={state === "sending" || state === "done"}>{state === "done" ? "Thank you" : state === "sending" ? "Sending…" : "Send report"}</button>{state === "error" && <span className="text-sm text-bad" role="alert">{msg}</span>}{state === "done" && <span className="text-sm text-ok" role="status">Report received.</span>}</div>
    </form>
  );
}