import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  Divider,
  Drawer,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  styled,
  Collapse,
  useTheme
} from '@mui/material';
import {
  ChevronLeft,
  ChevronRight,
  ExpandMore,
  ExpandLess,
  Description as DescriptionIcon,
  Error as ErrorIcon,
  Storage as StorageIcon,
  SwapHoriz as SwapHorizIcon
} from '@mui/icons-material';

const drawerWidth = 220;
const collapsedWidth = 60;

const Sidebar = ({ onSidebarToggle }) => {
  const theme = useTheme();
  const [collapsed, setCollapsed] = useState(true);
  const [openTransaction, setOpenTransaction] = useState(false);
  const navigate = useNavigate();

  const handleToggle = () => {
    setCollapsed(!collapsed);
    if (onSidebarToggle) {
      onSidebarToggle(!collapsed);
    }
  };

  const handleTransactionToggle = () => {
    setOpenTransaction(!openTransaction);
  };

  const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
  }));

  return (
    <>
      <Drawer
        variant="permanent"
        sx={{
          width: collapsed ? collapsedWidth : drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: collapsed ? collapsedWidth : drawerWidth,
            boxSizing: 'border-box',
            backgroundColor: theme.palette.grey[200], // Consistent with theme
            borderRight: '1px solid rgba(0, 0, 0, 0.12)',
            transition: theme.transitions.create('width', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.enteringScreen,
            }),
            overflowX: 'hidden',
            height: '100vh',
            position: 'relative'
          },
        }}
      >
        <DrawerHeader>
          <IconButton onClick={handleToggle} size="small">
            {collapsed ? <ChevronRight /> : <ChevronLeft />}
          </IconButton>
        </DrawerHeader>
        <Divider />
        <List>
          {/* Transaction with submenus */}
          <ListItem disablePadding>
            <ListItemButton
              onClick={handleTransactionToggle}
              sx={{
                minHeight: 48,
                justifyContent: collapsed ? 'center' : 'initial',
                px: 2.5,
                '&:hover': {
                  backgroundColor: 'rgba(0, 0, 0, 0.04)'
                }
              }}
            >
              <ListItemIcon
                sx={{
                  minWidth: 0,
                  mr: collapsed ? 'auto' : 3,
                  justifyContent: 'center',
                  color: 'inherit'
                }}
              >
                <SwapHorizIcon />
              </ListItemIcon>
              {!collapsed && (
                <>
                  <ListItemText primary="Transaction" />
                  {openTransaction ? <ExpandLess /> : <ExpandMore />}
                </>
              )}
            </ListItemButton>
          </ListItem>
          
          {!collapsed && (
            <Collapse in={openTransaction} timeout="auto" unmountOnExit>
              <List component="div" disablePadding sx={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
                <ListItemButton
                  sx={{ pl: 4 }}
                  onClick={() => navigate('/admin/regform')}
                >
                  <ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
                    <DescriptionIcon />
                  </ListItemIcon>
                  <ListItemText primary="Regform" />
                </ListItemButton>
                <ListItemButton
                  sx={{ pl: 4 }}
                  onClick={() => navigate('/admin/error404')}
                >
                  <ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
                    <ErrorIcon />
                  </ListItemIcon>
                  <ListItemText primary="Additional container" />
                </ListItemButton>
              </List>
            </Collapse>
          )}

          {/* Masters (single item) */}
          <ListItem disablePadding>
            <ListItemButton
              onClick={() => navigate('/admin/masters')}
              sx={{
                minHeight: 48,
                justifyContent: collapsed ? 'center' : 'initial',
                px: 2.5,
                '&:hover': {
                  backgroundColor: 'rgba(0, 0, 0, 0.04)'
                }
              }}
            >
              <ListItemIcon
                sx={{
                  minWidth: 0,
                  mr: collapsed ? 'auto' : 3,
                  justifyContent: 'center',
                  color: 'inherit'
                }}
              >
                <StorageIcon />
              </ListItemIcon>
              {!collapsed && (
                <ListItemText primary="Masters" />
              )}
            </ListItemButton>
          </ListItem>
        </List>
      </Drawer>
      
      {/* Main content spacer */}
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: 3,
          width: `calc(100% - ${collapsed ? collapsedWidth : drawerWidth}px)`,
          marginLeft: `${collapsed ? collapsedWidth : drawerWidth}px`,
          transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >
        {/* Your main content goes here */}
      </Box>
    </>
  );
};

export default Sidebar;