// ==================== Dropdown 控制 - 强制动画版本 ====================
document.addEventListener('DOMContentLoaded', function() {

    const triggers = document.querySelectorAll('.dropdown-trigger, .dropdown-toggle');
    let hoverTimeout = null;

    if (triggers.length === 0) {
        console.warn('未找到 dropdown 触发器');
        return;
    }

    function closeAllDropdowns() {
        document.querySelectorAll('.dropdown.show').forEach(dropdown => {
            dropdown.classList.remove('show');
        });
    }

    function closeDropdown(dropdown) {
        if (dropdown && dropdown.classList.contains('show')) {
            dropdown.classList.remove('show');
        }
    }

    function openDropdown(dropdown) {
        // 方法1: 强制重绘
        dropdown.style.display = 'block';
        dropdown.offsetHeight; // 强制重绘
        
        // 方法2: 使用 setTimeout 确保样式已应用
        setTimeout(() => {
            dropdown.classList.add('show');
        }, 5);
        
        // 恢复 display（如果原本不是 block）
        setTimeout(() => {
            dropdown.style.display = '';
        }, 10);
    }

    triggers.forEach(trigger => {
        let dropdown = null;
        
        if (trigger.closest('.dropdown-container')) {
            dropdown = trigger.closest('.dropdown-container').querySelector('.dropdown');
        }
        if (!dropdown) {
            dropdown = trigger.parentElement.querySelector('.dropdown');
        }
        if (!dropdown) {
            dropdown = trigger.nextElementSibling;
        }
        if (!dropdown || !dropdown.classList.contains('dropdown')) {
            dropdown = trigger.parentElement.parentElement.querySelector('.dropdown');
        }

        if (!dropdown) {
            console.warn('未找到对应的 dropdown', trigger);
            return;
        }

        // 确保初始隐藏状态
        dropdown.classList.remove('show');
        
        trigger.addEventListener('mouseenter', function() {
            clearTimeout(hoverTimeout);
            
            // 关闭其他
            document.querySelectorAll('.dropdown.show').forEach(d => {
                if (d !== dropdown) {
                    d.classList.remove('show');
                }
            });
            
            // 显示当前
            if (!dropdown.classList.contains('show')) {
                openDropdown(dropdown);
            }
        });

        trigger.addEventListener('mouseleave', function() {
            hoverTimeout = setTimeout(() => {
                if (!dropdown.matches(':hover')) {
                    closeDropdown(dropdown);
                }
            }, 200);
        });

        dropdown.addEventListener('mouseenter', function() {
            clearTimeout(hoverTimeout);
        });

        dropdown.addEventListener('mouseleave', function() {
            hoverTimeout = setTimeout(() => {
                closeDropdown(dropdown);
            }, 200);
        });
    });

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown-trigger') && 
            !e.target.closest('.dropdown-toggle') && 
            !e.target.closest('.dropdown')) {
            closeAllDropdowns();
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === "Escape") {
            closeAllDropdowns();
        }
    });
});