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("nav");
  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);
  };

  const activeBg = { base: "primary.50", _dark: "primary.950" };
  const activeColor = { base: "primary.600", _dark: "primary.300" };
  const hoverBg = { base: "gray.50", _dark: "gray.800" };

  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 ? activeColor : "fg.muted"}
                bg={isActive ? activeBg : "transparent"}
                fontWeight={isActive ? "bold" : "medium"}
                fontSize="sm"
                px="3"
                py="1.5"
                borderRadius="lg"
                transition="all 0.2s ease"
                _hover={{
                  color: activeColor,
                  bg: isActive ? activeBg : hoverBg,
                }}
              >
                {t(item.label)}
                <RxChevronDown
                  style={{
                    transform: open ? "rotate(-180deg)" : "rotate(0deg)",
                    transition: "transform 0.2s",
                    fontSize: "12px",
                  }}
                />
              </Text>
            </MenuTrigger>
            <MenuContent>
              {item.children.map((child) => {
                const isActiveChild = isChildActive(child.href);
                return (
                  <MenuItem key={child.href} value={child.href}>
                    <ChakraLink
                      as={Link}
                      href={child.href}
                      focusRing="none"
                      w="full"
                      color={isActiveChild ? activeColor : "fg.muted"}
                      textDecor="none"
                      fontWeight={isActiveChild ? "bold" : "medium"}
                      fontSize="sm"
                      _hover={{ color: activeColor }}
                    >
                      {t(child.label)}
                    </ChakraLink>
                  </MenuItem>
                );
              })}
            </MenuContent>
          </MenuRoot>
        </Box>
      ) : (
        <ChakraLink
          as={Link}
          href={item.href}
          focusRing="none"
          color={isActive ? activeColor : "fg.muted"}
          bg={isActive ? activeBg : "transparent"}
          textDecor="none"
          fontWeight={isActive ? "bold" : "medium"}
          fontSize="sm"
          px="3"
          py="1.5"
          borderRadius="lg"
          transition="all 0.2s ease"
          _hover={{
            color: activeColor,
            bg: isActive ? activeBg : hoverBg,
            textDecor: "none",
          }}
        >
          {t(item.label)}
        </ChakraLink>
      )}
    </Box>
  );
}

export default HeaderLink;
