Projects/front/src/components/ConnectionStatus.tsx

// src/components/ConnectionStatus.tsx
"use client";
import { useEffect, useState } from "react";
import { useAuth } from "@/context/AuthContext";

interface ConnectionStatusProps {
  checkBackend?: boolean;
}

export function ConnectionStatus({ checkBackend = false }: ConnectionStatusProps) {
  const [online, setOnline] = useState<boolean | null>(null);
  const [backendOnline, setBackendOnline] = useState<boolean | null>(null);
  const { user } = useAuth();

  // Check browser online status
  useEffect(() => {
    const updateOnlineStatus = () => setOnline(navigator.onLine);
    updateOnlineStatus();
    window.addEventListener("online", updateOnlineStatus);
    window.addEventListener("offline", updateOnlineStatus);
    return () => {
      window.removeEventListener("online", updateOnlineStatus);
      window.removeEventListener("offline", updateOnlineStatus);
    };
  }, []);

  // Optional backend health check (only when authenticated)
  useEffect(() => {
    if (!checkBackend || !user) return;
    const checkBackendHealth = async () => {
      try {
        const res = await fetch("/api/health");
        setBackendOnline(res.ok);
      } catch {
        setBackendOnline(false);
      }
    };
    checkBackendHealth();
    const interval = setInterval(checkBackendHealth, 30000);
    return () => clearInterval(interval);
  }, [checkBackend, user]);

  const isOnline = checkBackend ? (online && backendOnline === true) : online;
  const statusText = online === false ? "Offline" : checkBackend && backendOnline === false ? "Connecting" : "Online";
  const statusColor = online === false || backendOnline === false ? "text-amber-600" : "text-green-600";
  const dotColor = online === false || backendOnline === false ? "bg-amber-500" : "bg-green-500";

  if (online === null) {
    return <span className="ml-2 hidden text-xs text-gray-400 animate-pulse md:inline">Checking…</span>;
  }

  return (
    <span
      className={`ml-2 flex items-center gap-1 text-xs font-semibold ${statusColor}`}
      title={statusText === "Online" ? "Connected" : "Waiting for connection"}
    >
      <span className={`inline-block h-2 w-2 rounded-full ${dotColor}`} />
      <span className="hidden md:inline">{statusText}</span>
    </span>
  );
}