import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import { registerSW } from 'virtual:pwa-register';
import './utils/imagePreloader';
import App from './App.tsx';
import './index.css';
import { SystemErrorBoundary } from './components/SystemErrorBoundary';

// Register Service Worker for background Web Push & PWA
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then((reg) => {
        console.log('📲 betguru: PWA & Push Service Worker active with scope:', reg.scope);
      })
      .catch((err) => {
        console.warn('betguru: SW register fallback to sw-push.js:', err);
        navigator.serviceWorker.register('/sw-push.js', { scope: '/' }).catch(() => {});
      });
  });

  if (import.meta.env.PROD) {
    try {
      registerSW({
        immediate: true,
        onNeedRefresh() {
          console.log('betguru: New update available, reloading...');
        },
        onOfflineReady() {
          console.log('betguru: App is cached and ready for offline play');
        },
      });
    } catch {
      // Ignored
    }
  }
}

// Prevent canvas.getBoundingClientRect errors in OffscreenCanvas workers or libraries
if (typeof OffscreenCanvas !== 'undefined' && !('getBoundingClientRect' in OffscreenCanvas.prototype)) {
  try {
    (OffscreenCanvas.prototype as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = function (this: OffscreenCanvas): DOMRect {
      const w = this.width || 300;
      const h = this.height || 150;
      return {
        top: 0,
        left: 0,
        right: w,
        bottom: h,
        width: w,
        height: h,
        x: 0,
        y: 0,
        toJSON: () => ({})
      };
    };
  } catch (_) {}
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <SystemErrorBoundary>
      <App />
    </SystemErrorBoundary>
  </StrictMode>,
);