"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui";

const INTERVAL = 30;

/** Polls the API every 30 s and returns to the lobby as soon as it answers. */
export function MaintenanceRetry() {
  const router = useRouter();
  const [left, setLeft] = useState(INTERVAL);
  const [checking, setChecking] = useState(false);

  const check = async () => {
    setChecking(true);
    try {
      const res = await fetch("/api/games", { cache: "no-store" });
      if (res.ok) {
        router.replace("/");
        return;
      }
    } catch {
      // still down
    } finally {
      setChecking(false);
      setLeft(INTERVAL);
    }
  };

  useEffect(() => {
    const t = setInterval(() => {
      setLeft((n) => {
        if (n <= 1) {
          void check();
          return INTERVAL;
        }
        return n - 1;
      });
    }, 1000);
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="mt-8 flex flex-col items-center gap-3">
      <Button size="lg" variant="secondary" onClick={check} loading={checking}>
        <RefreshCw className="h-4 w-4" /> Check now
      </Button>
      <span className="text-[12px] tabular text-fg-4">Next automatic check in {left}s</span>
    </div>
  );
}