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

import { useEffect, useRef, useState } from "react";
import { api } from "@/lib/client-api";
import { refreshCapture, type MapCapture } from "@/shared/map-refresh";
import type { ProcessingJob } from "@/shared/processing-progress";

export function MapRefresh({
  id,
  disabled,
  onQueued,
  refreshKey,
  job,
}: {
  id: string;
  disabled: boolean;
  onQueued: () => void;
  refreshKey: number;
  job: ProcessingJob | null;
}) {
  const { t, formatDate } = useI18n();
  const [sources, setSources] = useState<MapCapture[]>([]);
  const [source, setSource] = useState("");
  const choice = useRef<{ mapId: string; sourceId: string } | null>(null);
  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);
          setSource(
            refreshCapture(
              r.sources,
              choice.current?.mapId === id
                ? choice.current.sourceId
                : undefined,
            ),
          );
          setError("");
        }
      })
      .catch((e) => {
        if (active) setError(e.message);
      });
    return () => {
      active = false;
    };
  }, [id, refreshKey, job?.id, job?.state]);
  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) => {
            choice.current = { mapId: id, sourceId: e.target.value };
            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>
      <p className="muted">
        {t(
          "The newest eligible capture is selected automatically. Choose the original capture only if you want its older terrain.",
        )}
      </p>
      <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>
      {job?.kind === "map" && job.state === "complete" && (
        <p role="status" className="success-message">
          {t("Last successful refresh used: {capture}.", {
            capture:
              job.source_dataset_id === id
                ? t("Original capture")
                : `${sources.find((s) => s.id === job.source_dataset_id)?.name ?? t("Terrain capture")} · ${job.source_dataset_id?.slice(0, 8) ?? ""}`,
          })}
        </p>
      )}
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
    </section>
  );
}