"use client";
import { useState } from "react";
/** Signalement d'une annonce agrégée (doublon, déjà vendue, droits photos…) — sans compte, limité par IP. */
export function ReportButton({ uid }: { uid: string }) {
  const [open, setOpen] = useState(false); const [reason, setReason] = useState("deja_vendu_loue"); const [details, setDetails] = useState(""); const [done, setDone] = useState<string | null>(null);
  const send = async () => { const r = await fetch("/api/reports", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ targetType: "AGGREGATED_LISTING", targetId: uid, reason, details: details || undefined }) }); setDone(r.ok ? "Merci, signalement transmis." : "Impossible pour l'instant."); setOpen(false); };
  return (
    <div className="text-xs">
      {!open ? <button type="button" onClick={() => setOpen(true)} className="underline text-ink-3">Signaler un problème avec cette annonce</button> : (
        <div className="tv-card p-3 space-y-2 mt-1"><select value={reason} onChange={(e) => setReason(e.target.value)} className="tv-chip w-full appearance-none"><option value="deja_vendu_loue">Déjà vendue / louée</option><option value="doublon">Doublon</option><option value="informations_fausses">Informations erronées</option><option value="arnaque">Arnaque présumée</option><option value="droits_photos">Retrait demandé (droits / propriétaire)</option><option value="autre">Autre</option></select><textarea value={details} onChange={(e) => setDetails(e.target.value)} rows={2} maxLength={1000} placeholder="Précisions" className="w-full border border-line rounded-sm p-2" /><div className="flex gap-2"><button type="button" onClick={send} className="tv-btn tv-btn-ghost !py-1">Envoyer</button><button type="button" onClick={() => setOpen(false)} className="underline text-ink-3">Annuler</button></div></div>)}
      {done && <p className="text-ink-2 mt-1">{done}</p>}
    </div>
  );
}