import { initI18n } from './i18n'
import React, { lazy, Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import App from './App.jsx'
import { getPresetBySlug } from './data/presets'

const PresetPage = lazy(() => import('./pages/PresetPage.jsx'))

// Apply theme immediately when module loads (fixes dev server)
;(function applyTheme() {
  const s = localStorage.getItem('namespinner-theme')
  const isDark = s === 'dark'
  const root = document.documentElement
  if (isDark) {
    root.classList.add('dark')
    root.style.colorScheme = 'dark'
  } else {
    root.classList.remove('dark')
    root.style.colorScheme = 'light'
  }
})()
import ErrorBoundary from './components/ErrorBoundary.jsx'
import { ThemeProvider } from './contexts/ThemeContext.jsx'
import { LanguageProvider } from './contexts/LanguageContext.jsx'
import { CookieConsentProvider } from './contexts/CookieConsentContext.jsx'
import CookieBanner from './components/CookieBanner.jsx'
import Layout from './components/Layout.jsx'
import PrivacyPage from './pages/PrivacyPage.jsx'
import TermsPage from './pages/TermsPage.jsx'
import FAQPage from './pages/FAQPage.jsx'
import AdsPage from './pages/AdsPage.jsx'
import AboutPage from './pages/AboutPage.jsx'
import ContactPage from './pages/ContactPage.jsx'
import HowItWorksPage from './pages/HowItWorksPage.jsx'
import WhyNamespinnerPage from './pages/WhyNamespinnerPage.jsx'
import BlogPage from './pages/BlogPage.jsx'
import BlogPostPage from './pages/BlogPostPage.jsx'
import NotFoundPage from './pages/NotFoundPage.jsx'
import SWUpdateWrapper from './components/SWUpdateWrapper.jsx'
import DocumentHead from './components/DocumentHead.jsx'
import Analytics from './components/Analytics.jsx'
import ScrollToTop from './components/ScrollToTop.jsx'
import './index.css'

initI18n()
  .then(() => {
    ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <ThemeProvider>
      <CookieConsentProvider>
      <BrowserRouter>
      <LanguageProvider>
      <ScrollToTop />
      <SWUpdateWrapper>
      <DocumentHead />
      <Analytics />
      <CookieBanner />
      <Routes>
        <Route path="/" element={<App presetSlug={null} preset={getPresetBySlug('')} initialNames={getPresetBySlug('').defaultNames} />} />
        <Route path="/privacy" element={<Layout />}>
          <Route index element={<PrivacyPage />} />
        </Route>
        <Route path="/terms" element={<Layout />}>
          <Route index element={<TermsPage />} />
        </Route>
        <Route path="/faq" element={<Layout />}>
          <Route index element={<FAQPage />} />
        </Route>
        <Route path="/ads" element={<Layout />}>
          <Route index element={<AdsPage />} />
        </Route>
        <Route path="/about" element={<Layout />}>
          <Route index element={<AboutPage />} />
        </Route>
        <Route path="/contact" element={<Layout />}>
          <Route index element={<ContactPage />} />
        </Route>
        <Route path="/how-it-works" element={<Layout />}>
          <Route index element={<HowItWorksPage />} />
        </Route>
        <Route path="/why-namespinner" element={<Layout />}>
          <Route index element={<WhyNamespinnerPage />} />
        </Route>
        <Route path="/blog" element={<Layout />}>
          <Route index element={<BlogPage />} />
          <Route path=":slug" element={<BlogPostPage />} />
        </Route>
        <Route path="/:preset" element={
          <Suspense fallback={
            <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900">
              <div className="animate-pulse text-slate-500 dark:text-slate-400">Loading...</div>
            </div>
          }>
            <PresetPage />
          </Suspense>
        } />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
      </SWUpdateWrapper>
      </LanguageProvider>
      </BrowserRouter>
      </CookieConsentProvider>
      </ThemeProvider>
    </ErrorBoundary>
  </React.StrictMode>,
  )
  })
  .catch((err) => {
    console.error('i18n init failed:', err)
    ReactDOM.createRoot(document.getElementById('root')).render(
      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
        <p className="text-slate-600 dark:text-slate-400">Failed to load. Check console and refresh.</p>
      </div>,
    )
  })