import { useSyncExternalStore } from "react";

/**
 * Reactive `navigator.onLine`. Returns `true` while the browser reports it has
 * network connectivity, `false` while it doesn't. Re-renders subscribers when
 * the browser fires the `online` / `offline` events, so guards using this hook
 * auto-recover the moment connectivity returns — no manual refresh needed.
 *
 * Note: `navigator.onLine === true` only proves the network *interface* is up;
 * it doesn't prove the Tailor backend is reachable. So a `true` here isn't a
 * guarantee of working backend access — callers still need to handle request
 * failures. The signal is most reliable in the `false` direction (truly offline).
 */
function subscribe(callback: () => void): () => void {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

function getSnapshot(): boolean {
  return navigator.onLine;
}

// SSR fallback — this app renders client-only via Vite, but keep this
// defensive so the hook is safe to import anywhere.
function getServerSnapshot(): boolean {
  return true;
}

export function useOnline(): boolean {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}