import './sentry'
import * as Sentry from "@sentry/react"
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { SentryErrorFallback } from './components/SentryErrorFallback'

/**
 * Conditionally initializes Mock Service Worker (MSW) in development mode
 * when the VITE_ENABLE_MSW environment variable is set to 'true'.
 * Automatically unregisters any leftover MSW service worker when disabled.
 */
async function enableMocking(): Promise<void> {
  if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_MSW === 'true') {
    const { worker } = await import('./mocks/browser')
    await worker.start({
      onUnhandledRequest: 'bypass',
      serviceWorker: {
        options: {
          scope: '/',
        },
      },
    })
  } else if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
    // Unregister stale MSW service workers to prevent network fetch interception errors
    try {
      const registrations = await navigator.serviceWorker.getRegistrations()
      for (const registration of registrations) {
        if (registration.active?.scriptURL.includes('mockServiceWorker.js')) {
          await registration.unregister()
        }
      }
    } catch {
      // Ignore service worker unregister errors in non-HTTPS dev envs
    }
  }
}

enableMocking().then(() => {
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <Sentry.ErrorBoundary fallback={SentryErrorFallback}>
        <App />
      </Sentry.ErrorBoundary>
    </StrictMode>
  )
})