"use client";

import { useSyncExternalStore } from "react";

function subscribeToConnectivity(onStoreChange: () => void) {
  const handleOnline = () => onStoreChange();
  const handleOffline = () => onStoreChange();

  window.addEventListener("online", handleOnline);
  window.addEventListener("offline", handleOffline);

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

function getOfflineSnapshot() {
  return !navigator.onLine;
}

function getServerOfflineSnapshot() {
  return false;
}

export function ConnectivityBanner() {
  const offline = useSyncExternalStore(
    subscribeToConnectivity,
    getOfflineSnapshot,
    getServerOfflineSnapshot,
  );

  if (!offline) return null;

  return (
    <div className="connectivity-banner" role="status" aria-live="polite">
      <strong>当前设备离线</strong>
      <span>
        页面内容可能已经过期。恢复网络后请重新加载；已提交的操作先核对状态，避免重复。
      </span>
    </div>
  );
}