"use client";

/**
 * ReportCommentModal — compact category + reason form for reporting a comment.
 * Controlled by the parent via `comment` (null = closed). Submits through the
 * comments API and toasts the outcome.
 */

import { useEffect, useState } from "react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import {
  comments as commentsApi,
  SocialError,
  type Comment,
  type PostReportCategory,
} from "@/lib/social";

const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
  { value: "spam", label: "Spam or misleading" },
  { value: "harassment", label: "Harassment or bullying" },
  { value: "misinformation", label: "Misinformation" },
  { value: "inappropriate", label: "Inappropriate content" },
  { value: "other", label: "Something else" },
];

export function ReportCommentModal({
  comment,
  onClose,
}: {
  comment: Comment | null;
  onClose: () => void;
}) {
  const [category, setCategory] = useState<PostReportCategory>("spam");
  const [reason, setReason] = useState("");
  const [working, setWorking] = useState(false);

  useEffect(() => {
    if (comment) {
      setCategory("spam");
      setReason("");
      setWorking(false);
    }
  }, [comment]);

  if (!comment) return null;

  async function submit() {
    if (!comment) return;
    setWorking(true);
    try {
      await commentsApi.report(comment.id, category, reason.trim());
      toast("Thanks — your report was submitted", { duration: 2500 });
      onClose();
    } catch (err) {
      toast.error(
        err instanceof SocialError ? err.message : "Could not submit report",
        { duration: 3000 },
      );
    } finally {
      setWorking(false);
    }
  }

  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
      <div
        className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
        onClick={() => !working && onClose()}
        aria-hidden
      />
      <div
        role="dialog"
        aria-modal="true"
        className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
      >
        <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
          Report comment
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          Reports are private and reviewed by our team.
        </p>
        <div className="mt-4 space-y-1.5">
          {REPORT_CATEGORIES.map((c) => (
            <label
              key={c.value}
              className={cn(
                "flex items-center gap-3 rounded-md border px-3 py-2 cursor-pointer transition-colors",
                category === c.value
                  ? "border-primary bg-primary/5"
                  : "border-border hover:bg-muted",
              )}
            >
              <input
                type="radio"
                name="comment-report-category"
                value={c.value}
                checked={category === c.value}
                onChange={() => setCategory(c.value)}
                className="accent-primary"
              />
              <span className="text-sm text-foreground">{c.label}</span>
            </label>
          ))}
        </div>
        <textarea
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          rows={2}
          maxLength={2000}
          placeholder="Add details (optional)"
          className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
        />
        <div className="mt-4 flex items-center justify-end gap-2">
          <button
            type="button"
            onClick={onClose}
            disabled={working}
            className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={submit}
            disabled={working}
            className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
          >
            {working ? "Submitting…" : "Submit report"}
          </button>
        </div>
      </div>
    </div>
  );
}