import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import MainLayout from "./layouts/MainLayout";
import FullWidthLayout from "./layouts/FullWidthLayout";
import Home from "./pages/Home";
import NewGame from "./pages/NewGame";
import PlayGame from "./pages/PlayGame";
import GameOver from "./pages/GameOver";
import History from "./pages/History";
import Players from "./pages/Players";
import Settings from "./pages/Settings";
import Statistics from "./pages/Stats";
import { useAppStore } from "./stores/appStore";

function App() {
  const { loadSettings } = useAppStore();

  useEffect(() => {
    loadSettings();
  }, [loadSettings]);

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<MainLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/history" element={<History />} />
          <Route path="/players" element={<Players />} />
          <Route path="/stats" element={<Statistics />} />
          <Route path="/settings" element={<Settings />} />
        </Route>
        <Route element={<FullWidthLayout />}>
          <Route path="/new/:gameId" element={<NewGame />} />
          <Route path="/play/:sessionId" element={<PlayGame />} />
          <Route path="/gameover/:sessionId" element={<GameOver />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;