"use client";
import { statusMessage } from "@/shared/i18n";
import { useI18n } from "@/components/I18nProvider";

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 { t } = useI18n();
  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
          ? t("Map unpublished · appeal required")
          : t("Community report strikes")}
      </h2>
      <p>
        {strikes}
        {t("/3 confirmed reports.")}{" "}
        {bannedAt
          ? t(
              "This map cannot be published until a moderator approves your appeal.",
            )
          : t("Three confirmed reports automatically unpublish this map.")}
      </p>
      {banReason && <p>{banReason}</p>}
      {appeals.map((a) => (
        <div key={a.id}>
          <span className="badge">
            {t("Appeal:")} {t(statusMessage(a.state))}
          </span>
          <p>{a.reason}</p>
          {a.review_reason && (
            <p>
              {t("Moderator feedback:")} {a.review_reason}
            </p>
          )}
        </div>
      ))}
      {bannedAt &&
        (appeals.some((a) => a.state === "open") ? (
          <p role="status">
            {t("Your appeal is waiting for moderator review.")}
          </p>
        ) : (
          <form onSubmit={submit}>
            <label className="field">
              {t("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 ? t("Sending…") : t("Appeal map ban")}
            </button>
          </form>
        ))}
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
    </section>
  );
}