import { Drawer, List, ListItem, ListItemText, ListItemIcon, Avatar, Typography, Box, useMediaQuery } from '@mui/material';
import CategoryIcon from '@mui/icons-material/Category';
import PeopleIcon from '@mui/icons-material/People';
import InventoryIcon from '@mui/icons-material/Inventory';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';

import { useState } from 'react';

const menuOptions = {
  public: [
    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
    { text: 'Categories', icon: <CategoryIcon /> },
    { text: 'Clients', icon: <PeopleIcon /> },
    { text: 'Products', icon: <InventoryIcon /> },
    { text: 'Providers', icon: <LocalShippingIcon /> },
    { text: 'Logout', icon: <ExitToAppIcon /> },
  ],
  restricted: [],
  private: [
    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
    { text: 'Categories', icon: <CategoryIcon /> },
    { text: 'Clients', icon: <PeopleIcon /> },
    { text: 'Products', icon: <InventoryIcon /> },
    { text: 'Providers', icon: <LocalShippingIcon /> },
    { text: 'Logout', icon: <ExitToAppIcon /> },
  ],
};

export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
  const isMobile = useMediaQuery('(max-width:900px)');
  const items = menuOptions[zone];

  return (
    <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
      paper: {
        sx: {
          backgroundColor: '#40120EFF',
          width: isMobile ? '100vw' : 250,
          color: '#DFCCBCFF'
        },
      },
    }}>
      <Box textAlign="center" p={3}>
        <Avatar
          src="/favicon.png"
          alt="User"
          sx={{ width: 64, height: 64, mx: 'auto', mb: 1 }}
        />
        <Typography variant="subtitle1" fontWeight={600}>Fendi Casa</Typography>
        <Typography variant="body2">Administrator</Typography>
      </Box>
      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 2 }}>
        {items.map(({ text, icon }, index) => (
          <ListItem key={index} onClick={() => {
            onClose(); // Close drawer
            onSelect?.(text); // Notify parent of selected item
          }}>

            <ListItemIcon sx={{ color: '#DFCCBCFF' }}>{icon}</ListItemIcon>
            <ListItemText
              primary={text}
              slotProps={{
                primary: {
                  sx: {
                    color: '#DFCCBCFF',
                    fontWeight: 'medium',
                  },
                },
              }}
            />
          </ListItem>
        ))}
      </List>
    </Drawer>
  );
}
