import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { useAuth } from './auth/useAuth';
import LoginPage from './components/LoginPage';
import AppShell from './components/AppShell';
import SectionLayout from './components/SectionLayout';
import ArtikelUebersichtPage from './pages/artikel/index';
import ArtikelKategorienPage from './pages/artikel/kategorien';
import ArtikelLagerPage from './pages/artikel/lager';
import LieferungPage from './pages/lieferung/index';
import AuftragAktivePage from './pages/auftrag/index';
import AuftragArchivPage from './pages/auftrag/archiv';
import KundeListePage from './pages/kunde/index';
import KundeGruppenPage from './pages/kunde/gruppen';
import KundeKontaktePage from './pages/kunde/kontakte';
import InfosPage from './pages/infos/index';

export default function App() {
  const { status } = useAuth();

  if (status === 'loading') {
    return (
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '100vh',
          bgcolor: 'background.default',
        }}
      >
        <CircularProgress />
      </Box>
    );
  }

  if (status !== 'authed') {
    return <LoginPage />;
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<AppShell />}>
          <Route index element={<Navigate to="/artikel" replace />} />
          <Route path="lieferung" element={<LieferungPage />} />
          <Route path="infos" element={<InfosPage />} />
          <Route path="artikel" element={<SectionLayout sectionPath="/artikel" />}>
            <Route index element={<ArtikelUebersichtPage />} />
            <Route path="kategorien" element={<ArtikelKategorienPage />} />
            <Route path="lager" element={<ArtikelLagerPage />} />
          </Route>
          <Route path="auftrag" element={<SectionLayout sectionPath="/auftrag" />}>
            <Route index element={<AuftragAktivePage />} />
            <Route path="archiv" element={<AuftragArchivPage />} />
          </Route>
          <Route path="kunde" element={<SectionLayout sectionPath="/kunde" />}>
            <Route index element={<KundeListePage />} />
            <Route path="gruppen" element={<KundeGruppenPage />} />
            <Route path="kontakte" element={<KundeKontaktePage />} />
          </Route>
          <Route path="*" element={<Navigate to="/artikel" replace />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}