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

import { useEffect, useState } from "react";
import {
  processingStage,
  type ProcessingJob,
} from "@/shared/processing-progress";

const completionDeadlines = new Map<string, number>();

export function ProcessingProgress({ job }: { job: ProcessingJob | null }) {
  const { t } = useI18n();
  const [now, setNow] = useState<number | null>(null);
  const [visibleCompletion, setVisibleCompletion] = useState<string | null>(
    null,
  );
  const complete = job?.kind === "map" && job.state === "complete";
  const completionKey = complete
    ? `minegeo:map-refresh-notice:${job.id ?? job.updated_at}`
    : null;
  useEffect(() => {
    setVisibleCompletion(null);
    if (!completionKey) return;
    let deadline = completionDeadlines.get(completionKey);
    try {
      const saved = Number(localStorage.getItem(completionKey));
      if (Number.isFinite(saved) && saved > 0) deadline = saved;
    } catch {
      // Keep the same deadline during navigation if browser storage is blocked.
    }
    deadline ??= Date.now() + 10_000;
    completionDeadlines.set(completionKey, deadline);
    try {
      localStorage.setItem(completionKey, String(deadline));
    } catch {}
    const remaining = deadline - Date.now();
    if (remaining <= 0) return;
    setVisibleCompletion(completionKey);
    const timer = setTimeout(() => setVisibleCompletion(null), remaining);
    return () => clearTimeout(timer);
  }, [completionKey]);
  useEffect(() => {
    setNow(Date.now());
    if (job?.state !== "running") return;
    const timer = setInterval(() => setNow(Date.now()), 5000);
    return () => clearInterval(timer);
  }, [job?.state]);
  if (
    !job ||
    (complete
      ? visibleCompletion !== completionKey
      : !["queued", "running"].includes(job.state))
  )
    return null;
  const progress = complete ? 100 : Math.max(0, Math.min(100, job.progress));
  const stopped =
    now !== null &&
    job.state === "running" &&
    (!job.lease_until || Date.parse(job.lease_until) < now);
  return (
    <div className="processing-progress" role="status" aria-live="polite">
      <p>
        {complete
          ? `100% · ${t("Guessing map refreshed successfully")}`
          : job.state === "queued"
            ? t("Waiting for a processing worker")
            : `${progress}% · ${job.kind === "map" ? t("Refreshing guessing map") : t(processingStage(progress))}`}
      </p>
      <progress
        max={100}
        value={progress}
        aria-label={t("Map processing progress")}
      />
      <p className="muted">
        {complete
          ? t("The updated guessing map is ready to preview.")
          : stopped
            ? t(
                "The worker has stopped reporting. Check its terminal and restart it if necessary. Your uploaded export is saved.",
              )
            : job.state === "running"
              ? t(
                  "Worker connected. Large exports can take a while; progress measures completed work.",
                )
              : t("Processing will start when a worker is available.")}
      </p>
    </div>
  );
}