'use client';

import { Box, Flex, VStack, Text, Icon, Link as ChakraLink, Separator } from '@chakra-ui/react';
import { Link, usePathname } from '@/i18n/navigation';
import { LuLayoutDashboard, LuFileText, LuCalendar, LuTrendingUp, LuSettings, LuLogOut, LuSparkles } from 'react-icons/lu';

import { NAV_ITEMS as CONFIG_NAV_ITEMS } from '@/config/navigation';

const ICON_MAP: Record<string, any> = {
    '/home': LuLayoutDashboard,
    '/generate': LuSparkles,
    '/content': LuFileText,
    '/schedule': LuCalendar,
    '/analytics': LuTrendingUp,
    '/settings': LuSettings,
};

const NAV_ITEMS = CONFIG_NAV_ITEMS.map(item => ({
    name: item.label.charAt(0).toUpperCase() + item.label.slice(1),
    href: item.href,
    icon: ICON_MAP[item.href] || LuFileText
}));

export function Sidebar() {
    const pathname = usePathname();

    return (
        <Box
            w="250px"
            h="100vh"
            bg="bg.panel"
            borderRightWidth="1px"
            borderColor="border.subtle"
            position="fixed"
            left={0}
            top={0}
            zIndex={100}
            py={6}
            px={4}
        >
            <Flex align="center" gap={3} px={2} mb={8}>
                <Box w={8} h={8} bg="primary.solid" borderRadius="lg" display="flex" alignItems="center" justifyContent="center">
                    <Text color="white" fontWeight="bold">CH</Text>
                </Box>
                <Text fontSize="xl" fontWeight="bold">Content Hunter</Text>
            </Flex>

            <VStack gap={2} align="stretch">
                {NAV_ITEMS.map((item) => {
                    const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
                    return (
                        <ChakraLink
                            as={Link}
                            key={item.name}
                            href={item.href}
                            display="flex"
                            alignItems="center"
                            gap={3}
                            px={3}
                            py={2.5}
                            borderRadius="md"
                            textDecoration="none"
                            bg={isActive ? 'primary.subtle' : 'transparent'}
                            color={isActive ? 'primary.solid' : 'fg.muted'}
                            fontWeight={isActive ? 'semibold' : 'medium'}
                            _hover={{
                                bg: isActive ? 'primary.subtle' : 'bg.subtle',
                                textDecoration: 'none',
                            }}
                        >
                            <Icon as={item.icon} boxSize={5} />
                            <Text>{item.name}</Text>
                        </ChakraLink>
                    );
                })}
            </VStack>

            <Box mt="auto">
                <Separator mb={4} />
                <ChakraLink
                    display="flex"
                    alignItems="center"
                    gap={3}
                    px={3}
                    py={2.5}
                    borderRadius="md"
                    textDecoration="none"
                    color="fg.muted"
                    cursor="pointer"
                    _hover={{
                        bg: 'bg.subtle',
                        color: 'fg.error',
                        textDecoration: 'none',
                    }}
                >
                    <Icon as={LuLogOut} boxSize={5} />
                    <Text>Logout</Text>
                </ChakraLink>
            </Box>
        </Box>
    );
}