'use client';

import { ConfirmProvider } from '@/components/confirm-provider';
import { PromptProvider } from '@/components/prompt-provider';
import { Providers } from '@/components/providers';
import { SyncBootstrap } from '@/components/sync-bootstrap';
import { Toaster } from '@/components/ui/toaster';
import { useEffect } from 'react';

function useServiceWorkerRegistration() {
  useEffect(() => {
    if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {
      return;
    }

    const register = async () => {
      if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
        const regs = await navigator.serviceWorker.getRegistrations();
        await Promise.all(regs.map((registration) => registration.unregister()));

        if ('caches' in window) {
          const keys = await caches.keys();
          await Promise.all(keys.map((key) => caches.delete(key)));
        }
        return;
      }

      try {
        await navigator.serviceWorker.register('/sw.js');
      } catch (error) {
        console.warn('SW registration failed', error);
      }
    };

    if (document.readyState === 'complete') {
      void register();
      return;
    }

    const handleLoad = () => {
      void register();
    };

    window.addEventListener('load', handleLoad);
    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, []);
}

export function ClientRoot({ children }: { children: React.ReactNode }) {
  useServiceWorkerRegistration();

  return (
    <Providers>
      <ConfirmProvider>
        <PromptProvider>
          <SyncBootstrap />
          {children}
          <Toaster />
        </PromptProvider>
      </ConfirmProvider>
    </Providers>
  );
}