// src/App.tsx
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { useAuth } from './contexts/AuthContext'
import Layout from './components/Layout'
import Home from './pages/Home'
import LoginPage from './pages/Login'
import RegisterCharacter from './pages/RegisterCharacter'
import CharacterList from './pages/CharacterList'
import CharacterHomeworks from './pages/CharacterHomeworks'
import Signup from './pages/Signup'

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
})

function App() {
    const { isLoggedIn } = useAuth()

  return (
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <Router>
          <Layout key={isLoggedIn ? 'in' : 'out'}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/login" element={<LoginPage />} />
              <Route path="/characters/register" element={<RegisterCharacter />} />
              <Route path="/characters" element={<CharacterList />} />
              <Route path="/characters/:characterId/homeworks" element={<CharacterHomeworks />} />
              <Route path="/signup" element={<Signup />} />
            </Routes>
          </Layout>
        </Router>
      </ThemeProvider>
  )
}

export default App