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

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

export function MapRefresh({
  id,
  disabled,
  onQueued,
}: {
  id: string;
  disabled: boolean;
  onQueued: () => void;
}) {
  const { t, formatDate } = useI18n();
  const [sources, setSources] = useState<
    { id: string; name: string; created_at: string }[]
  >([]);
  const [source, setSource] = useState(id);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  useEffect(() => {
    let active = true;
    api<{ sources: typeof sources }>(`datasets/${id}/refresh-map`)
      .then((r) => {
        if (active) setSources(r.sources);
      })
      .catch((e) => {
        if (active) setError(e.message);
      });
    return () => {
      active = false;
    };
  }, [id]);
  async function refresh() {
    setBusy(true);
    setError("");
    try {
      await api(`datasets/${id}/refresh-map`, { sourceId: source });
      onQueued();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <section className="editor-panel">
      <span className="eyebrow">{t("THE MAP PLAYERS GUESS ON")}</span>
      <h2>{t("Refresh guessing map")}</h2>
      <p className="muted">
        {t(
          "Rebuild the overhead map from a processed capture. To show new buildings, export the same area again and upload it first. Select that capture here; its boundaries must match this map exactly.",
        )}
      </p>
      <label className="field">
        {t("Terrain capture")}
        <select
          value={source}
          onChange={(e) => setSource(e.target.value)}
          disabled={disabled || busy}
        >
          {sources.map((s) => (
            <option key={s.id} value={s.id}>
              {s.id === id ? t("Original capture") : s.name} ·{" "}
              {formatDate(s.created_at)} · {s.id.slice(0, 8)}
            </option>
          ))}
        </select>
      </label>
      <button
        className="button"
        disabled={disabled || busy || !sources.some((s) => s.id === source)}
        onClick={refresh}
      >
        {busy ? t("Queueing…") : t("Refresh guessing map")}
      </button>
      <p className="muted">
        {t(
          "Panoramas stay unchanged. Refreshing uses no panorama slots, even at 24/24. Submit the finished map update for review to make it playable.",
        )}
      </p>
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
    </section>
  );
}