import React from "react";
import { Box, Container, CssBaseline } from "@mui/material";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";
import { ThemeProvider } from "@mui/material/styles";
import ExternalLinks from "./components/ExternalLinks";
import KeyboardShortcuts from "./components/KeyboardShortcuts";
import HomePage from "./pages/HomePage";
import BenchmarkGenerationPage from "./pages/BenchmarkGenerationPage";
import BenchmarkDisplayPage from "./pages/BenchmarkDisplayPage";
import BenchmarkEvaluationPage from "./pages/BenchmarkEvaluationPage";
import EvaluationDisplayPage from "./pages/EvaluationDisplayPage";

function App() {
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Container maxWidth="md">
          <ExternalLinks />
          <Box sx={{ pt: 12, pb: 4 }}>
            <KeyboardShortcuts />
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route
                path="/benchmark-generation"
                element={<BenchmarkGenerationPage />}
              />
              <Route
                path="/benchmark-display"
                element={<BenchmarkDisplayPage />}
              />
              <Route
                path="/benchmark-evaluation"
                element={<BenchmarkEvaluationPage />}
              />
              <Route
                path="/evaluation-display"
                element={<EvaluationDisplayPage />}
              />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Box>
        </Container>
      </Router>
    </ThemeProvider>
  );
}

export default App;