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 { StorageManagerProvider } from './api/storageManagerContext';
import App from './App';
import { getActiveTheme } from './theme';
import './automats/supplierAutomat';
import './index.css';

// 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();
}

createRoot(document.getElementById('root')).render(
  <ThemeProvider theme={getActiveTheme()}>
    <CssBaseline />
    <SnackbarProvider
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
    >
      <StorageManagerProvider>
        <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>
        </AuthBootstrap>
      </StorageManagerProvider>
    </SnackbarProvider>
  </ThemeProvider>,
);