import { useState, useEffect } from "react";

export function ConnectionStatus() {
  const [online, setOnline] = useState(navigator.onLine);
  const [visible, setVisible] = useState(!navigator.onLine);

  useEffect(() => {
    const handleOnline = () => {
      setOnline(true);
      // Show "back online" briefly then hide
      setVisible(true);
      setTimeout(() => setVisible(false), 3000);
    };
    const handleOffline = () => {
      setOnline(false);
      setVisible(true);
    };

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  if (!visible) return null;

  return (
    <div
      className={`fixed top-0 left-0 right-0 z-[100] text-center py-1 text-xs font-mono transition-all duration-300 ${
        online
          ? "bg-gb-green/20 text-gb-green border-b border-gb-green/30"
          : "bg-gb-red/20 text-gb-red border-b border-gb-red/30"
      }`}
    >
      {online ? "● CONNECTION RESTORED" : "○ YOU ARE OFFLINE — messages will send when reconnected"}
    </div>
  );
}