"use client";

import { useEffect, useState } from "react";
import { BACKEND } from "./config";

export default function BackendStatusBanner() {
  const [unreachable, setUnreachable] = useState<boolean | null>(null);

  useEffect(() => {
    let cancelled = false;
    const check = async () => {
      try {
        const res = await fetch(`${BACKEND}/health`, { credentials: "include" });
        if (cancelled) return;
        setUnreachable(!res.ok);
      } catch {
        if (!cancelled) setUnreachable(true);
      }
    };
    check();
    const interval = setInterval(check, 30000);
    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, []);

  if (unreachable !== true) return null;

  return (
    <div
      role="alert"
      className="sticky top-0 z-50 w-full border-b border-amber-500/50 bg-amber-500/20 px-4 py-3 text-center text-amber-200"
    >
      <p className="font-medium">
        Cannot reach backend. Check that the API is running at{" "}
        <span className="font-mono text-amber-100">{BACKEND}</span> and that CORS allows this origin.
      </p>
      <p className="mt-1 text-sm text-amber-200/80">
        Data will not load until the backend responds. If you just started the server, wait a moment and refresh.
      </p>
    </div>
  );
}