import React from 'react';
import {
  Box,
  Flex,
  VStack,
  HStack,
  IconButton,
  Button,
  Icon,
  Text,
  Badge,
  Divider,
  useColorModeValue,
  Collapse,
  Tooltip,
} from '@chakra-ui/react';
import {
  FiHome,
  FiBox,
  FiShoppingBag,
  FiRefreshCw,
  FiSettings,
  FiZap,
  FiLayers,
  FiTruck,
  FiAlertCircle,
  FiHelpCircle,
  FiChevronLeft,
  FiChevronRight,
  FiTag,
  FiDatabase,
  FiTool,
} from 'react-icons/fi';

// Kaufland theme colors
const theme = {
  primary: '#E10915',    // Kaufland Red
  secondary: '#003C82',  // Dark Blue
  accent: '#0059C4',     // Light Blue
  gray: '#757575'
};

const NavButton = ({ icon, label, isActive, onClick, badge, isCollapsed, isPremium, disabled }) => (
  <Tooltip
    label={isPremium ? "Available in Premium version" : disabled ? "Coming soon" : ""}
    isDisabled={!isPremium && !disabled}
    placement="right"
  >
    <Button
      variant="ghost"
      justifyContent={isCollapsed ? 'center' : 'start'}
      width="full"
      height="44px"
      px={isCollapsed ? 2 : 4}
      color={isActive ? theme.primary : 'gray.600'}
      bg={isActive ? 'red.50' : 'transparent'}
      _hover={{
        bg: !disabled && !isPremium ? 'red.50' : 'transparent',
      }}
      onClick={onClick}
      isDisabled={disabled || isPremium}
      opacity={disabled || isPremium ? 0.6 : 1}
      cursor={disabled || isPremium ? 'not-allowed' : 'pointer'}
    >
      <HStack spacing={3} width="full">
        <Icon as={icon} boxSize={5} />
        {!isCollapsed && (
          <>
            <Text fontWeight="medium" flex="1">{label}</Text>
            {badge && (
              <Badge
                colorScheme={badge.color}
                rounded="full"
                px={2}
              >
                {badge.content}
              </Badge>
            )}
            {isPremium && (
              <Badge
                colorScheme="purple"
                variant="solid"
                rounded="full"
                fontSize="xs"
              >
                PRO
              </Badge>
            )}
          </>
        )}
      </HStack>
    </Button>
  </Tooltip>
);

const NavGroup = ({ title, children, isCollapsed }) => (
  <Box mb={4}>
    {!isCollapsed && (
      <Text
        px={4}
        fontSize="xs"
        fontWeight="semibold"
        textTransform="uppercase"
        color="gray.500"
        mb={2}
      >
        {title}
      </Text>
    )}
    <VStack spacing={1} align="stretch">
      {children}
    </VStack>
  </Box>
);

const ConnectionStatus = ({ isConnected, isCollapsed }) => (
  <HStack
    spacing={2}
    px={isCollapsed ? 2 : 4}
    py={2}
    bg={useColorModeValue(isConnected ? 'green.50' : 'red.50', 'gray.700')}
    rounded="md"
    justify={isCollapsed ? 'center' : 'start'}
  >
    <Icon
      as={FiZap}
      color={isConnected ? 'green.500' : theme.primary}
    />
    {!isCollapsed && (
      <Text
        fontSize="sm"
        fontWeight="medium"
        color={isConnected ? 'green.700' : 'red.700'}
      >
        {isConnected ? 'Connected to Kaufland DE' : 'Not Connected'}
      </Text>
    )}
  </HStack>
);

