import React from 'react';
import { Navigate, Outlet, useNavigate } from 'react-router-dom';
import { 
  AppBar, 
  Toolbar, 
  Typography, 
  Button, 
  Box, 
  Container,
  List,
  ListItem,
  Drawer,
  Divider
} from '@mui/material';
import {
  Dashboard as DashboardIcon,
  People as PeopleIcon,
  Assignment as TasksIcon,
  Person as ProfileIcon
} from '@mui/icons-material';
import { useAuth } from '../../contexts/AuthContext';

export const AuthLayout = () => {
  const { isAuthenticated, user, logout } = useAuth();
  const navigate = useNavigate();

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar 
        position="fixed" 
        sx={{ 
          zIndex: (theme) => theme.zIndex.drawer + 1,
          backgroundColor: 'background.paper',
          boxShadow: 'none',
          borderBottom: '1px solid',
          borderColor: 'divider'
        }}
      >
        <Toolbar>
          <Typography variant="h5" component="div" sx={{ flexGrow: 1, color: 'text.primary', fontWeight: 600 }}>
            Zod Alkhair | API Testting client
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            {user && (
              <Typography variant="body1" sx={{ color: 'text.primary' }}>
                {user.firstName} {user.lastName}
              </Typography>
            )}
            <Button 
              variant="outlined" 
              color="primary" 
              onClick={logout}
              size="small"
            >
              Logout
            </Button>
          </Box>
        </Toolbar>
      </AppBar>

      <Drawer
        variant="permanent"
        sx={{
          width: 280,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: 280,
            boxSizing: 'border-box',
            marginTop: '64px',
            backgroundColor: 'background.paper',
            borderRight: '1px solid',
            borderColor: 'divider',
            padding: 2
          },
        }}
      >
        <Box sx={{ overflow: 'auto' }}>
          <List>
            <ListItem component="div">
              <Button
                fullWidth
                sx={{ 
                  justifyContent: 'flex-start', 
                  pl: 2,
                  py: 1.5,
                  borderRadius: 2,
                  color: 'text.primary',
                  '&:hover': {
                    backgroundColor: 'primary.light',
                    color: 'primary.contrastText'
                  }
                }}
                onClick={() => navigate('/dashboard')}
                startIcon={<DashboardIcon />}
              >
                Dashboard
              </Button>
            </ListItem>
            <ListItem component="div">
              <Button
                fullWidth
                sx={{ 
                  justifyContent: 'flex-start', 
                  pl: 2,
                  py: 1.5,
                  borderRadius: 2,
                  color: 'text.primary',
                  '&:hover': {
                    backgroundColor: 'primary.light',
                    color: 'primary.contrastText'
                  }
                }}
                onClick={() => navigate('/juniors')}
                startIcon={<PeopleIcon />}
              >
                Juniors
              </Button>
            </ListItem>
            <ListItem component="div">
              <Button
                fullWidth
                sx={{ 
                  justifyContent: 'flex-start', 
                  pl: 2,
                  py: 1.5,
                  borderRadius: 2,
                  color: 'text.primary',
                  '&:hover': {
                    backgroundColor: 'primary.light',
                    color: 'primary.contrastText'
                  }
                }}
                onClick={() => navigate('/tasks')}
                startIcon={<TasksIcon />}
              >
                Tasks
              </Button>
            </ListItem>
          </List>
          <Divider />
          <List>
            <ListItem component="div">
              <Button
                fullWidth
                sx={{ 
                  justifyContent: 'flex-start', 
                  pl: 2,
                  py: 1.5,
                  borderRadius: 2,
                  color: 'text.primary',
                  '&:hover': {
                    backgroundColor: 'primary.light',
                    color: 'primary.contrastText'
                  }
                }}
                onClick={() => navigate('/profile')}
                startIcon={<ProfileIcon />}
              >
                Profile
              </Button>
            </ListItem>
          </List>
        </Box>
      </Drawer>

      <Container component="main" sx={{ flexGrow: 1, p: 4, marginLeft: '280px', marginTop: '64px' }}>
        <Outlet />
      </Container>
    </Box>
  );
};