MineGeo/components/ReportCommunity.tsx

"use client";
import { useEffect, useId, useRef, useState } from "react";
import { Flag } from "lucide-react";
import { api } from "@/lib/client-api";
import { communityCategories } from "@/shared/community";
import { useI18n } from "./I18nProvider";

export function ReportCommunity({
  target,
  targetId,
}: {
  target: "comment" | "account";
  targetId: string;
}) {
  const { t } = useI18n();
  const titleId = useId();
  const dialog = useRef<HTMLDialogElement>(null);
  const [open, setOpen] = useState(false);
  const [category, setCategory] = useState("spam");
  const [reason, setReason] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const label = target === "comment" ? "Report comment" : "Report account";
  useEffect(() => {
    if (!open) return;
    const previous =
      document.activeElement instanceof HTMLElement
        ? document.activeElement
        : null;
    const element = dialog.current;
    element?.showModal();
    return () => {
      element?.close();
      previous?.focus();
    };
  }, [open]);
  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setError("");
    try {
      await api("community/reports", { target, targetId, category, reason });
      setMessage("Report sent for moderator review.");
      setOpen(false);
      setReason("");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <>
      <button
        className="button"
        onClick={() => {
          setOpen(true);
          setError("");
          setMessage("");
        }}
      >
        <Flag size={15} aria-hidden="true" /> {t(label)}
      </button>
      {message && (
        <span role="status" className="success-message">
          {t(message)}
        </span>
      )}
      {open && (
        <dialog
          ref={dialog}
          className="report-dialog"
          aria-labelledby={titleId}
          onCancel={() => setOpen(false)}
        >
          <form onSubmit={submit}>
            <h2 id={titleId}>{t(label)}</h2>
            <p className="muted">
              {t(
                "A moderator will review your report. Reports do not automatically remove content or ban accounts.",
              )}
            </p>
            <label className="field">
              {t("Reason")}
              <select
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                {Object.entries(communityCategories).map(([value, label]) => (
                  <option key={value} value={value}>
                    {t(label)}
                  </option>
                ))}
              </select>
            </label>
            <label className="field">
              {t("What happened?")}
              <textarea
                required
                minLength={10}
                maxLength={2000}
                value={reason}
                onChange={(e) => setReason(e.target.value)}
              />
            </label>
            {error && (
              <p role="alert" className="error-message">
                {t(error)}
              </p>
            )}
            <div className="inline-actions">
              <button
                className="button primary"
                disabled={busy || reason.trim().length < 10}
              >
                {t(busy ? "Sending…" : "Send report")}
              </button>
              <button
                type="button"
                className="button"
                disabled={busy}
                onClick={() => setOpen(false)}
              >
                {t("Cancel")}
              </button>
            </div>
          </form>
        </dialog>
      )}
    </>
  );
}