import { Box, Link as ChakraLink, Text } from '@chakra-ui/react';
import { NavItem } from '@/config/navigation';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/overlays/menu';
import { RxChevronDown } from 'react-icons/rx';
import { useActiveNavItem } from '@/hooks/useActiveNavItem';
import { Link } from '@/i18n/navigation';
import { useTranslations } from 'next-intl';
import { useRef, useState } from 'react';

function HeaderLink({ item }: { item: NavItem }) {
  const t = useTranslations();
  const { isActive, isChildActive } = useActiveNavItem(item);
  const [open, setOpen] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const handleMouseOpen = () => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    setOpen(true);
  };

  const handleMouseClose = () => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => setOpen(false), 150);
  };

  return (
    <Box key={item.label}>
      {item.children ? (
        <Box onMouseEnter={handleMouseOpen} onMouseLeave={handleMouseClose}>
          <MenuRoot open={open} onOpenChange={(e) => setOpen(e.open)}>
            <MenuTrigger asChild>
              <Text
                display='inline-flex'
                alignItems='center'
                gap='1'
                cursor='pointer'
                color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
                position='relative'
                fontWeight='semibold'
              >
                {t(item.label)}
                <RxChevronDown
                  style={{ transform: open ? 'rotate(-180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
                />
              </Text>
            </MenuTrigger>
            <MenuContent>
              {item.children.map((child, index) => {
                const isActiveChild = isChildActive(child.href);

                return (
                  <MenuItem key={index} value={child.href}>
                    <ChakraLink
                      key={index}
                      as={Link}
                      href={child.href}
                      focusRing='none'
                      w='full'
                      color={isActiveChild ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
                      position='relative'
                      textDecor='none'
                      fontWeight='semibold'
                    >
                      {t(child.label)}
                    </ChakraLink>
                  </MenuItem>
                );
              })}
            </MenuContent>
          </MenuRoot>
        </Box>
      ) : (
        <ChakraLink
          as={Link}
          href={item.href}
          focusRing='none'
          color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
          position='relative'
          textDecor='none'
          fontWeight='semibold'
          _after={{
            content: "''",
            position: 'absolute',
            left: 0,
            bottom: '-2px',
            width: '0%',
            height: '1.5px',
            bg: { base: 'primary.500', _dark: 'primary.300' },
            transition: 'width 0.3s ease-in-out',
          }}
          _hover={{
            _after: {
              width: '100%',
            },
          }}
        >
          {t(item.label)}
        </ChakraLink>
      )}
    </Box>
  );
}

export default HeaderLink;
