"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { api } from "./StartGame";
import { PanoramaPreview } from "./PanoramaPreview";
import { reportCategories } from "@/shared/moderation";
import type { Appeal } from "./MapAppeal";
type ReviewMap = {
  id: string;
  name: string;
  description: string;
  state: string;
  update_state: string | null;
  source: string;
  panorama_count: number;
  map: string | null;
  image: string | null;
  report_strikes: number;
  banned_at: string | null;
};
export function Moderation() {
  const [maps, setMaps] = useState<ReviewMap[]>([]),
    [reports, setReports] = useState<
      {
        id: string;
        dataset_id: string;
        reason: string;
        category: keyof typeof reportCategories;
        panorama_id: string | null;
        evidence_url: string | null;
        created_at: string;
        mapName: string;
        map: string | null;
      }[]
    >([]),
    [appeals, setAppeals] = useState<Appeal[]>([]),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false),
    [reasons, setReasons] = useState<Record<string, string>>({});
  const [preview, setPreview] = useState<string | null>(null),
    [loading, setLoading] = useState(true);
  const [reportPreview, setReportPreview] = useState<{
    id: string;
    panorama: string | null;
  } | null>(null);
  async function load() {
    try {
      const d = await api<{
        maps: ReviewMap[];
        reports: typeof reports;
        appeals: Appeal[];
      }>("moderation");
      setMaps(d.maps);
      setReports(d.reports);
      setAppeals(d.appeals);
      setError("");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  async function resolveReport(id: string, decision: "confirm" | "dismiss") {
    setBusy(true);
    setError("");
    try {
      await api(`reports/${id}`, { decision, reason: reasons[id] }, "PATCH");
      await load();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function reviewAppeal(id: string, decision: "approve" | "reject") {
    setBusy(true);
    setError("");
    try {
      await api(`moderation/appeals/${id}`, { decision, reason: reasons[id] });
      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>
          {m.update_state === "review" && (
            <span className="badge">Map update awaiting review</span>
          )}
          <h2>{m.name}</h2>
          {m.report_strikes > 0 && (
            <p className={m.banned_at ? "error-message" : "muted"}>
              {m.report_strikes}/3 confirmed reports
              {m.banned_at ? " · Banned; owner appeal required" : ""}
            </p>
          )}
          <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" || m.update_state === "review" ? (
              <>
                <button
                  className="button primary"
                  disabled={busy}
                  onClick={() => decide(m.id, "approve")}
                >
                  {m.update_state === "review"
                    ? "Approve update"
                    : "Approve map"}
                </button>
                <button
                  className="button"
                  disabled={busy || !reasons[m.id]?.trim()}
                  onClick={() => decide(m.id, "reject")}
                >
                  Return with feedback
                </button>
              </>
            ) : null}
            {m.state === "published" && (
              <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>
          <p className="muted">
            Confirming a valid report adds one strike to the map. Three strikes
            automatically unpublish it. Dismissed reports add no strikes.
          </p>
          {reports.map((r) => (
            <article className="draft-row" key={r.id}>
              <div>
                <h3>{r.mapName}</h3>
                <code>{r.dataset_id}</code>
                <p>
                  {r.panorama_id ? `Panorama: ${r.panorama_id}` : "Entire map"}{" "}
                  · {reportCategories[r.category]} ·{" "}
                  {new Date(r.created_at).toLocaleString()}
                </p>
                <p>{r.reason}</p>
                {r.evidence_url && (
                  <p>
                    <a
                      href={r.evidence_url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Open evidence
                    </a>
                  </p>
                )}
                {r.map && (
                  <Image
                    src={r.map}
                    width={320}
                    height={320}
                    alt="Reported map version"
                    unoptimized
                    style={{ maxWidth: "100%", height: "auto" }}
                  />
                )}
                <button
                  className="button"
                  onClick={() =>
                    setReportPreview({ id: r.id, panorama: r.panorama_id })
                  }
                >
                  Inspect reported content
                </button>
                <label className="field">
                  Decision reason
                  <textarea
                    maxLength={2000}
                    value={reasons[r.id] ?? ""}
                    onChange={(e) =>
                      setReasons((s) => ({ ...s, [r.id]: e.target.value }))
                    }
                  />
                </label>
                <div className="inline-actions">
                  <button
                    className="button primary"
                    disabled={
                      busy ||
                      (reasons[r.id]?.trim().length ?? 0) < 10 ||
                      !!maps.find((m) => m.id === r.dataset_id)?.banned_at
                    }
                    onClick={() => resolveReport(r.id, "confirm")}
                  >
                    Confirm report · add strike
                  </button>
                  <button
                    className="button"
                    disabled={busy || (reasons[r.id]?.trim().length ?? 0) < 10}
                    onClick={() => resolveReport(r.id, "dismiss")}
                  >
                    Dismiss report
                  </button>
                </div>
              </div>
            </article>
          ))}
        </section>
      )}
      {appeals.length > 0 && (
        <section className="token-box">
          <h2>Map ban appeals</h2>
          {appeals.map((a) => (
            <article className="tool-card" key={a.id}>
              <h3>
                {maps.find((m) => m.id === a.dataset_id)?.name ?? a.dataset_id}
              </h3>
              <p>{a.reason}</p>
              <button
                className="button"
                onClick={() => setPreview(a.dataset_id)}
              >
                Inspect map panoramas
              </button>
              <label className="field">
                Appeal decision reason
                <textarea
                  maxLength={2000}
                  value={reasons[a.id] ?? ""}
                  onChange={(e) =>
                    setReasons((s) => ({ ...s, [a.id]: e.target.value }))
                  }
                />
              </label>
              <div className="inline-actions">
                <button
                  className="button primary"
                  disabled={busy || (reasons[a.id]?.trim().length ?? 0) < 10}
                  onClick={() => reviewAppeal(a.id, "approve")}
                >
                  Approve appeal · restore map
                </button>
                <button
                  className="button"
                  disabled={busy || (reasons[a.id]?.trim().length ?? 0) < 10}
                  onClick={() => reviewAppeal(a.id, "reject")}
                >
                  Reject appeal · keep ban
                </button>
              </div>
            </article>
          ))}
        </section>
      )}
      {reportPreview && (
        <PanoramaPreview
          endpoint={`moderation/reports/${reportPreview.id}/panoramas`}
          initialId={reportPreview.panorama ?? undefined}
          onClose={() => setReportPreview(null)}
        />
      )}
      {preview && (
        <PanoramaPreview
          endpoint={`moderation/${preview}/panoramas`}
          onClose={() => setPreview(null)}
        />
      )}
    </>
  );
}