"use client";

import { useEffect, useRef, useState } from "react";
import {
  COUNTDOWN_LABEL,
  FALLBACK_TAB_TITLE,
  INTERVALO_SINCRONIZAR_ADMIN_MS,
  formatHms,
  parseCountdownEndMs,
} from "@/lib/site-countdown";

/**
 * Solo actualiza document.title; no renderiza nodos (evita errores de hidratación).
 */
export default function TabTitleCountdown({ initialEndIso }: { initialEndIso: string | null }) {
  const [endMs, setEndMs] = useState<number | null>(() => parseCountdownEndMs(initialEndIso));
  const [now, setNow] = useState(() => Date.now());
  const baselineTitleRef = useRef<string | null>(null);
  const frozenBaselineRef = useRef<string | null>(null);

  useEffect(() => {
    setEndMs(parseCountdownEndMs(initialEndIso));
  }, [initialEndIso]);

  useEffect(() => {
    baselineTitleRef.current = document.title;

    const syncFromServer = async () => {
      try {
        const res = await fetch("/api/site/title-countdown", { cache: "no-store" });
        if (!res.ok) return;
        const data = (await res.json()) as { endIso: string | null };
        const nextEnd = parseCountdownEndMs(data.endIso);
        setEndMs((prev) => {
          if (prev != null && nextEnd == null) {
            document.title =
              frozenBaselineRef.current ?? baselineTitleRef.current ?? FALLBACK_TAB_TITLE;
            frozenBaselineRef.current = null;
          }
          return nextEnd;
        });
      } catch {
        /* red */
      }
    };

    void syncFromServer();
    const poll = setInterval(syncFromServer, INTERVALO_SINCRONIZAR_ADMIN_MS);
    window.addEventListener("focus", syncFromServer);
    const clock = setInterval(() => setNow(Date.now()), 1000);

    return () => {
      clearInterval(clock);
      clearInterval(poll);
      window.removeEventListener("focus", syncFromServer);
      document.title =
        frozenBaselineRef.current ?? baselineTitleRef.current ?? FALLBACK_TAB_TITLE;
    };
  }, []);

  useEffect(() => {
    if (endMs == null) {
      baselineTitleRef.current = document.title;
      return;
    }
    const remaining = endMs - now;
    if (remaining <= 0) {
      document.title =
        frozenBaselineRef.current ?? baselineTitleRef.current ?? FALLBACK_TAB_TITLE;
      frozenBaselineRef.current = null;
      return;
    }
    if (frozenBaselineRef.current == null) {
      frozenBaselineRef.current = baselineTitleRef.current ?? document.title;
    }
    const frame = Math.floor(performance.now() / 700) % 2;
    const planeLeft = frame === 0 ? "✈️ " : "";
    const planeRight = frame === 1 ? " ✈️" : "";
    document.title = `${planeLeft}${COUNTDOWN_LABEL}${planeRight} · ${formatHms(remaining)}`;
  }, [endMs, now]);

  return null;
}