import * as React from 'react';
import {
  Box,
  Drawer,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  CssBaseline,
  IconButton,
  Tooltip,
} from '@mui/material';
import TableViewIcon from '@mui/icons-material/TableView';
import DashboardIcon from '@mui/icons-material/Dashboard';
import LogoutIcon from '@mui/icons-material/Logout';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { ResourceConfig } from '../types/config';
import { useLocation, useNavigate } from 'react-router-dom';

const drawerWidth = 240;
const collapsedWidth = 64;

interface AdminLayoutProps {
  children: React.ReactNode;
  onSelectResource: (resourceName: string | null) => void;
  onLogout: () => void;
  username?: string;
  resources: ResourceConfig[];
}

export default function AdminLayout({
  children,
  onSelectResource,
  onLogout,
  username,
  resources,
}: AdminLayoutProps) {
  const location = useLocation();
  const navigate = useNavigate();
  const [isCollapsed, setIsCollapsed] = React.useState(false);
  const activeResourceName = location.pathname.split('/')[1] || null;

  // AUTO-TOGGLE LOGIC
  React.useEffect(() => {
    if (location.pathname === '/' || location.pathname === '') {
      setIsCollapsed(false);
    } else {
      setIsCollapsed(true);
    }
  }, [location.pathname]);

  const currentWidth = isCollapsed ? collapsedWidth : drawerWidth;

  const handleToggle = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar 
        position="fixed" 
        sx={{ 
            zIndex: (theme) => theme.zIndex.drawer + 1,
            backdropFilter: 'blur(8px)',
            backgroundColor: 'rgba(255, 255, 255, 0.8)', // Adjust based on theme in real app
            color: 'text.primary',
            boxShadow: 'none',
            borderBottom: '1px solid',
            borderColor: 'divider',
        }}
      >
        <Toolbar>
          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
            Admin Panel
          </Typography>
          <Typography variant="body1" sx={{ mr: 2, fontWeight: 500 }}>
            {username}
          </Typography>
          <Tooltip title="Logout">
            <IconButton color="inherit" onClick={onLogout}>
                <LogoutIcon />
            </IconButton>
          </Tooltip>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        sx={{
          width: currentWidth,
          flexShrink: 0,
          whiteSpace: 'nowrap',
          boxSizing: 'border-box',
          // TRANSITION
          transition: (theme) => theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
          }),
          [`& .MuiDrawer-paper`]: { 
            width: currentWidth, 
            boxSizing: 'border-box',
            overflowX: 'hidden',
            transition: (theme) => theme.transitions.create('width', {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen,
            }),
          },
        }}
      >
        <Toolbar />
        <Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
          <Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}>
            <IconButton onClick={handleToggle}>
                {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </Box>
          <Divider />
          <List>
            <ListItem disablePadding>
              <Tooltip title={isCollapsed ? "Dashboard" : ""} placement="right">
                <ListItemButton 
                    selected={location.pathname === '/'}
                    onClick={() => navigate('/')}
                    sx={{
                        minHeight: 48,
                        justifyContent: isCollapsed ? 'center' : 'initial',
                        px: 2.5,
                    }}
                >
                    <ListItemIcon sx={{
                        minWidth: 0,
                        mr: isCollapsed ? 0 : 3,
                        justifyContent: 'center',
                    }}>
                    <DashboardIcon color={location.pathname === '/' ? 'primary' : 'inherit'} />
                    </ListItemIcon>
                    {!isCollapsed && <ListItemText primary="Dashboard" />}
                </ListItemButton>
              </Tooltip>
            </ListItem>
          </List>
          <Divider />
          <List sx={{ flexGrow: 1 }}>
            {resources.map((res) => (
              <ListItem key={res.name} disablePadding>
                <Tooltip title={isCollapsed ? res.pluralLabel : ""} placement="right">
                    <ListItemButton 
                    selected={activeResourceName === res.name}
                    onClick={() => onSelectResource(res.name)}
                    sx={{
                        minHeight: 48,
                        justifyContent: isCollapsed ? 'center' : 'initial',
                        px: 2.5,
                    }}
                    >
                    <ListItemIcon sx={{
                        minWidth: 0,
                        mr: isCollapsed ? 0 : 3,
                        justifyContent: 'center',
                    }}>
                        <TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} />
                    </ListItemIcon>
                    {!isCollapsed && <ListItemText primary={res.pluralLabel} />}
                    </ListItemButton>
                </Tooltip>
              </ListItem>
            ))}
          </List>
        </Box>
      </Drawer>
      <Box 
        component="main" 
        sx={{ 
            flexGrow: 1, 
            p: 3,
            transition: (theme) => theme.transitions.create(['margin', 'width'], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen,
            }),
        }}
      >
        <Toolbar />
        {children}
      </Box>
    </Box>
  );
}