import { Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { Box, Button, Card, CardContent, Toolbar, Typography } from '@mui/material';
import PeopleIcon from '@mui/icons-material/People';
import { selectSidebarOpen } from './app/slices/uiSlice';
import type { RootState } from './app/store';
import ProtectedRoute, { RoleGuard } from './components/ProtectedRoute';
import Topbar from './components/Topbar';
import Sidebar from './components/Sidebar';
import LoginPage from './pages/auth/LoginPage';
import AuthCallback from './pages/auth/AuthCallback';
import Dashboard from './pages/dashboard/Dashboard';
import ProposalFormPage from './pages/proposals/form/ProposalFormPage';
import ProposalDetailPage from './pages/proposals/detail/ProposalDetailPage';
import ProposalListPage from './pages/proposals/list/ProposalListPage';
import AdminDashboard from './pages/admin/dashboard/AdminDashboard';
import AdminWorkspace from './pages/admin/workspace/AdminWorkspace';
import { DRAWER_WIDTH } from './constants';

export default function App() {
  const sidebarOpen = useSelector((state: RootState) => selectSidebarOpen(state));

  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/callback" element={<AuthCallback />} />

      <Route
        path="/*"
        element={
          <ProtectedRoute>
            <Box sx={{ display: 'flex' }}>
              <Topbar />
              <Sidebar />
              <Box
                component="main"
                sx={{
                  flexGrow: 1,
                  p: 1.25,
                  ml: sidebarOpen ? `${DRAWER_WIDTH}px` : 0,
                  transition: 'margin-left 250ms ease',
                  minHeight: '100vh',
                }}
              >
                <Toolbar sx={{ minHeight: 64 }} />
                <Routes>
                  <Route path="/" element={<Dashboard />} />
                  <Route path="/proposals" element={<ProposalListPage />} />
                  <Route path="/proposals/new" element={<ProposalFormPage />} />
                  <Route path="/proposals/:id" element={<ProposalDetailPage />} />

                  {/* Admin Routes */}
                  <Route path="/admin" element={<RoleGuard roles={['Admin', 'SysAdmin']}><AdminDashboard defaultStatus="InReview" /></RoleGuard>} />
                  <Route path="/admin/proposals" element={<RoleGuard roles={['Admin', 'SysAdmin']}><AdminDashboard /></RoleGuard>} />
                  <Route path="/admin/proposals/:id" element={<RoleGuard roles={['Admin', 'SysAdmin']}><AdminWorkspace /></RoleGuard>} />
                  <Route path="/admin/users" element={
                    <RoleGuard roles={['SysAdmin']}>
                      <Box sx={{ display: 'flex', justifyContent: 'center', pt: 6 }}>
                        <Card sx={{ maxWidth: 520, p: 4, textAlign: 'center' }}>
                          <CardContent>
                            <PeopleIcon sx={{ fontSize: 48, color: '#94A3B8', mb: 2 }} />
                            <Typography variant="h5" sx={{ mb: 1 }}>User Management</Typography>
                            <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
                              Users and roles are currently managed in AWS Cognito. Contact the system administrator to update access.
                            </Typography>
                            <Button
                              variant="outlined"
                              size="large"
                              href="https://us-east-1.console.aws.amazon.com/cognito/v2/idp/user-pools?region=us-east-1"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              Manage in Cognito
                            </Button>
                          </CardContent>
                        </Card>
                      </Box>
                    </RoleGuard>
                  } />

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