import React from 'react';
import { Box, Paper, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, Button, Chip } from '@mui/material';
import {
    Dashboard as DashboardIcon,
    Lock as LockIcon,
    Public as PublicIcon,
    SupervisorAccount as SupervisorAccountIcon,
    ShoppingCart as ShoppingCartIcon,
    Star as StarIcon
} from '@mui/icons-material';

const Layout = ({ activeTab, onTabChange, children }) => {
    const menuItems = [
        { id: 'dashboard', label: 'Dashboard', icon: <DashboardIcon sx={{ fontSize: 18 }} /> },
        { id: 'global', label: 'Global Rules', icon: <PublicIcon sx={{ fontSize: 18 }} /> },
        { id: 'role', label: 'Role Based', icon: <SupervisorAccountIcon sx={{ fontSize: 18 }} /> },
        { id: 'country', label: 'Country Based', icon: <PublicIcon sx={{ fontSize: 18 }} /> },
        { id: 'bulk-role', label: 'Bulk Role', icon: <LockIcon sx={{ fontSize: 18 }} />, pro: true },
        { id: 'bulk-country', label: 'Bulk Country', icon: <LockIcon sx={{ fontSize: 18 }} />, pro: true },
        { id: 'order', label: 'Order Based', icon: <ShoppingCartIcon sx={{ fontSize: 18 }} />, pro: true },
    ];

    return (
        <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default', ml: -2 }}>
            {/* Sidebar */}
            <Box
                sx={{
                    width: 260,
                    flexShrink: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    bgcolor: 'background.default', // Use background color instead of white for minimalist feel
                    pt: 4,
                }}
            >
                <Box sx={{ px: 4, mb: 4, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                    <Typography
                        variant="h6"
                        sx={{
                            color: 'text.primary',
                            fontWeight: 900,
                            fontSize: '1.25rem',
                            letterSpacing: '-0.04em',
                            display: 'flex',
                            alignItems: 'center',
                            gap: 1.5
                        }}
                    >
                        <Box sx={{ width: 12, height: 12, bgcolor: 'primary.main', borderRadius: '3px', boxShadow: '0 2px 4px rgba(79, 70, 229, 0.3)' }} />
                        Store Restrictions
                    </Typography>
                    <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, ml: 3.5, opacity: 0.6, letterSpacing: '0.05em' }}>
                        ADMIN CONSOLE
                    </Typography>
                </Box>

                <List component="nav" sx={{ px: 2 }}>
                    {menuItems.map((item) => (
                        <ListItem key={item.id} disablePadding sx={{ mb: 0.25 }}>
                            <ListItemButton
                                selected={activeTab === item.id}
                                onClick={() => onTabChange(item.id)}
                                sx={{
                                    py: 1,
                                    px: 2,
                                    borderRadius: '8px',
                                    position: 'relative',
                                    transition: 'all 0.1s ease',
                                    '&.Mui-selected': {
                                        bgcolor: 'rgba(79, 70, 229, 0.08)',
                                        color: 'primary.main',
                                        '& .MuiListItemIcon-root': { color: 'primary.main' },
                                        '&::before': {
                                            content: '""',
                                            position: 'absolute',
                                            left: -8, // Move it further out to align with the sidebar edge
                                            top: '15%',
                                            bottom: '15%',
                                            width: 4,
                                            bgcolor: 'primary.main',
                                            borderRadius: '0 4px 4px 0',
                                            boxShadow: '2px 0 12px rgba(79, 70, 229, 0.4)',
                                        },
                                        '&:hover': { bgcolor: 'rgba(79, 70, 229, 0.12)' },
                                    },
                                    '&:hover': {
                                        bgcolor: 'rgba(0,0,0,0.02)',
                                    }
                                }}
                            >
                                <ListItemIcon sx={{ minWidth: 32, color: activeTab === item.id ? 'primary.main' : 'text.secondary', opacity: activeTab === item.id ? 1 : 0.7 }}>
                                    {item.icon}
                                </ListItemIcon>
                                <ListItemText
                                    primary={item.label}
                                    primaryTypographyProps={{
                                        fontSize: '0.8125rem',
                                        fontWeight: activeTab === item.id ? 600 : 500,
                                    }}
                                />
                                {item.pro && (
                                    <Box
                                        sx={{
                                            px: 0.75,
                                            py: 0.25,
                                            fontSize: '9px',
                                            fontWeight: 700,
                                            bgcolor: activeTab === item.id ? 'primary.main' : 'rgba(0,0,0,0.05)',
                                            color: activeTab === item.id ? 'white' : 'text.secondary',
                                            borderRadius: '4px',
                                            letterSpacing: '0.02em'
                                        }}
                                    >
                                        PRO
                                    </Box>
                                )}
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>

                <Box sx={{ p: 2, mt: 'auto', mb: 4 }}>
                    <Paper
                        elevation={0}
                        sx={{
                            p: 2,
                            bgcolor: 'secondary.dark',
                            color: 'white',
                            borderRadius: '12px',
                            position: 'relative',
                            overflow: 'hidden',
                        }}
                    >
                        <Box sx={{ position: 'relative', zIndex: 1 }}>
                            <Typography variant="body2" sx={{ fontWeight: 700, mb: 0.5 }}>Pro Account</Typography>
                            <Typography variant="caption" sx={{ display: 'block', mb: 1.5, opacity: 0.7, lineHeight: 1.3 }}>Access advanced features and premium support.</Typography>
                            <Button
                                fullWidth
                                size="small"
                                variant="contained"
                                color="primary"
                                href="https://woocommerce.com/products/conditional-store-restrictions/"
                                target="_blank"
                                sx={{ py: 1, fontSize: '11px', fontWeight: 800, borderRadius: '8px' }}
                            >
                                Get Pro Version
                            </Button>
                        </Box>
                        {/* Decorative background element */}
                        <Box sx={{ position: 'absolute', top: -10, right: -10, width: 60, height: 60, bgcolor: 'rgba(255,255,255,0.05)', borderRadius: '50%' }} />
                    </Paper>
                </Box>
            </Box>

            {/* Main Content */}
            <Box sx={{ flex: 1, minWidth: 0, px: 8, py: 6, height: '100vh', overflowY: 'auto' }}>
                {children}
            </Box>
        </Box>
    );
};

export default Layout;
