"use client";
import { useEffect, useRef, useState } from "react";
import { api } from "./StartGame";
import { reportCategories } from "@/shared/moderation";

export function ReportContent({
  datasetId,
  sessionId,
  round,
}: {
  datasetId?: string;
  sessionId?: string;
  round?: number;
}) {
  const [open, setOpen] = useState(false);
  const [target, setTarget] = useState("map");
  const [category, setCategory] = useState("broken");
  const [reason, setReason] = useState("");
  const [evidenceUrl, setEvidenceUrl] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const dialog = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    if (!open) return;
    const element = dialog.current;
    const previousFocus =
      document.activeElement instanceof HTMLElement
        ? document.activeElement
        : null;
    element?.showModal();
    return () => {
      element?.close();
      previousFocus?.focus();
    };
  }, [open]);
  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setError("");
    try {
      await api("reports", {
        datasetId,
        sessionId,
        round,
        target,
        category,
        reason,
        evidenceUrl: evidenceUrl.trim() || undefined,
      });
      setMessage(
        "Report sent for moderator review. Only confirmed reports count toward the three-report map ban.",
      );
      setOpen(false);
      setReason("");
      setEvidenceUrl("");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <>
      <button
        className="button"
        onClick={() => {
          setOpen(true);
          setError("");
          setMessage("");
        }}
      >
        Report content
      </button>
      {message && (
        <p role="status" className="success-message">
          {message}
        </p>
      )}
      {open && (
        <dialog
          ref={dialog}
          className="report-dialog"
          aria-labelledby="report-title"
          onCancel={() => setOpen(false)}
        >
          <form onSubmit={submit}>
            <h2 id="report-title">Report content</h2>
            <p className="muted">
              Sign in to send a report. A moderator reviews the content and your
              explanation. Three confirmed reports unpublish the map until an
              owner appeal is approved.
            </p>
            <label className="field">
              What are you reporting?
              <select
                value={target}
                onChange={(e) => setTarget(e.target.value)}
              >
                <option value="map">Entire map</option>
                {sessionId && (
                  <option value="panorama">
                    This panorama (round {(round ?? 0) + 1})
                  </option>
                )}
              </select>
            </label>
            <label className="field">
              Reason
              <select
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                {Object.entries(reportCategories).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </select>
            </label>
            <label className="field">
              What happened?
              <textarea
                required
                minLength={10}
                maxLength={2000}
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder="Describe the problem and where to find it."
              />
            </label>
            <label className="field">
              Evidence link (optional)
              <input
                type="url"
                maxLength={1000}
                value={evidenceUrl}
                onChange={(e) => setEvidenceUrl(e.target.value)}
                placeholder="https://…"
              />
            </label>
            {error && (
              <p role="alert" className="error-message">
                {error}
              </p>
            )}
            <div className="inline-actions">
              <button
                className="button primary"
                disabled={busy || reason.trim().length < 10}
              >
                {busy ? "Sending…" : "Send report"}
              </button>
              <button
                type="button"
                className="button"
                disabled={busy}
                onClick={() => setOpen(false)}
              >
                Cancel
              </button>
            </div>
          </form>
        </dialog>
      )}
    </>
  );
}