import React, { useState, useRef, useEffect } from 'react';
import { ChevronDown } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';

interface MenuItem {
  href: string;
  translationKey: string;
  showBorder?: boolean;
}

interface AccountDropdownProps {
  t: (key: string) => string;
  className?: string;
}

const AccountDropdown: React.FC<AccountDropdownProps> = ({
  t,
  className = ''
}) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const currentPath = usePathname();

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

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

  // Close dropdown on Escape key press
  useEffect(() => {
    const handleEscapeKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscapeKey);
    }

    return () => {
      document.removeEventListener('keydown', handleEscapeKey);
    };
  }, [isOpen]);

  const handleLinkClick = () => {
    setIsOpen(false);
  };

  const allMenuItems: MenuItem[] = [
    {
      href: "/account-settings",
      translationKey: "menuItems.account_settings.title",
      showBorder: true
    },
    {
      href: "/my-address",
      translationKey: "menuItems.my_address.title",
      showBorder: true
    },
    {
      href: "/my-banks",
      translationKey: "menuItems.bank.title",
      showBorder: true
    },
    {
      href: "/wallet",
      translationKey: "menuItems.wallet.title",
      showBorder: false
    }
  ];

  const filteredMenuItems = allMenuItems.filter(item => {
    if(currentPath === item.href) return false;
    return true;
  });

  return (
    <div className={`relative ${className}`} ref={dropdownRef}>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-[14px] p-1.5 pl-2 pr-2 min-w-20 font-normal text-neutrals800 dark:text-neutrals400 border border-neutrals200 rounded-md hover:border-neutrals300 dark:hover:border-neutrals500 transition-colors max-md:text-sm dark:border-darkborder"
        aria-expanded={isOpen}
        aria-haspopup="true"
        aria-label="Manage account"
      >
        {t("manage_account")}
        <ChevronDown
          size={18}
          className={`mt-0.5 transition-transform duration-300 ${
            isOpen ? 'rotate-180' : ''
          }`}
          aria-hidden="true"
        />
      </button>

      {isOpen && filteredMenuItems.length > 0 && (
        <div
          className="absolute top-full right-0 mt-0.5 w-48 bg-white dark:bg-darkbg rounded-lg shadow-lg border border-neutrals100 dark:border-darkborder animate-in fade-in slide-in-from-top-2 z-50 rtl:left-0 rtl:right-auto"
          role="menu"
          aria-label="Manage account menu"
        >
          {filteredMenuItems.map((item, index) => (
            <Link
              key={index}
              href={item.href}
              className={`block px-4 py-3 text-sm text-neutrals800 dark:text-neutrals400 hover:bg-neutrals50 dark:hover:bg-darkborder hover:text-primary500 dark:hover:text-primary400 transition-colors ${
                item.showBorder && index !== filteredMenuItems.length - 1
                  ? 'border-b border-neutrals100 dark:border-darkborder'
                  : ''
              }`}
              onClick={handleLinkClick}
              role="menuitem"
            >
              {t(item.translationKey)}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
};

export default AccountDropdown;