import { createRoot } from 'react-dom/client';
import { lazy, Suspense } from 'react';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import { SnackbarProvider } from 'notistack';
import AuthBootstrap from './components/AuthBootstrap';
import App from './App';
import { getActiveTheme } from './theme';
import { installCssVars } from './colors';
// Side-effect imports: each module registers its automat and subscribes to
// authAutomat, so the stores must be evaluated before the session bootstraps.
import './automats';
import { initPwa } from './automats';
import PwaUpdateDialog from './components/PwaUpdateDialog';
import './index.css';

// Publish the color tokens as CSS custom properties so index.css (and any
// other plain-CSS stylesheet) reads the same palette as the React components.
installCssVars();

// Dev-only Automat inspector. The `import.meta.env.DEV` branch is statically
// eliminated in production builds, so this module never ships to users.
const AutomatInspector = import.meta.env.DEV
  ? lazy(() => import('./devtools/AutomatInspector'))
  : null;

async function clearDevServiceWorker() {
  if (!import.meta.env.DEV || !('serviceWorker' in navigator)) return;
  const regs = await navigator.serviceWorker.getRegistrations();
  await Promise.all(regs.map((r) => r.unregister()));
  if ('caches' in window) {
    const keys = await caches.keys();
    await Promise.all(keys.map((k) => caches.delete(k)));
  }
}

if (import.meta.env.DEV) {
  void clearDevServiceWorker();
}

// Initialize PWA service worker registration and update listener in production
initPwa();

createRoot(document.getElementById('root')).render(
  <ThemeProvider theme={getActiveTheme()}>
    <CssBaseline />
    <SnackbarProvider
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
    >
      <AuthBootstrap>
        {/* Flex row so the dev inspector docks beside the app instead of
            overlaying it; the app content shrinks while the panel is open. */}
        <Box sx={{ display: 'flex', alignItems: 'flex-start', minHeight: '100vh' }}>
          <Box sx={{ flexGrow: 1, minWidth: 0 }}>
            <App />
          </Box>
          {AutomatInspector ? (
            <Suspense fallback={null}>
              <AutomatInspector />
            </Suspense>
          ) : null}
        </Box>
        <PwaUpdateDialog />
      </AuthBootstrap>
    </SnackbarProvider>
  </ThemeProvider>,
);