'use client';

import { useSyncExternalStore } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { AnnouncementRegionHost } from '@/components/ui/a11y/AnnouncementRegionHost';
import { Badge } from '@/components/ui/primitives/Badge';
import { useT } from '@/lib/i18n/react';
import type { Locale } from '@/lib/i18n';

interface GlobalStatusHostProps {
  locale: Locale;
}

function subscribeOnlineStatus(callback: () => void) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getOnlineSnapshot() {
  return typeof navigator === 'undefined' ? true : navigator.onLine;
}

function GlobalStatusInner() {
  const t = useT('seo_pages');
  const isOnline = useSyncExternalStore(subscribeOnlineStatus, getOnlineSnapshot, () => true);

  return (
    <>
      <AnnouncementRegionHost />
      <div className="pointer-events-none fixed inset-x-0 top-[calc(var(--safe-area-top)+var(--spacing-3))] z-[var(--z-toast)] flex justify-center px-4">
        {!isOnline ? (
          <Badge
            tone="neutral"
            size="md"
            role="status"
            aria-live="polite"
            data-testid="offline-pill"
          >
            {t('offline_pill')}
          </Badge>
        ) : null}
      </div>
    </>
  );
}

export function GlobalStatusHost({ locale }: GlobalStatusHostProps) {
  return (
    <HydratedIsland locale={locale}>
      <GlobalStatusInner />
    </HydratedIsland>
  );
}