// WebUI Bootstrap Entry
// Purpose: Boots the React application and mounts global providers/router roots. Scope: Defines top-level route wiring and root render lifecycle for the browser app.
import { lazy, StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, Route, RouterProvider, Routes } from 'react-router-dom'
import './index.css'
// Theme artwork is a separate style concern from global component utilities. Loading its dedicated
// entrypoint here keeps every route consistent without returning theme definitions to index.css.
import './themes/styles/index.css'
import DriverPageRoot from './driver/DriverPageRoot.jsx'
import { SocketProvider } from './context/SocketContext.jsx'
import { SessionProvider } from './context/SessionContext.jsx'
import { TelemetryProvider } from './context/TelemetryContext.jsx'
import { ChatProvider } from './context/ChatContext.jsx'
import SpectatorApp from './spectate/SpectatorApp/SpectatorAppRoot.jsx'
import MiniSummaryApp from './mini/MiniSummaryApp/MiniSummaryAppRoot.jsx'
import ServerDisplayApp from './display/ServerDisplayApp/ServerDisplayAppRoot.jsx'
import ScannerApp from './scanner/ScannerApp/ScannerAppRoot.jsx'
import { SettingsProvider } from './settings/index.js'
import DeterrenceChaos from './components/DeterrenceChaos/index.jsx'
import AnalyticsReporter from './analytics/AnalyticsReporter.jsx'
import PtzAppRoot from './ptz/PtzAppRoot.jsx'
import MicApp from './mic/MicApp.jsx'
import OperatingModeRouteSync from './components/OperatingModeRouteSync/index.jsx'
import PageExitGuard from './components/PageExitGuard/index.jsx'
import InitialSessionOverlay from './components/InitialSessionOverlay/index.jsx'
import AppErrorBoundary from './components/AppErrorBoundary.jsx'

// Reporting and administration carry substantial route-specific libraries.
// Loading each only on its own route keeps charting and JSON Schema tooling out
// of ordinary rover-control sessions without changing either application's
// internal ownership.
const FleetReportsApp = lazy(() => import('./reports/FleetReportsApp.jsx'))
const AdminApp = lazy(() => import('./admin/AdminApp.jsx'))
const SetupApp = lazy(() => import('./admin/SetupApp.jsx'))

function lazyRoute(element, label) {
  return (
    <Suspense fallback={<div className="min-h-screen bg-neutral-950 p-1 text-sm text-slate-300">Loading {label}…</div>}>
      {element}
    </Suspense>
  )
}

// A data router provides one blocker for links, programmatic navigation, and history.
const router = createBrowserRouter([{
  path: '*',
  element: (
    <>
      <AnalyticsReporter />
      <OperatingModeRouteSync />
      <PageExitGuard />
      <Routes>
        <Route path="/" element={<DriverPageRoot />} />
        {/* The retired desktop composition remains available for direct comparison
            without duplicating the driver shell or changing canonical mobile layouts. */}
        <Route path="/old" element={<DriverPageRoot oldDesktop />} />
        <Route path="/spectate" element={<SpectatorApp />} />
        <Route path="/mini" element={<MiniSummaryApp />} />
        <Route path="/display" element={<ServerDisplayApp />} />
        <Route path="/mic" element={<MicApp />} />
        <Route path="/scanner" element={<ScannerApp />} />
        <Route path="/setup" element={lazyRoute(<SetupApp />, 'setup')} />
        <Route path="/admin" element={lazyRoute(<AdminApp />, 'administration')} />
        {/*
          PTZ is a separate route so the driver layout and its replay
          panel are not mounted behind the camera controller. This
          also makes orientation changes a PTZ layout concern instead
          of a local overlay-open state owned by the driver page.
        */}
        <Route path="/ptz" element={<PtzAppRoot />} />
        <Route
          path="/reports"
          element={lazyRoute(<FleetReportsApp />, 'fleet reports')}
        />
      </Routes>
    </>
  ),
}])

createRoot(document.getElementById('root')).render(
  <AppErrorBoundary>
  <StrictMode>
    <SocketProvider>
      <SessionProvider>
        {/* Every route depends on the first authoritative session snapshot.
            Mounting this opaque layer at the shared provider boundary prevents
            incomplete route-specific placeholders from flashing while still
            allowing every application tree to initialize underneath it. */}
        <InitialSessionOverlay />
        <TelemetryProvider>
          <SettingsProvider>
            <ChatProvider>
              <DeterrenceChaos />
              <RouterProvider router={router} />
            </ChatProvider>
          </SettingsProvider>
        </TelemetryProvider>
      </SessionProvider>
    </SocketProvider>
  </StrictMode>
  </AppErrorBoundary>,
)