"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { api } from "./StartGame";
import { PanoramaPreview } from "./PanoramaPreview";
type ReviewMap = {
  id: string;
  name: string;
  description: string;
  state: string;
  source: string;
  panorama_count: number;
  map: string | null;
  image: string | null;
};
export function Moderation() {
  const [maps, setMaps] = useState<ReviewMap[]>([]),
    [reports, setReports] = useState<
      { id: string; dataset_id: string; reason: string }[]
    >([]),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false),
    [reasons, setReasons] = useState<Record<string, string>>({});
  const [preview, setPreview] = useState<string | null>(null),
    [loading, setLoading] = useState(true);
  async function load() {
    try {
      const d = await api<{ maps: ReviewMap[]; reports: typeof reports }>(
        "moderation",
      );
      setMaps(d.maps);
      setReports(d.reports);
      setError("");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  async function resolveReport(id: string) {
    setBusy(true);
    setError("");
    try {
      await api(`reports/${id}`, { state: "resolved" }, "PATCH");
      await load();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  useEffect(() => {
    load();
  }, []);
  async function decide(datasetId: string, decision: string) {
    setBusy(true);
    setError("");
    try {
      await api("moderation", {
        datasetId,
        decision,
        reason: reasons[datasetId] || undefined,
      });
      await load();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <>
      {error && (
        <p role="alert" className="error-message">
          {error}
        </p>
      )}
      {loading && <p role="status">Loading review queue…</p>}
      {!loading && !maps.length && !error && (
        <p className="muted">The review queue is clear.</p>
      )}
      {maps.map((m) => (
        <article className="tool-card" key={m.id}>
          <span className="badge">{m.state}</span>
          <h2>{m.name}</h2>
          <p className="muted">
            {m.source} · {m.panorama_count} locations · {m.description}
          </p>
          {m.map && (
            <Image
              src={m.map}
              width={512}
              height={512}
              alt="Map for moderator review"
              unoptimized
              style={{ maxWidth: "100%", height: "auto" }}
            />
          )}
          <label className="field">
            Review reason
            <textarea
              value={reasons[m.id] || ""}
              onChange={(e) =>
                setReasons((s) => ({ ...s, [m.id]: e.target.value }))
              }
            />
          </label>
          <div className="inline-actions">
            <button className="button" onClick={() => setPreview(m.id)}>
              Inspect 360° locations
            </button>
            {m.state === "review" ? (
              <>
                <button
                  className="button primary"
                  disabled={busy}
                  onClick={() => decide(m.id, "approve")}
                >
                  Approve map
                </button>
                <button
                  className="button"
                  disabled={busy || !reasons[m.id]?.trim()}
                  onClick={() => decide(m.id, "reject")}
                >
                  Return with feedback
                </button>
              </>
            ) : (
              <button
                className="button"
                disabled={busy}
                onClick={() => decide(m.id, "unpublish")}
              >
                Unpublish
              </button>
            )}
          </div>
        </article>
      ))}
      {reports.length > 0 && (
        <section className="token-box">
          <h2>Community reports</h2>
          {reports.map((r) => (
            <article className="draft-row" key={r.id}>
              <div>
                <code>{r.dataset_id}</code>
                <p>{r.reason}</p>
              </div>
              <button
                className="button"
                disabled={busy}
                onClick={() => resolveReport(r.id)}
              >
                Resolve report
              </button>
            </article>
          ))}
        </section>
      )}
      {preview && (
        <PanoramaPreview
          endpoint={`moderation/${preview}/panoramas`}
          onClose={() => setPreview(null)}
        />
      )}
    </>
  );
}