Epicure/apps/web/components/social/report-button.tsx

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Flag } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

export function ReportButton({
  targetType,
  targetId,
  variant = "icon",
}: {
  targetType: "recipe" | "comment" | "user";
  targetId: string;
  variant?: "icon" | "text";
}) {
  const [open, setOpen] = useState(false);
  const [reason, setReason] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  async function handleSubmit() {
    if (!reason.trim()) return;
    setSubmitting(true);
    try {
      const res = await fetch("/api/v1/reports", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ targetType, targetId, reason: reason.trim() }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({})) as { error?: string };
        toast.error(err.error ?? "Failed to submit report");
        return;
      }
      setSubmitted(true);
      toast.success("Report submitted — thanks for flagging this");
      setTimeout(() => setOpen(false), 800);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      {variant === "icon" ? (
        <button
          onClick={() => setOpen(true)}
          className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
        >
          <Flag className="h-3 w-3" /> Report
        </button>
      ) : (
        <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label="Report">
          <Flag className="h-4 w-4" />
        </Button>
      )}
      <Dialog open={open} onOpenChange={(next) => { setOpen(next); if (!next) { setReason(""); setSubmitted(false); } }}>
        <DialogContent className="max-w-md">
          <DialogHeader><DialogTitle>Report {targetType}</DialogTitle></DialogHeader>
          {submitted ? (
            <p className="text-sm text-muted-foreground py-4">Thanks — an admin will review this.</p>
          ) : (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="report-reason">What&apos;s wrong with this?</Label>
                <Textarea
                  id="report-reason"
                  value={reason}
                  onChange={(e) => setReason(e.target.value)}
                  placeholder="Spam, harassment, off-topic…"
                  rows={3}
                />
              </div>
              <Button
                className="w-full"
                onClick={() => { void handleSubmit(); }}
                disabled={!reason.trim() || submitting}
              >
                {submitting ? "Submitting…" : "Submit report"}
              </Button>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}