const Layout = ({ children, currentPage, onNavigate }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(false);

  return (
    <Flex minH="calc(100vh - 32px)" bg={useColorModeValue('gray.50', 'gray.900')}>
      {/* Sidebar */}
      <Box
        w={isCollapsed ? '60px' : '240px'}
        bg="white"
        borderRightWidth={1}
        borderColor="gray.200"
        position="relative"
        transition="width 0.2s"
      >
        <VStack spacing={4} p={4} align="stretch">
          {/* Header */}
          <Flex justify="space-between" align="center" mb={2}>
            {!isCollapsed && (
              <Text
                fontSize="lg"
                fontWeight="bold"
                color={theme.primary}
              >
                EasyConnect for Kaufland
              </Text>
            )}
            <IconButton
              icon={isCollapsed ? <FiChevronRight /> : <FiChevronLeft />}
              size="sm"
              onClick={() => setIsCollapsed(!isCollapsed)}
              position={isCollapsed ? 'relative' : 'absolute'}
              right={isCollapsed ? 0 : 2}
              variant="ghost"
            />
          </Flex>

          <ConnectionStatus isConnected={true} isCollapsed={isCollapsed} />

          <Divider />

          {/* Navigation Groups */}
          <NavGroup title="Dashboard" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiHome}
              label="Overview"
              isActive={currentPage === 'dashboard'}
              onClick={() => onNavigate('dashboard')}
              isCollapsed={isCollapsed}
            />
          </NavGroup>

          <NavGroup title="Products" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiBox}
              label="All Products"
              isActive={currentPage === 'products'}
              onClick={() => onNavigate('products')}
              badge={{ content: '156', color: 'blue' }}
              isCollapsed={isCollapsed}
            />
            <NavButton
              icon={FiLayers}
              label="Categories"
              isActive={currentPage === 'categories'}
              onClick={() => onNavigate('categories')}
              isCollapsed={isCollapsed}
              isPremium
            />
            <NavButton
              icon={FiTag}
              label="Attributes"
              isActive={currentPage === 'attributes'}
              onClick={() => onNavigate('attributes')}
              isCollapsed={isCollapsed}
              isPremium
            />
          </NavGroup>

          <NavGroup title="Orders" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiShoppingBag}
              label="All Orders"
              isActive={currentPage === 'orders'}
              onClick={() => onNavigate('orders')}
              badge={{ content: '28', color: 'green' }}
              isCollapsed={isCollapsed}
              isPremium
            />
            <NavButton
              icon={FiTruck}
              label="Shipping"
              isActive={currentPage === 'shipping'}
              onClick={() => onNavigate('shipping')}
              isCollapsed={isCollapsed}
              isPremium
            />
          </NavGroup>

          <NavGroup title="Synchronization" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiRefreshCw}
              label="Sync Queue"
              isActive={currentPage === 'sync'}
              onClick={() => onNavigate('sync')}
              badge={{ content: '12', color: 'orange' }}
              isCollapsed={isCollapsed}
              isPremium
            />
            <NavButton
              icon={FiDatabase}
              label="Sync History"
              isActive={currentPage === 'sync-history'}
              onClick={() => onNavigate('sync-history')}
              isCollapsed={isCollapsed}
              isPremium
            />
          </NavGroup>

          <NavGroup title="System" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiSettings}
              label="Settings"
              isActive={currentPage === 'settings'}
              onClick={() => onNavigate('settings')}
              isCollapsed={isCollapsed}
            />
            <NavButton
              icon={FiTool}
              label="Tools"
              isActive={currentPage === 'tools'}
              onClick={() => onNavigate('tools')}
              isCollapsed={isCollapsed}
              isPremium
            />
            <NavButton
              icon={FiAlertCircle}
              label="Logs"
              isActive={currentPage === 'logs'}
              onClick={() => onNavigate('logs')}
              isCollapsed={isCollapsed}
              isPremium
            />
          </NavGroup>

          <NavGroup title="Help" isCollapsed={isCollapsed}>
            <NavButton
              icon={FiHelpCircle}
              label="Support"
              isActive={currentPage === 'support'}
              onClick={() => onNavigate('support')}
              isCollapsed={isCollapsed}
            />
          </NavGroup>
        </VStack>
      </Box>

      {/* Main Content */}
      <Box flex={1} p={6} overflowY="auto">
        {children}
      </Box>
    </Flex>
  );
};

export default Layout;