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 Home from './Home';
import Admin from '../react-openapi/Admin';
import { Buffer } from 'buffer';
import process from 'process';
import { AuthProvider } from "../react-auth";
import Header from './Header';
import Footer from './Footer';
import AppTheme from './AppTheme';

// Polyfill Node.js globals for browser environment (needed by SwaggerParser)
window.Buffer = Buffer;
window.process = process;

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;

root.render(
  <BrowserRouter>
    <AuthProvider authBaseUrl={AUTH_BASE}>
      <AppTheme>
        <CssBaseline enableColorScheme />
        <Header />

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

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

        <Footer />
      </AppTheme>
    </AuthProvider>
  </BrowserRouter>
);