'use client'

import { useState, useRef, useEffect } from 'react'
import {
    FaHeadset,
    FaMoon,
    FaSun,
    FaEllipsisV,
    FaGlobe
} from 'react-icons/fa'
import { FiChevronLeft, FiChevronRight, FiCheck, FiX } from 'react-icons/fi'
import TW from 'country-flag-icons/react/3x2/TW'
import CN from 'country-flag-icons/react/3x2/CN'
import US from 'country-flag-icons/react/3x2/US'
import JP from 'country-flag-icons/react/3x2/JP'
import KR from 'country-flag-icons/react/3x2/KR'
import { useTheme } from '@/contexts/ThemeContext'
import { useTranslation } from 'react-i18next'

const languages = [
    { code: 'zh-TW', label: '繁體中文', Flag: TW },
    { code: 'zh-CN', label: '简体中文', Flag: CN },
    { code: 'en', label: 'English', Flag: US },
    { code: 'ja', label: '日本語', Flag: JP },
    { code: 'ko-KR', label: '한국어', Flag: KR },
]

type MenuView = 'root' | 'language'

export default function HeaderMenu() {
    const [isOpen, setIsOpen] = useState(false)
    const [menuView, setMenuView] = useState<MenuView>('root')
    const menuRef = useRef<HTMLDivElement>(null)
    const { theme, toggleTheme } = useTheme()
    const isDarkMode = theme === 'dark'
    const { t, i18n } = useTranslation()

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setIsOpen(false)
            }
        }

        if (isOpen) {
            document.addEventListener('mousedown', handleClickOutside)
        } else {
            setMenuView('root')
        }

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

    const menuItems = [
        { id: 'customer', label: t('headerMenu.customer'), icon: FaHeadset },
    ]

    const closeMenu = () => setIsOpen(false)

    return (
        <div className="relative h-[40px]" ref={menuRef}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className={`relative w-10 h-10 p-0 border-0 rounded-full cursor-pointer transition-all text-black dark:text-gray-300 hover:text-black dark:hover:text-white ${isOpen
                    ? 'bg-gray-100 dark:bg-neutral-900'
                    : 'hover:bg-[#eeeff1] dark:hover:bg-[#464A53]'
                    }`}
                aria-label={t('headerMenu.more')}
            >
                <span className="relative flex w-10 h-10 items-center justify-center">
                    <FaEllipsisV className="w-5 h-5" />
                </span>
            </button>

            {isOpen && (
                <>
                    <div
                        className="fixed inset-0 z-[105]"
                        onClick={closeMenu}
                        aria-hidden
                    />
                    <div className="absolute right-0 top-full mt-2 z-[110] w-[280px] max-w-[calc(100vw-24px)] rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] shadow-lg overflow-hidden flex flex-col max-h-[calc(100vh-120px)]">
                        {menuView === 'language' && (
                            <div className="relative flex items-center h-12 pl-2 pr-4 flex-shrink-0 border-b border-gray-100 dark:border-gray-800">
                                <button
                                    type="button"
                                    onClick={() => setMenuView('root')}
                                    aria-label={t('headerMenu.back')}
                                    className="w-6 h-6 mr-2 rounded-md inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                                >
                                    <FiChevronLeft className="w-5 h-5 text-[#525661] dark:text-gray-200" />
                                </button>
                                <h3 className="text-base font-semibold text-gray-900 dark:text-white">
                                    {t('header.language')}
                                </h3>
                            </div>
                        )}

                        <div className="flex-1 min-h-0 overflow-y-auto hide-scrollbar py-1">
                            {menuView === 'root' ? (
                                <>
                                    <ul>
                                        {menuItems.map((item) => {
                                            const IconComponent = item.icon
                                            return (
                                                <li key={item.id}>
                                                    <button
                                                        type="button"
                                                        onClick={closeMenu}
                                                        className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors flex items-center"
                                                    >
                                                        <IconComponent className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mr-3" />
                                                        <span className="flex-1">{item.label}</span>
                                                    </button>
                                                </li>
                                            )
                                        })}
                                    </ul>

                                    <div className="h-px bg-gray-100 dark:bg-neutral-900 mx-4" />

                                    <div className="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-100 dark:hover:bg-[#1a1c21] my-1" onClick={() => setMenuView('language')}>
                                        <div className="flex items-center gap-3 w-full justify-between">
                                            <div className="flex items-center gap-3">
                                                <FaGlobe className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0" />
                                            <span className="text-sm text-[#525661] dark:text-gray-200">{t('header.language')}</span>
                                            </div>
                                            <FiChevronRight className="w-5 h-5 text-gray-400" />
                                        </div>
                                    </div>

                                    <div className="h-px bg-gray-100 dark:bg-neutral-900 mx-4" />

                                    <div className="px-4 py-3 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-[#1a1c21] my-1">
                                        <div className="flex items-center gap-3">
                                            {isDarkMode ? (
                                                <FaSun className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0" />
                                            ) : (
                                                <FaMoon className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0" />
                                            )}
                                            <span className="text-sm text-[#525661] dark:text-gray-200">{t('headerMenu.darkMode')}</span>
                                        </div>
                                        <button
                                            type="button"
                                            role="switch"
                                            aria-checked={isDarkMode}
                                            aria-label={t('headerMenu.darkMode')}
                                            onClick={(e) => {
                                                e.stopPropagation()
                                                toggleTheme()
                                            }}
                                            className={`relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ease-out focus:outline-none cursor-pointer ${isDarkMode ? 'bg-blue-400 dark:bg-blue-400' : 'bg-slate-300 dark:bg-gray-600'}`}
                                        >
                                            <span
                                                className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-out mt-0.5 ml-0.5 ${isDarkMode ? 'translate-x-4' : 'translate-x-0'}`}
                                            />
                                        </button>
                                    </div>
                                </>
                            ) : (
                                <ul>
                                    {languages.map((lang) => {
                                        const Flag = lang.Flag
                                        const isActive = i18n.resolvedLanguage === lang.code
                                        return (
                                            <li key={lang.code}>
                                                <button
                                                    type="button"
                                                    onClick={() => {
                                                        i18n.changeLanguage(lang.code)
                                                        setMenuView('root')
                                                    }}
                                                    className={`w-full text-left px-4 py-3 text-sm flex items-center transition-colors font-semibold text-gray-900 dark:text-white  hover:bg-gray-100 dark:hover:bg-[#1a1c21]`}
                                                >
                                                    <span className="flex-shrink-0 w-6 h-4 overflow-hidden rounded-sm mr-3">
                                                        <Flag className="w-full h-full object-cover" title="" />
                                                    </span>
                                                    <span className="flex-1">{lang.label}</span>
                                                    {isActive && <FiCheck className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0" />}
                                                </button>
                                            </li>
                                        )
                                    })}
                                </ul>
                            )}
                        </div>
                    </div>
                </>
            )}
        </div>
    )
}