'use client';

import { useEffect, useRef, useState } from 'react';

import { useTranslations } from 'next-intl';

import { FaChevronDown } from 'react-icons/fa';

import { cn } from '@/lib/utils';

import { MainMenuElement } from '@/config/menuItems';
import { Link } from '@/i18n/navigation';
import { usePathname } from '@/i18n/navigation';

import CategoryDropdown from './CategoryDropdown';
import ProgramsDropdown from './ProgramsDropdown';

interface MenuItemProps {
  item: MainMenuElement;
}

const MenuItem: React.FC<MenuItemProps> = ({ item }) => {
  const { labelKey, to, hasCategoryDropdown, hasProgramsDropdown } = item;
  const isPrograms = labelKey.toLowerCase() === 'programs';
  const t = useTranslations('navigation.menu');
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement | null>(null);
  const pathname = usePathname();

  const toggleDropdown = () => {
    setIsDropdownOpen((prev) => !prev);
  };

  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
    const nextTarget = event.relatedTarget;
    if (!(nextTarget instanceof Node)) {
      setIsDropdownOpen(false);
      return;
    }
    if (dropdownRef.current?.contains(nextTarget)) return;
    setIsDropdownOpen(false);
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (!(event.target instanceof Node)) return;
    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
      setIsDropdownOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const isActive = pathname.split('/')[1] === to.replace('/', '');

  const activeClass = isActive
    ? isPrograms
      ? 'border-transparent'
      : 'text-[#151720] border-[#151720]'
    : '';

  const programsClass = isPrograms ? 'border-transparent' : '';

  // If no dropdown, render as direct link
  if (!hasCategoryDropdown && !hasProgramsDropdown) {
    return (
      <Link
        href={to}
        className={cn(
          'group cursor-pointer flex items-center gap-1 xl:gap-2 px-2 md:px-3 py-1.5 md:py-2 transition-colors duration-200 font-semibold border-b-2 border-transparent text-[#151720]/70 hover:text-[#151720] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10',
          programsClass,
          activeClass
        )}
      >
        <div
          className={cn(
            'font-roboto uppercase font-bold tracking-[0.2em] text-xs xl:text-sm 2xl:text-base relative z-10 select-none',
            isPrograms &&
              'bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent'
          )}
        >
          {t(labelKey)}
        </div>
      </Link>
    );
  }

  // If has dropdown, render as button with dropdown
  return (
    <div
      className="relative"
      ref={dropdownRef}
      onMouseEnter={() => setIsDropdownOpen(true)}
      onMouseLeave={handleMouseLeave}
    >
      <button
        className={cn(
          'group cursor-pointer flex items-center gap-1 xl:gap-2 px-2 md:px-3 py-1.5 md:py-2 transition-colors duration-200 font-semibold border-b-2 border-transparent text-[#151720]/70 hover:text-[#151720] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10',
          programsClass,
          activeClass
        )}
        onClick={toggleDropdown}
      >
        <div
          className={cn(
            'font-roboto uppercase font-bold tracking-[0.2em] text-xs md:text-sm xl:text-base relative z-10 select-none',
            isPrograms &&
              'bg-gradient-to-r from-purple-700 to-pink-700 bg-clip-text text-transparent'
          )}
        >
          {t(labelKey)}
        </div>

        <FaChevronDown
          className={cn(
            'transition-transform duration-300 ease-in-out w-3 h-3 md:w-4 md:h-4 text-[#151720]/60 group-hover:text-[#151720]',
            isPrograms && 'text-purple-700 group-hover:text-pink-700',
            isDropdownOpen ? 'rotate-180' : 'rotate-0'
          )}
        />
      </button>

      {/* Dropdown Menu */}
      <div
        className={cn(
          'absolute top-full left-0 z-20 transition-all duration-200 ease-out transform',
          isDropdownOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-65'
        )}
      >
        {isDropdownOpen && hasCategoryDropdown && (
          <CategoryDropdown
            hasAllOption={item.hasAllCategoryOption}
            basePath={to as never}
            onItemClick={() => setIsDropdownOpen(false)}
          />
        )}
        {isDropdownOpen && hasProgramsDropdown && (
          <ProgramsDropdown
            hasAllOption={item.hasAllCategoryOption}
            basePath={to}
            onItemClick={() => setIsDropdownOpen(false)}
          />
        )}
      </div>
    </div>
  );
};

export default MenuItem;