import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Box,
  useTheme,
  Typography
} from '@mui/material';
import {
  DashboardRounded as DashboardIcon,
  PointOfSale as CashierIcon,
  AllInbox as SupplierIcon,
  Store as InventoryIcon,
  School as TrainingIcon,
  AutoGraph as AnalyticsIcon,
  Restaurant as RestaurantIcon,
  CountertopsTwoTone as HostKitchenIcon,
  Queue as CreateKitchenIcon,
  Settings as SettingsIcon,
  Logout as LogoutIcon
} from '@mui/icons-material';

import authService from '../../services/authService'; // تأكد من المسار الصحيح

const menuItems = [
  { text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
  { text: 'Cashier', icon: <CashierIcon />, path: '/cashier' },
  { text: 'Supplier', icon: <SupplierIcon />, path: '/supplier' },
  { text: 'Inventory', icon: <InventoryIcon />, path: '/inventory' },
  { text: 'Training', icon: <TrainingIcon />, path: '/training' },
  { text: 'Analytics & Reporting', icon: <AnalyticsIcon />, path: '/analytics' },
  { text: 'Restaurant Profile', icon: <RestaurantIcon />, path: '/profile' },
  // { text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
  { text: 'Create Kitchen', icon: <CreateKitchenIcon />, path: '/create-kitchen' },
];

const bottomItems = [
  { text: 'Settings', icon: <SettingsIcon />, path: '/settings' },
  { text: 'Log Out', icon: <LogoutIcon />, path: '/login' },
];

const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();

  const handleLogout = async () => {
    const result = await authService.logout();

    localStorage.removeItem('token');
    localStorage.removeItem('refresh_token');

    navigate('/login', { replace: true });

    if (isMobile) onClose();
  };

  const renderListItems = (items) =>
    items.map((item, index) => {
      const isActive = location.pathname === item.path;

      return (
        <ListItem key={index} disablePadding sx={{ px: 1 }}>
          <Box
            onClick={() => {
              if (item.text === 'Log Out') {
                handleLogout();
              } else {
                navigate(item.path);
                if (isMobile) onClose();
              }
            }}
            sx={{
              display: 'flex',
              alignItems: 'center',
              width: '100%',
              borderRadius: '5px',
              backgroundColor: isActive ? '#F8F6F8' : 'transparent',
              px: 2,
              py: 1,
              cursor: 'pointer',
              transition: 'background-color 0.2s',
              '&:hover': {
                backgroundColor: '#fffcf9d5',
              },
            }}
          >
            <ListItemIcon
              sx={{
                color: isActive ? theme.palette.primary.main : '#A6ACB8',
                minWidth: 36,
              }}
            >
              {item.icon}
            </ListItemIcon>
            <ListItemText
              primary={item.text}
              primaryTypographyProps={{
                sx: {
                  color: isActive ? theme.palette.primary.main : '#61677F',
                  fontSize: '0.875rem',
                },
              }}
            />
          </Box>
        </ListItem>
      );
    });

  const drawer = (
    <Box
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        bgcolor: 'background.paper',
      }}
    >
      <Box
        sx={{
          px: 2,
          py: 1.5,
          borderColor: 'divider',
          position: 'sticky',
          top: 0,
          zIndex: 1,
          bgcolor: 'background.paper',
        }}
      >
        <Box display="flex" alignItems="center">
          <Box
            component="img"
            src="/image.png"
            alt="logo"
            sx={{
              width: 40,
              height: 40,
              objectFit: 'contain',
              mr: 1.5,
            }}
          />
          <Box display="flex" alignItems="center">
            <Typography
              variant="h6"
              sx={{
                fontWeight: 400,
                fontSize: '1.25rem',
                color: 'text.primary',
              }}
            >
              KITCH
            </Typography>
            <Typography
              variant="h6"
              sx={{
                fontWeight: 400,
                fontSize: '1.25rem',
                color: 'primary.main',
                ml: 0.5,
              }}
            >
              PLUS
            </Typography>
          </Box>
        </Box>
      </Box>

      <Box
        sx={{
          flex: 1,
          overflowY: 'auto',
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
          py: 1,
        }}
      >
        <List>{renderListItems(menuItems)}</List>
      </Box>

      <Box
        sx={{
          position: 'sticky',
          bottom: 0,
          bgcolor: 'background.paper',
          borderColor: 'divider',
        }}
      >
        <List>{renderListItems(bottomItems)}</List>
      </Box>
    </Box>
  );

  return (
    <Box
      component="nav"
      sx={{
        width: { xs: 0, sm: 0, md: drawerWidth },
        flexShrink: { xs: 0, sm: 0, md: 0 },
        boxShadow: 'none',
      }}
    >
      <Drawer
        variant={isMobile ? 'temporary' : 'persistent'}
        open={open}
        onClose={onClose}
        ModalProps={{ keepMounted: true }}
        sx={{
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
            borderRight: 'none',
            boxShadow: 'none',
          },
        }}
      >
        {drawer}
      </Drawer>
    </Box>
  );
};

export default Sidebar;