'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export function PWAInstaller() {
  const router = useRouter();

  useEffect(() => {
    let messageHandler: ((event: MessageEvent) => void) | null = null;

    if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
      // Register service worker
      navigator.serviceWorker
        .register('/sw.js', { updateViaCache: 'none' })
        .then((registration) => {
          console.log('Service Worker registered:', registration.scope);
          // Force update check to reduce stale SW/client mismatch after deployments.
          registration.update().catch(() => {});
        })
        .catch((error) => {
          console.error('Service Worker registration failed:', error);
        });

      // Listen for navigation messages from service worker
      messageHandler = (event: MessageEvent) => {
        if (event.data && event.data.type === 'NAVIGATE') {
          const url = event.data.url;
          try {
            const urlObj = new URL(url);
            // If same origin, use Next.js router for in-app navigation
            if (urlObj.origin === window.location.origin) {
              router.push(urlObj.pathname + urlObj.search + urlObj.hash);
            } else {
              // External URL, open in new context
              window.location.href = url;
            }
          } catch (err) {
            console.error('Navigation error:', err);
          }
        }
      };
      navigator.serviceWorker.addEventListener('message', messageHandler);
    }

    return () => {
      if (messageHandler && typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
        navigator.serviceWorker.removeEventListener('message', messageHandler);
      }
    };
  }, [router]);

  return null;
}