"use client";
import { useCallback, useEffect, useState } from "react";
import { api } from "./StartGame";

export type Appeal = {
  id: string;
  dataset_id: string;
  reason: string;
  state: string;
  review_reason: string | null;
  created_at: string;
  reviewed_at: string | null;
};
export function MapAppeal({
  id,
  strikes,
  bannedAt,
  banReason,
  onChange,
}: {
  id: string;
  strikes: number;
  bannedAt: string | null;
  banReason: string | null;
  onChange: () => void;
}) {
  const [appeals, setAppeals] = useState<Appeal[]>([]);
  const [reason, setReason] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const load = useCallback(async () => {
    try {
      setAppeals(
        (await api<{ appeals: Appeal[] }>(`datasets/${id}/appeals`)).appeals,
      );
    } catch (e) {
      setError((e as Error).message);
    }
  }, [id]);
  useEffect(() => {
    load();
    const timer = setInterval(load, 10000);
    return () => clearInterval(timer);
  }, [load]);
  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setError("");
    try {
      await api(`datasets/${id}/appeals`, { reason });
      setReason("");
      await load();
      onChange();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <section className="tool-card">
      <h2>
        {bannedAt
          ? "Map unpublished · appeal required"
          : "Community report strikes"}
      </h2>
      <p>
        {strikes}/3 confirmed reports.{" "}
        {bannedAt
          ? "This map cannot be published until a moderator approves your appeal."
          : "Three confirmed reports automatically unpublish this map."}
      </p>
      {banReason && <p>{banReason}</p>}
      {appeals.map((a) => (
        <div key={a.id}>
          <span className="badge">Appeal: {a.state}</span>
          <p>{a.reason}</p>
          {a.review_reason && <p>Moderator feedback: {a.review_reason}</p>}
        </div>
      ))}
      {bannedAt &&
        (appeals.some((a) => a.state === "open") ? (
          <p role="status">Your appeal is waiting for moderator review.</p>
        ) : (
          <form onSubmit={submit}>
            <label className="field">
              Explain why the map ban should be lifted
              <textarea
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                required
                minLength={10}
                maxLength={2000}
              />
            </label>
            <button
              className="button primary"
              disabled={busy || reason.trim().length < 10}
            >
              {busy ? "Sending…" : "Appeal map ban"}
            </button>
          </form>
        ))}
      {error && (
        <p role="alert" className="error-message">
          {error}
        </p>
      )}
    </section>
  );
}