spsays-training/components/social/report-dialog.tsx

"use client";

/**
 * ReportDialog — a responsive report form (dialog on desktop, bottom
 * drawer on mobile). Collects a category (radio list) + an optional
 * free-text reason and hands them to `onSubmit`. Generic over the option
 * set so it works for posts, users, etc.
 *
 * `onSubmit` may throw to keep the dialog open with an inline error.
 */

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { Loader2, X } from "lucide-react";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type ReportOption = { value: string; label: string };

export function ReportDialog({
  open,
  onClose,
  title,
  description = "Reports are private and reviewed by our team.",
  options,
  onSubmit,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  description?: string;
  options: ReportOption[];
  onSubmit: (category: string, reason: string) => Promise<void>;
}) {
  const isMobile = useMediaQuery("(max-width: 767px)");
  const [category, setCategory] = useState(options[0]?.value ?? "");
  const [reason, setReason] = useState("");
  const [working, setWorking] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Reset transient state each time the dialog opens.
  useEffect(() => {
    if (open) {
      setCategory(options[0]?.value ?? "");
      setReason("");
      setWorking(false);
      setError(null);
    }
  }, [open, options]);

  // Desktop: Escape + scroll lock (the drawer handles its own).
  useEffect(() => {
    if (!open || isMobile) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape" && !working) onClose();
    }
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open, isMobile, working, onClose]);

  async function submit() {
    setWorking(true);
    setError(null);
    try {
      await onSubmit(category, reason.trim());
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong.");
    } finally {
      setWorking(false);
    }
  }

  if (!open) return null;

  const formBody = (
    <div className="space-y-4">
      <div className="space-y-1.5">
        {options.map((o) => (
          <label
            key={o.value}
            className={cn(
              "flex items-center gap-3 rounded-md border px-3 py-2.5 cursor-pointer transition-colors",
              category === o.value
                ? "border-primary bg-primary/5"
                : "border-border hover:bg-muted",
            )}
          >
            <input
              type="radio"
              name="report-category"
              value={o.value}
              checked={category === o.value}
              onChange={() => setCategory(o.value)}
              className="accent-primary"
            />
            <span className="text-sm text-foreground">{o.label}</span>
          </label>
        ))}
      </div>
      <div className="space-y-1.5">
        <label
          htmlFor="report-reason"
          className="block text-sm font-medium text-foreground"
        >
          Details <span className="text-muted-foreground font-normal">(optional)</span>
        </label>
        <textarea
          id="report-reason"
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          rows={3}
          maxLength={2000}
          placeholder="Add any context that will help us review this"
          className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
        />
      </div>
      {error ? <p className="text-sm text-destructive">{error}</p> : null}
      <div className="flex items-center justify-end gap-2 pt-1">
        <Button variant="ghost" onClick={onClose} disabled={working}>
          Cancel
        </Button>
        <Button variant="destructive" onClick={submit} disabled={working}>
          {working ? <Loader2 className="size-4 animate-spin" /> : null}
          Submit report
        </Button>
      </div>
    </div>
  );

  if (isMobile) {
    return (
      <Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}>
        <DrawerContent className="bg-card">
          <DrawerHeader className="text-left">
            <DrawerTitle>{title}</DrawerTitle>
            <DrawerDescription>{description}</DrawerDescription>
          </DrawerHeader>
          <div className="px-4 pb-6">{formBody}</div>
        </DrawerContent>
      </Drawer>
    );
  }

  if (typeof document === "undefined") return null;
  return createPortal(
    <>
      <div
        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
        onClick={() => !working && onClose()}
        aria-hidden
      />
      <div
        role="dialog"
        aria-modal="true"
        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
      >
        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
          <div className="flex items-start gap-3 px-5 pt-5 pb-1">
            <div className="flex-1 min-w-0">
              <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
                {title}
              </h2>
              <p className="mt-1 text-sm text-muted-foreground leading-relaxed">
                {description}
              </p>
            </div>
            <button
              type="button"
              onClick={() => !working && onClose()}
              aria-label="Close"
              className="shrink-0 size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
            >
              <X className="size-4" />
            </button>
          </div>
          <div className="px-5 pb-5 pt-2">{formBody}</div>
        </div>
      </div>
    </>,
    document.body,
  );
}