import {
  Text,
  Box,
  Link as ChakraLink,
  useDisclosure,
  VStack,
} from "@chakra-ui/react";
import { RxChevronDown } from "react-icons/rx";
import { NavItem } from "@/config/navigation";
import { useActiveNavItem } from "@/hooks/useActiveNavItem";
import { Link } from "@/i18n/navigation";
import { useTranslations } from "next-intl";

function MobileHeaderLink({ item }: { item: NavItem }) {
  const t = useTranslations("nav");
  const { isActive, isChildActive } = useActiveNavItem(item);
  const { open, onToggle } = useDisclosure();

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

  return (
    <Box key={item.label} w="full">
      {item.children ? (
        <VStack align="start" w="full" spaceY={0}>
          <Text
            onClick={onToggle}
            display="inline-flex"
            alignItems="center"
            gap="1"
            cursor="pointer"
            color={isActive ? activeColor : "fg.muted"}
            bg={isActive ? activeBg : "transparent"}
            fontWeight={isActive ? "bold" : "semibold"}
            fontSize="sm"
            px="3"
            py="2"
            w="full"
            borderRadius="lg"
            transition="all 0.2s ease"
            _hover={{
              color: activeColor,
              bg: activeBg,
            }}
          >
            {t(item.label)}
            <RxChevronDown
              style={{
                transform: open ? "rotate(-180deg)" : "rotate(0deg)",
                transition: "transform 0.2s",
                marginLeft: "auto",
              }}
            />
          </Text>
          {open && item.children && (
            <VStack align="start" pl="3" pt="1" pb="1" w="full" spaceY={0}>
              {item.children.map((child) => {
                const isActiveChild = isChildActive(child.href);
                return (
                  <ChakraLink
                    key={child.href}
                    as={Link}
                    href={child.href}
                    focusRing="none"
                    color={isActiveChild ? activeColor : "fg.muted"}
                    bg={isActiveChild ? activeBg : "transparent"}
                    textDecor="none"
                    fontWeight={isActiveChild ? "bold" : "medium"}
                    fontSize="sm"
                    px="3"
                    py="1.5"
                    w="full"
                    borderRadius="md"
                    transition="all 0.2s ease"
                    _hover={{
                      color: activeColor,
                      bg: activeBg,
                      textDecor: "none",
                    }}
                  >
                    {t(child.label)}
                  </ChakraLink>
                );
              })}
            </VStack>
          )}
        </VStack>
      ) : (
        <ChakraLink
          as={Link}
          href={item.href}
          w="full"
          focusRing="none"
          color={isActive ? activeColor : "fg.muted"}
          bg={isActive ? activeBg : "transparent"}
          textDecor="none"
          fontWeight={isActive ? "bold" : "semibold"}
          fontSize="sm"
          px="3"
          py="2"
          borderRadius="lg"
          display="block"
          transition="all 0.2s ease"
          _hover={{
            color: activeColor,
            bg: activeBg,
            textDecor: "none",
          }}
        >
          {t(item.label)}
        </ChakraLink>
      )}
    </Box>
  );
}

export default MobileHeaderLink;
