// frontend/src/App.tsx

import { useEffect, useState } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Layout from './components/Layout/Layout';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
import Courts from './pages/Courts';
import Tournament from './pages/Tournament';

export default function App() {
  const [darkMode, setDarkMode] = useState<boolean>(() => localStorage.theme === 'dark');

  useEffect(() => {
    const root = window.document.documentElement;
    const darkColor = '#09090b';
    const lightColor = '#fafafa';

    if (darkMode) {
      root.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      root.style.backgroundColor = darkColor;
    } else {
      root.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      root.style.backgroundColor = lightColor;
    }
  }, [darkMode]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />

        {/* Main App Layout */}
        <Route element={<Layout darkMode={darkMode} setDarkMode={setDarkMode} />}>
          <Route path="/" element={<Dashboard />} />
          <Route path="/courts" element={<Courts />} />
          <Route path="/tournaments/:id" element={<Tournament />} />
        </Route>

        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}