import React from 'react'
import ReactDOM from 'react-dom/client'

// Suppress React Router v7 HydrateFallback warning for client-side SPAs
// This warning is irrelevant for Vite SPAs (no SSR hydration occurs)
if (import.meta.env.DEV) {
  const originalWarn = console.warn
  console.warn = (...args: unknown[]) => {
    if (
      typeof args[0] === 'string' &&
      args[0].includes('No `HydrateFallback` element provided')
    ) {
      return // Suppress this specific warning
    }
    originalWarn.apply(console, args)
  }
}

import '@fontsource/cairo/300.css'
import '@fontsource/cairo/400.css'
import '@fontsource/cairo/600.css'
import '@fontsource/cairo/700.css'
import '@fontsource/jetbrains-mono/400.css'
import '@fontsource/jetbrains-mono/500.css'
import '@fontsource/playfair-display/400.css'
import '@fontsource/playfair-display/500.css'
import '@fontsource/playfair-display/600.css'
import '@fontsource/playfair-display/700.css'
import '@fontsource/playfair-display/800.css'
import '@fontsource/playfair-display/900.css'
import '@fontsource/source-sans-3/300.css'
import '@fontsource/source-sans-3/400.css'
import '@fontsource/source-sans-3/600.css'
import '@fontsource/source-sans-3/700.css'
import './styles/globals.css'
import { AppProviders } from './app/providers'
import { AppRouter } from './app/router'

const Root = () => (
  <AppProviders>
    <AppRouter />
  </AppProviders>
)

// Service Worker management: only register in production
if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
  if (import.meta.env.PROD) {
    // PROD: Register SW for offline support
    navigator.serviceWorker.register('/sw.js').catch(() => {
      /* SW registration failed silently */
    })
  } else {
    // DEV: Nuke all SWs + caches to prevent stale code
    navigator.serviceWorker.getRegistrations?.().then((regs) => {
      regs.forEach((reg) => reg.unregister())
    }).catch(() => {
      /* no-op */
    })
    caches.keys?.().then((keys) => {
      keys.forEach((key) => caches.delete(key))
    }).catch(() => {
      /* no-op */
    })
  }
}

const rootElement = document.getElementById('root')
if (!rootElement) {
  throw new Error('Could not find root element to mount to')
}

const root = ReactDOM.createRoot(rootElement)
root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
)