import React from "react";
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { Box, CssBaseline } from "@mui/material";
import Navigation from "./components/Navigation/Navigation";
import LeaderboardPage from "./pages/LeaderboardPage/LeaderboardPage";
import HowToSubmitPage from "./pages/HowToSubmitPage/HowToSubmitPage";
import Footer from "./components/Footer/Footer";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";

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

  return (
    <div
      className="App"
      style={{
        height: "100%",
        width: "100%",
        WebkitOverflowScrolling: "touch",
        overflow: "auto",
      }}
    >
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Router>
          <Box
            sx={{
              minHeight: "100vh",
              display: "flex",
              flexDirection: "column",
              bgcolor: "background.default",
              color: "text.primary",
            }}
          >
            <Navigation onToggleTheme={toggleTheme} mode={mode} />
            <Box
              sx={{
                flex: 1,
                display: "flex",
                flexDirection: "column",
                width: "100%",
                px: 4,
                pb: 4,
              }}
            >
              <Routes>
                <Route path="/" element={<LeaderboardPage />} />
                <Route path="/submit" element={<HowToSubmitPage />} />
              </Routes>
            </Box>
            <Footer />
          </Box>
        </Router>
      </ThemeProvider>
    </div>
  );
}

export default App;