/**
 * Application entry point.
 *
 * Creates the React root from `#root` and mounts the app: `AuthProvider`
 * (JWT session against `VITE_AUTH_BASE_URL`) wraps a `LoginGate` (renders
 * `AuthPage` until authenticated) which wraps `AppProvider` (fed by
 * `specConfiguration`) → `BrowserRouter` → `AppTheme` → `Header` → routed
 * content (`Home` at `/`, `Admin` at `/admin/*`) → `Footer`.
 *
 * @packageDocumentation
 */

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Box, CssBaseline, Toolbar } from "@mui/material";
import { AuthProvider, AuthPage, useAuth } from "@aetoskia/react-auth";
import Home from './Home';
import { Admin, AppProvider } from '@aetoskia/react-openapi';
import { specConfiguration } from './openapi-config';
import Header from './Header';
import Footer from './Footer';
import AppTheme from './shared-theme/AppTheme';

const authServer = import.meta.env.VITE_AUTH_BASE_URL;

const authConfig = {
  serverUrl: authServer,
  loginPath: "/login",
  registerPath: "/register",
  logoutPath: "/logout",
  mePath: "/me",
  introspectPath: "/introspect",
};

/**
 * Route guard: renders the split-screen `AuthPage` until a user is
 * authenticated, then renders the full application shell.
 *
 * @returns The login gate or the authenticated app.
 */
function LoginGate() {
  const auth = useAuth();
  const [mode, setMode] = React.useState("login");

  if (!auth.currentUser) {
    return (
      <AppTheme>
        <CssBaseline enableColorScheme />
        <AuthPage
          mode={mode}
          onBack={() => {}}
          onSwitchMode={() => setMode((m) => (m === "login" ? "register" : "login"))}
          login={auth.login}
          register={auth.register}
          loading={auth.loading}
          error={auth.error}
          currentUser={auth.currentUser}
        />
      </AppTheme>
    );
  }

  return (
    <AppProvider specConfiguration={specConfiguration}>
      <BrowserRouter>
        <AppTheme>
          <CssBaseline enableColorScheme />
          <Header />

          <Box sx={{ pb: 8 }}>
            <Toolbar />

            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/admin/*" element={<Admin basePath="/admin" />} />
            </Routes>
          </Box>

          <Footer />
        </AppTheme>
      </BrowserRouter>
    </AppProvider>
  );
}

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <AuthProvider authConfig={authConfig}>
    <LoginGate />
  </AuthProvider>
);