import React from 'react';
import { ThemeProvider, CssBaseline, AppBar, Toolbar, Typography, Box } from '@mui/material';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import theme from './theme';
import CreateSession from './pages/CreateSession';
import SessionPage from './pages/SessionPage';
import LoginPage from './pages/LoginPage'; // Import LoginPage
import PrivateRoute from './components/PrivateRoute'; // Import PrivateRoute

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
          <AppBar position="static">
            <Toolbar>
              <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
                <img src="/logo-white.svg" alt="Unisono Logo" style={{ height: 24, marginRight: 8 }} />
                <Typography variant="h6" component="div">
                  Unisono
                </Typography>
              </Box>
            </Toolbar>
          </AppBar>
          <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
            <Routes>
              <Route path="/login" element={<LoginPage />} /> {/* Add login page route */}
              <Route
                path="/"
                element={
                  <PrivateRoute>
                    <CreateSession />
                  </PrivateRoute>
                }
              />
              <Route
                path="/session/:sessionId"
                element={
                  <PrivateRoute>
                    <SessionPage />
                  </PrivateRoute>
                }
              />
            </Routes>
          </Box>
        </Box>
      </Router>
    </ThemeProvider>
  );
}

export default App;
