// 全局MeNav对象 - 用于浏览器扩展
window.MeNav = {
    version: "1.0.0",

    // 获取配置数据
    getConfig: function() {
        const configData = document.getElementById('menav-config-data');
        return configData ? JSON.parse(configData.textContent) : null;
    },

    // 获取元素的唯一标识符
    _getElementId: function(element) {
        const type = element.getAttribute('data-type');
        if (type === 'nav-item') {
            return element.getAttribute('data-id');
        } else if (type === 'social-link') {
            return element.getAttribute('data-url');
        } else {
            return element.getAttribute('data-name');
        }
    },

    // 根据类型和ID查找元素
    _findElement: function(type, id) {
        let selector;
        if (type === 'nav-item') {
            selector = `[data-type="${type}"][data-id="${id}"]`;
        } else if (type === 'social-link') {
            selector = `[data-type="${type}"][data-url="${id}"]`;
        } else {
            selector = `[data-type="${type}"][data-name="${id}"]`;
        }
        return document.querySelector(selector);
    },

    // 更新DOM元素
    updateElement: function(type, id, newData) {
        const element = this._findElement(type, id);
        if (!element) return false;

        if (type === 'site') {
            // 更新站点卡片
            if (newData.url) {
                element.href = newData.url;
                element.setAttribute('data-url', newData.url);
            }
            if (newData.name) {
                element.querySelector('h3').textContent = newData.name;
                element.setAttribute('data-name', newData.name);
            }
            if (newData.description) {
                element.querySelector('p').textContent = newData.description;
                element.setAttribute('data-description', newData.description);
            }
            if (newData.icon) {
                // 优先更新站点卡片中的回退图标（favicon模式下存在）
                const iconElement = element.querySelector('i.icon-fallback') || element.querySelector('i');
                if (iconElement) {
                    iconElement.className = newData.icon;
                }
                element.setAttribute('data-icon', newData.icon);
            }
            if (newData.title) element.title = newData.title;

            // 触发元素更新事件
            this.events.emit('elementUpdated', {
                id: id,
                type: 'site',
                data: newData
            });

            return true;
        } else if (type === 'category') {
            // 更新分类
            if (newData.name) {
                const titleElement = element.querySelector('h2');
                if (titleElement) {
                    // 保留图标
                    const iconElement = titleElement.querySelector('i');
                    const iconClass = iconElement ? iconElement.className : '';
                    titleElement.innerHTML = `<i class="${newData.icon || iconClass}"></i> ${newData.name}`;
                }
                element.setAttribute('data-name', newData.name);
            }
            if (newData.icon) {
                element.setAttribute('data-icon', newData.icon);
            }

            // 触发元素更新事件
            this.events.emit('elementUpdated', {
                id: id,
                type: 'category',
                data: newData
            });

            return true;
        } else if (type === 'nav-item') {
            // 更新导航项
            if (newData.name) {
                const textElement = element.querySelector('.nav-text');
                if (textElement) {
                    textElement.textContent = newData.name;
                }
                element.setAttribute('data-name', newData.name);
            }
            if (newData.icon) {
                const iconElement = element.querySelector('i');
                if (iconElement) {
                    iconElement.className = newData.icon;
                }
                element.setAttribute('data-icon', newData.icon);
            }

            // 触发元素更新事件
            this.events.emit('elementUpdated', {
                id: id,
                type: 'nav-item',
                data: newData
            });

            return true;
        } else if (type === 'social-link') {
            // 更新社交链接
            if (newData.url) {
                element.href = newData.url;
                element.setAttribute('data-url', newData.url);
            }
            if (newData.name) {
                const textElement = element.querySelector('.nav-text');
                if (textElement) {
                    textElement.textContent = newData.name;
                }
                element.setAttribute('data-name', newData.name);
            }
            if (newData.icon) {
                const iconElement = element.querySelector('i');
                if (iconElement) {
                    iconElement.className = newData.icon;
                }
                element.setAttribute('data-icon', newData.icon);
            }

            // 触发元素更新事件
            this.events.emit('elementUpdated', {
                id: id,
                type: 'social-link',
                data: newData
            });

            return true;
        }

        return false;
    },

    // 添加新元素
    addElement: function(type, parentId, data) {
        let parent;
        
        if (type === 'site') {
            // 查找父级分类
            parent = document.querySelector(`[data-type="category"][data-name="${parentId}"]`);
            if (!parent) return null;

            // 添加站点卡片到分类
            const sitesGrid = parent.querySelector('[data-container="sites"]');
            if (!sitesGrid) return null;

            // 创建新的站点卡片
            const newSite = document.createElement('a');
            newSite.className = 'site-card';
            newSite.href = data.url || '#';
            newSite.title = data.name + (data.description ? ' - ' + data.description : '');
            
            // 设置数据属性
            newSite.setAttribute('data-type', 'site');
            newSite.setAttribute('data-name', data.name || '未命名站点');
            newSite.setAttribute('data-url', data.url || '');
            newSite.setAttribute('data-icon', data.icon || 'fas fa-link');
            newSite.setAttribute('data-description', data.description || '');

            // 添加内容（根据图标模式渲染）
            try {
                const cfg = window.MeNav && typeof window.MeNav.getConfig === 'function' ? window.MeNav.getConfig() : null;
                const iconsMode = (cfg && (cfg.data?.icons?.mode || cfg.icons?.mode)) || 'favicon';
                if (iconsMode === 'favicon' && data.url && /^https?:\/\//i.test(data.url)) {
                    const faviconUrl = `https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${encodeURIComponent(data.url)}&size=32`;
                    newSite.innerHTML = `
                        <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
                        <img class="favicon-icon" src="${faviconUrl}" alt="${(data.name || '站点')} favicon" loading="lazy" style="opacity:0;"
                             onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';"
                             onerror="this.style.display='none'; this.previousElementSibling.style.display='none'; this.nextElementSibling.style.display='inline-block';" />
                        <i class="fas fa-link icon-fallback" aria-hidden="true" style="display:none;"></i>
                        <h3>${data.name || '未命名站点'}</h3>
                        <p>${data.description || ''}</p>
                    `;
                } else {
                    newSite.innerHTML = `
                        <i class="${data.icon || 'fas fa-link'}"></i>
                        <h3>${data.name || '未命名站点'}</h3>
                        <p>${data.description || ''}</p>
                    `;
                }
            } catch (e) {
                newSite.innerHTML = `
                    <i class="${data.icon || 'fas fa-link'}"></i>
                    <h3>${data.name || '未命名站点'}</h3>
                    <p>${data.description || ''}</p>
                `;
            }

            // 添加到DOM
            sitesGrid.appendChild(newSite);

            

            // 移除"暂无网站"提示（如果存在）
            const emptyMessage = sitesGrid.querySelector('.empty-sites');
            if (emptyMessage) {
                emptyMessage.remove();
            }

            // 触发元素添加事件
            this.events.emit('elementAdded', {
                id: data.name,
                type: 'site',
                parentId: parentId,
                data: data
            });

            return data.name;
        } else if (type === 'category') {
            // 查找父级页面容器
            parent = document.querySelector(`[data-container="categories"]`);
            if (!parent) return null;

            // 创建新的分类
            const newCategory = document.createElement('section');
            newCategory.className = 'category';
            
            // 设置数据属性
            newCategory.setAttribute('data-type', 'category');
            newCategory.setAttribute('data-name', data.name || '未命名分类');
            newCategory.setAttribute('data-icon', data.icon || 'fas fa-folder');
            newCategory.setAttribute('data-container', 'categories');

            // 添加内容
            newCategory.innerHTML = `
                <h2 data-editable="category-name"><i class="${data.icon || 'fas fa-folder'}"></i> ${data.name || '未命名分类'}</h2>
                <div class="sites-grid" data-container="sites">
                    <p class="empty-sites">暂无网站</p>
                </div>
            `;

            // 添加到DOM
            parent.appendChild(newCategory);

            // 触发元素添加事件
            this.events.emit('elementAdded', {
                id: data.name,
                type: 'category',
                data: data
            });

            return data.name;
        }

        return null;
    },

    // 删除元素
    removeElement: function(type, id) {
        const element = this._findElement(type, id);
        if (!element) return false;

        // 获取父级容器（如果是站点卡片）
        let parentId = null;
        if (type === 'site') {
            const categoryElement = element.closest('[data-type="category"]');
            if (categoryElement) {
                parentId = categoryElement.getAttribute('data-name');
            }
        }

        // 删除元素
        element.remove();

        // 触发元素删除事件
        this.events.emit('elementRemoved', {
            id: id,
            type: type,
            parentId: parentId
        });

        return true;
    },

    // 获取所有元素
    getAllElements: function(type) {
        return Array.from(document.querySelectorAll(`[data-type="${type}"]`)).map(el => {
            const id = this._getElementId(el);
            return {
                id: id,
                type: type,
                element: el
            };
        });
    },

    // 事件系统
    events: {
        listeners: {},

        // 添加事件监听器
        on: function(event, callback) {
            if (!this.listeners[event]) {
                this.listeners[event] = [];
            }
            this.listeners[event].push(callback);
            return this;
        },

        // 触发事件
        emit: function(event, data) {
            if (this.listeners[event]) {
                this.listeners[event].forEach(callback => callback(data));
            }
            return this;
        },

        // 移除事件监听器
        off: function(event, callback) {
            if (this.listeners[event]) {
                if (callback) {
                    this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
                } else {
                    delete this.listeners[event];
                }
            }
            return this;
        }
    }
};

document.addEventListener('DOMContentLoaded', () => {
    // 先声明所有状态变量
    let isSearchActive = false;
    let currentPageId = 'home';
    let isInitialLoad = true;
    let isSidebarOpen = false;
    let isSearchOpen = false;
    let isLightTheme = false; // 主题状态
    let isSidebarCollapsed = false; // 侧边栏折叠状态
    let pages; // 页面元素的全局引用
    let currentSearchEngine = 'local'; // 当前选择的搜索引擎

    // 搜索索引，用于提高搜索效率
    let searchIndex = {
        initialized: false,
        items: []
    };

    // 搜索引擎配置
    const searchEngines = {
        local: {
            name: '本地搜索',
            icon: 'fas fa-search',
            url: null // 本地搜索不需要URL
        },
        google: {
            name: 'Google搜索',
            icon: 'fab fa-google',
            url: 'https://www.google.com/search?q='
        },
        bing: {
            name: 'Bing搜索',
            icon: 'fab fa-microsoft',
            url: 'https://www.bing.com/search?q='
        },
        baidu: {
            name: '百度搜索',
            icon: 'fas fa-paw',
            url: 'https://www.baidu.com/s?wd='
        }
    };

    // 获取DOM元素 - 基本元素
    const searchInput = document.getElementById('search');
    const searchBox = document.querySelector('.search-box');
    const searchResultsPage = document.getElementById('search-results');
    const searchSections = searchResultsPage.querySelectorAll('.search-section');

    // 搜索引擎相关元素
    const searchIcon = document.querySelector('.search-icon');
    const searchEngineToggle = document.querySelector('.search-engine-toggle');
    const searchEngineDropdown = document.querySelector('.search-engine-dropdown');
    const searchEngineOptions = document.querySelectorAll('.search-engine-option');

    // 移动端元素
    const menuToggle = document.querySelector('.menu-toggle');
    const searchToggle = document.querySelector('.search-toggle');
    const sidebar = document.querySelector('.sidebar');
    const searchContainer = document.querySelector('.search-container');
    const overlay = document.querySelector('.overlay');

    // 侧边栏折叠功能
    const sidebarToggle = document.querySelector('.sidebar-toggle');
    const content = document.querySelector('.content');

    // 主题切换元素
    const themeToggle = document.querySelector('.theme-toggle');
    const themeIcon = themeToggle.querySelector('i');

    // 滚动进度条元素
    const scrollProgress = document.querySelector('.scroll-progress');

    // 移除预加载类，允许CSS过渡效果
    document.documentElement.classList.remove('preload');

    // 应用从localStorage读取的主题设置
    if (document.documentElement.classList.contains('theme-preload')) {
        document.documentElement.classList.remove('theme-preload');
        document.body.classList.add('light-theme');
        isLightTheme = true;
    }

    // 应用从localStorage读取的侧边栏状态
    if (document.documentElement.classList.contains('sidebar-collapsed-preload')) {
        document.documentElement.classList.remove('sidebar-collapsed-preload');
        sidebar.classList.add('collapsed');
        content.classList.add('expanded');
        isSidebarCollapsed = true;
    }

    // 即时移除loading类，确保侧边栏可见
    document.body.classList.remove('loading');
    document.body.classList.add('loaded');

    // 侧边栏折叠功能
    function toggleSidebarCollapse() {
        // 仅在交互时启用布局相关动画，避免首屏闪烁
        document.documentElement.classList.add('with-anim');

        isSidebarCollapsed = !isSidebarCollapsed;

        // 使用 requestAnimationFrame 确保平滑过渡
        requestAnimationFrame(() => {
            sidebar.classList.toggle('collapsed', isSidebarCollapsed);
            content.classList.toggle('expanded', isSidebarCollapsed);

            // 保存折叠状态到localStorage
            localStorage.setItem('sidebarCollapsed', isSidebarCollapsed ? 'true' : 'false');
        });
    }

    // 初始化侧边栏折叠状态 - 已在页面加载前处理，此处仅完成图标状态初始化等次要任务
    function initSidebarState() {
        // 从localStorage获取侧边栏状态
        const savedState = localStorage.getItem('sidebarCollapsed');

        // 图标状态与折叠状态保持一致
        if (savedState === 'true' && !isMobile()) {
            isSidebarCollapsed = true;
        } else {
            isSidebarCollapsed = false;
        }
    }

    // 侧边栏折叠按钮点击事件
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', toggleSidebarCollapse);
    }

    // 主题切换功能
    function toggleTheme() {
        isLightTheme = !isLightTheme;
        document.body.classList.toggle('light-theme', isLightTheme);

        // 更新图标
        if (isLightTheme) {
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        } else {
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        }

        // 保存主题偏好到localStorage
        localStorage.setItem('theme', isLightTheme ? 'light' : 'dark');
    }

    // 初始化主题 - 已在页面加载前处理，此处仅完成图标状态初始化等次要任务
    function initTheme() {
        // 从localStorage获取主题偏好
        const savedTheme = localStorage.getItem('theme');

        // 更新图标状态以匹配当前主题
        if (savedTheme === 'light') {
            isLightTheme = true;
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        } else {
            isLightTheme = false;
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        }
    }

    // 主题切换按钮点击事件
    themeToggle.addEventListener('click', toggleTheme);

    // 初始化搜索索引
    function initSearchIndex() {
        if (searchIndex.initialized) return;

        searchIndex.items = [];

        try {
            // 为每个页面创建索引
            if (!pages) {
                pages = document.querySelectorAll('.page');
            }

            pages.forEach(page => {
                if (page.id === 'search-results') return;

                const pageId = page.id;

                page.querySelectorAll('.site-card').forEach(card => {
                    try {
                        const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
                        const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
                        const url = card.href || card.getAttribute('href') || '#';
                        const icon = card.querySelector('i.icon-fallback')?.className || card.querySelector('i')?.className || '';

                        // 将卡片信息添加到索引中
                        searchIndex.items.push({
                            pageId,
                            title,
                            description,
                            url,
                            icon,
                            element: card,
                            // 预先计算搜索文本，提高搜索效率
                            searchText: (title + ' ' + description).toLowerCase()
                        });
                    } catch (cardError) {
                        console.error('Error processing card:', cardError);
                    }
                });
            });

            searchIndex.initialized = true;
        } catch (error) {
            console.error('Error initializing search index:', error);
            searchIndex.initialized = true; // 防止反复尝试初始化
        }
    }

    // 移动端菜单切换
    function toggleSidebar() {
        isSidebarOpen = !isSidebarOpen;
        sidebar.classList.toggle('active', isSidebarOpen);
        overlay.classList.toggle('active', isSidebarOpen);
        if (isSearchOpen) {
            toggleSearch();
        }
    }

    // 移动端搜索切换
    function toggleSearch() {
        isSearchOpen = !isSearchOpen;
        searchContainer.classList.toggle('active', isSearchOpen);
        overlay.classList.toggle('active', isSearchOpen);
        if (isSearchOpen) {
            searchInput.focus();
            if (isSidebarOpen) {
                toggleSidebar();
            }
        }
    }

    // 关闭所有移动端面板
    function closeAllPanels() {
        if (isSidebarOpen) {
            toggleSidebar();
        }
        if (isSearchOpen) {
            toggleSearch();
        }
    }

    // 移动端事件监听
    menuToggle.addEventListener('click', toggleSidebar);
    searchToggle.addEventListener('click', toggleSearch);
    overlay.addEventListener('click', closeAllPanels);

    // 检查是否是移动设备
    function isMobile() {
        return window.innerWidth <= 768;
    }

    // 窗口大小改变时处理
    window.addEventListener('resize', () => {
        if (!isMobile()) {
            sidebar.classList.remove('active');
            searchContainer.classList.remove('active');
            overlay.classList.remove('active');
            isSidebarOpen = false;
            isSearchOpen = false;
        } else {
            // 在移动设备下，重置侧边栏折叠状态
            sidebar.classList.remove('collapsed');
            content.classList.remove('expanded');
        }

        // 重新计算滚动进度
        updateScrollProgress();
    });

    // 更新滚动进度条
    function updateScrollProgress() {
        const scrollTop = content.scrollTop || 0;
        const scrollHeight = content.scrollHeight - content.clientHeight || 1;
        const scrollPercent = (scrollTop / scrollHeight) * 100;
        scrollProgress.style.width = scrollPercent + '%';
    }

    // 监听内容区域的滚动事件
    content.addEventListener('scroll', updateScrollProgress);

    // 初始化时更新一次滚动进度
    updateScrollProgress();

    // 页面切换功能
    function showPage(pageId, skipSearchReset = false) {
        if (currentPageId === pageId && !skipSearchReset && !isInitialLoad) return;

        currentPageId = pageId;

        // 使用 RAF 确保动画流畅
        requestAnimationFrame(() => {
            if (!pages) {
                pages = document.querySelectorAll('.page');
            }

            pages.forEach(page => {
                const shouldBeActive = page.id === pageId;
                if (shouldBeActive !== page.classList.contains('active')) {
                    page.classList.toggle('active', shouldBeActive);
                }
            });

            // 初始加载完成后设置标志
            if (isInitialLoad) {
                isInitialLoad = false;
                document.body.classList.add('loaded');
            }
        });

        // 重置滚动位置并更新进度条
        content.scrollTop = 0;
        updateScrollProgress();

        // 只有在非搜索状态下才重置搜索
        if (!skipSearchReset) {
            searchInput.value = '';
            resetSearch();
        }
    }

    // 搜索功能
    function performSearch(searchTerm) {
        // 确保搜索索引已初始化
        if (!searchIndex.initialized) {
            initSearchIndex();
        }

        searchTerm = searchTerm.toLowerCase().trim();

        // 如果搜索框为空，重置所有内容
        if (!searchTerm) {
            resetSearch();
            return;
        }

        if (!isSearchActive) {
            isSearchActive = true;
        }

        try {
            // 使用搜索索引进行搜索
            const searchResults = new Map();
            let hasResults = false;

            // 使用更高效的搜索算法
            const matchedItems = searchIndex.items.filter(item => {
                return item.searchText.includes(searchTerm) || PinyinMatch.match(item.searchText, searchTerm);;
            });

            // 按页面分组结果
            matchedItems.forEach(item => {
                if (!searchResults.has(item.pageId)) {
                    searchResults.set(item.pageId, []);
                }
                // 克隆元素以避免修改原始DOM
                searchResults.get(item.pageId).push(item.element.cloneNode(true));
                hasResults = true;
            });

            // 使用requestAnimationFrame批量更新DOM，减少重排重绘
            requestAnimationFrame(() => {
                try {
                    // 清空并隐藏所有搜索区域
                    searchSections.forEach(section => {
                        try {
                            const grid = section.querySelector('.sites-grid');
                            if (grid) {
                                grid.innerHTML = ''; // 使用innerHTML清空，比removeChild更高效
                            }
                            section.style.display = 'none';
                        } catch (sectionError) {
                            console.error('Error clearing search section');
                        }
                    });

                    // 使用DocumentFragment批量添加DOM元素，减少重排
                    searchResults.forEach((matches, pageId) => {
                        const section = searchResultsPage.querySelector(`[data-section="${pageId}"]`);
                        if (section) {
                            try {
                                const grid = section.querySelector('.sites-grid');
                                if (grid) {
                                    const fragment = document.createDocumentFragment();

                                    matches.forEach(card => {
                                        // 高亮匹配文本
                                        highlightSearchTerm(card, searchTerm);
                                        fragment.appendChild(card);
                                    });

                                    grid.appendChild(fragment);
                                    section.style.display = 'block';
                                }
                            } catch (gridError) {
                                console.error('Error updating search results grid');
                            }
                        }
                    });

                    // 更新搜索结果页面状态
                    const subtitle = searchResultsPage.querySelector('.subtitle');
                    if (subtitle) {
                        subtitle.textContent = hasResults
                            ? `在所有页面中找到 ${matchedItems.length} 个匹配项`
                            : '未找到匹配的结果';
                    }

                    // 显示搜索结果页面
                    if (currentPageId !== 'search-results') {
                        currentPageId = 'search-results';
                        pages.forEach(page => {
                            page.classList.toggle('active', page.id === 'search-results');
                        });
                    }

                    // 更新搜索状态样式
                    searchBox.classList.toggle('has-results', hasResults);
                    searchBox.classList.toggle('no-results', !hasResults);
                } catch (uiError) {
                    console.error('Error updating search UI');
                }
            });
        } catch (searchError) {
            console.error('Error performing search');
        }
    }

    // 高亮搜索匹配文本
    function highlightSearchTerm(card, searchTerm) {
        if (!card || !searchTerm) return;

        try {
            const title = card.querySelector('h3');
            const description = card.querySelector('p');

            if (!title || !description) return;

            // 安全地高亮标题中的匹配文本
            if (title.textContent.toLowerCase().includes(searchTerm)) {
                const titleText = title.textContent;
                const regex = new RegExp(`(${escapeRegExp(searchTerm)})`, 'gi');

                // 创建安全的DOM结构而不是直接使用innerHTML
                const titleFragment = document.createDocumentFragment();
                let lastIndex = 0;
                let match;

                // 使用正则表达式查找所有匹配项
                const titleRegex = new RegExp(regex);
                while ((match = titleRegex.exec(titleText)) !== null) {
                    // 添加匹配前的文本
                    if (match.index > lastIndex) {
                        titleFragment.appendChild(document.createTextNode(
                            titleText.substring(lastIndex, match.index)
                        ));
                    }

                    // 添加高亮的匹配文本
                    const span = document.createElement('span');
                    span.className = 'highlight';
                    span.textContent = match[0];
                    titleFragment.appendChild(span);

                    lastIndex = match.index + match[0].length;

                    // 防止无限循环
                    if (titleRegex.lastIndex === 0) break;
                }

                // 添加剩余文本
                if (lastIndex < titleText.length) {
                    titleFragment.appendChild(document.createTextNode(
                        titleText.substring(lastIndex)
                    ));
                }

                // 清空原标题并添加新内容
                while (title.firstChild) {
                    title.removeChild(title.firstChild);
                }
                title.appendChild(titleFragment);
            } else if (PinyinMatch.match(title.textContent, searchTerm)) {
                const arr = PinyinMatch.match(title.textContent, searchTerm);
                const [start, end] = arr;
                title.innerHTML = title.textContent.slice(0, start) +
                    `<span class="highlight">${title.textContent.slice(start, end + 1)}</span>` +
                    title.textContent.slice(end + 1);
            }

            // 安全地高亮描述中的匹配文本
            if (description.textContent.toLowerCase().includes(searchTerm)) {
                const descText = description.textContent;
                const regex = new RegExp(`(${escapeRegExp(searchTerm)})`, 'gi');

                // 创建安全的DOM结构而不是直接使用innerHTML
                const descFragment = document.createDocumentFragment();
                let lastIndex = 0;
                let match;

                // 使用正则表达式查找所有匹配项
                const descRegex = new RegExp(regex);
                while ((match = descRegex.exec(descText)) !== null) {
                    // 添加匹配前的文本
                    if (match.index > lastIndex) {
                        descFragment.appendChild(document.createTextNode(
                            descText.substring(lastIndex, match.index)
                        ));
                    }

                    // 添加高亮的匹配文本
                    const span = document.createElement('span');
                    span.className = 'highlight';
                    span.textContent = match[0];
                    descFragment.appendChild(span);

                    lastIndex = match.index + match[0].length;

                    // 防止无限循环
                    if (descRegex.lastIndex === 0) break;
                }

                // 添加剩余文本
                if (lastIndex < descText.length) {
                    descFragment.appendChild(document.createTextNode(
                        descText.substring(lastIndex)
                    ));
                }

                // 清空原描述并添加新内容
                while (description.firstChild) {
                    description.removeChild(description.firstChild);
                }
                description.appendChild(descFragment);
            } else if (PinyinMatch.match(description.textContent, searchTerm)) {
                const arr = PinyinMatch.match(description.textContent, searchTerm);
                const [start, end] = arr;
                description.innerHTML = description.textContent.slice(0, start) +
                    `<span class="highlight">${description.textContent.slice(start, end + 1)}</span>` +
                    description.textContent.slice(end + 1);
            }
        } catch (error) {
            console.error('Error highlighting search term');
        }
    }

    // 转义正则表达式特殊字符
    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    // 重置搜索状态
    function resetSearch() {
        if (!isSearchActive) return;

        isSearchActive = false;

        try {
            requestAnimationFrame(() => {
                try {
                    // 清空搜索结果
                    searchSections.forEach(section => {
                        try {
                            const grid = section.querySelector('.sites-grid');
                            if (grid) {
                                while (grid.firstChild) {
                                    grid.removeChild(grid.firstChild);
                                }
                            }
                            section.style.display = 'none';
                        } catch (sectionError) {
                            console.error('Error clearing search section');
                        }
                    });

                    // 移除搜索状态样式
                    searchBox.classList.remove('has-results', 'no-results');

                    // 恢复到当前激活的页面
                    const currentActiveNav = document.querySelector('.nav-item.active');
                    if (currentActiveNav) {
                        const targetPageId = currentActiveNav.getAttribute('data-page');

                        if (targetPageId && currentPageId !== targetPageId) {
                            currentPageId = targetPageId;
                            pages.forEach(page => {
                                page.classList.toggle('active', page.id === targetPageId);
                            });
                        }
                    } else {
                        // 如果没有激活的导航项，默认显示首页
                        currentPageId = 'home';
                        pages.forEach(page => {
                            page.classList.toggle('active', page.id === 'home');
                        });
                    }
                } catch (resetError) {
                    console.error('Error resetting search UI');
                }
            });
        } catch (error) {
            console.error('Error in resetSearch');
        }
    }

    // 搜索输入事件（使用防抖）
    const debounce = (fn, delay) => {
        let timer = null;
        return (...args) => {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        };
    };

    const debouncedSearch = debounce(performSearch, 300);

    searchInput.addEventListener('input', (e) => {
        // 只有在选择了本地搜索时，才在输入时实时显示本地搜索结果
        if (currentSearchEngine === 'local') {
            debouncedSearch(e.target.value);
        } else {
            // 对于非本地搜索，重置之前的本地搜索结果（如果有）
            if (isSearchActive) {
                resetSearch();
            }
        }
    });

    // 初始化搜索引擎设置
    function initSearchEngine() {
        // 从本地存储获取上次选择的搜索引擎
        const savedEngine = localStorage.getItem('searchEngine');
        if (savedEngine && searchEngines[savedEngine]) {
            currentSearchEngine = savedEngine;
        }

        // 设置当前搜索引擎的激活状态及图标
        updateSearchEngineUI();

        // 初始化搜索引擎下拉菜单事件
        const toggleEngineDropdown = () => {
            const next = !searchEngineDropdown.classList.contains('active');
            searchEngineDropdown.classList.toggle('active', next);
            if (searchBox) {
                searchBox.classList.toggle('dropdown-open', next);
            }
            if (searchEngineToggle) {
                searchEngineToggle.setAttribute('aria-expanded', String(next));
            }
        };

        if (searchIcon) {
            searchIcon.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleEngineDropdown();
            });
        }

        if (searchEngineToggle) {
            searchEngineToggle.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleEngineDropdown();
            });
            // 键盘可访问性：Enter/Space 触发
            searchEngineToggle.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleEngineDropdown();
                }
            });
        }

        // 点击搜索引擎选项
        searchEngineOptions.forEach(option => {
            // 初始化激活状态
            if (option.getAttribute('data-engine') === currentSearchEngine) {
                option.classList.add('active');
            }

            option.addEventListener('click', (e) => {
                e.stopPropagation();

                // 获取选中的搜索引擎
                const engine = option.getAttribute('data-engine');

                // 更新当前搜索引擎
                if (engine && searchEngines[engine]) {
                    // 如果搜索引擎变更，且之前有活跃的本地搜索结果，重置搜索状态
                    if (currentSearchEngine !== engine && isSearchActive) {
                        resetSearch();
                    }

                    currentSearchEngine = engine;
                    localStorage.setItem('searchEngine', engine);

                    // 更新UI显示
                    updateSearchEngineUI();

                    // 关闭下拉菜单
                    searchEngineDropdown.classList.remove('active');
                    if (searchBox) {
                        searchBox.classList.remove('dropdown-open');
                    }
                }
            });
        });

        // 点击页面其他位置关闭下拉菜单
        document.addEventListener('click', () => {
            searchEngineDropdown.classList.remove('active');
            if (searchBox) {
                searchBox.classList.remove('dropdown-open');
            }
        });
    }

    // 更新搜索引擎UI显示
    function updateSearchEngineUI() {
        // 移除所有选项的激活状态
        searchEngineOptions.forEach(option => {
            option.classList.remove('active');

            // 如果是当前选中的搜索引擎，添加激活状态
            if (option.getAttribute('data-engine') === currentSearchEngine) {
                option.classList.add('active');
            }
        });

        // 更新搜索图标以反映当前搜索引擎
        if (searchIcon) {
            // 清除所有类，保留基本的search-icon类
            const classList = searchIcon.className.split(' ').filter(cls => cls === 'search-icon');
            searchIcon.className = classList.join(' ');

            // 添加当前搜索引擎的图标类
            const engine = searchEngines[currentSearchEngine];
            if (engine) {
                const iconClasses = engine.icon.split(' ');
                iconClasses.forEach(cls => {
                    searchIcon.classList.add(cls);
                });

                // 更新标题提示
                searchIcon.setAttribute('title', engine.name);
            }
        }
    }

    // 执行搜索（根据选择的搜索引擎）
    function executeSearch(searchTerm) {
        if (!searchTerm.trim()) return;

        // 根据当前搜索引擎执行搜索
        if (currentSearchEngine === 'local') {
            // 执行本地搜索
            performSearch(searchTerm);
        } else {
            // 使用外部搜索引擎
            const engine = searchEngines[currentSearchEngine];
            if (engine && engine.url) {
                // 打开新窗口进行搜索
                window.open(engine.url + encodeURIComponent(searchTerm), '_blank');
            }
        }
    }

    // 搜索框事件处理
    searchInput.addEventListener('keyup', (e) => {
        if (e.key === 'Escape') {
            searchInput.value = '';
            resetSearch();
        } else if (e.key === 'Enter') {
            executeSearch(searchInput.value);
            // 在移动设备上，执行搜索后自动关闭搜索面板
            if (isMobile() && isSearchOpen) {
                closeAllPanels();
            }
        }
    });

    // 阻止搜索框的回车默认行为
    searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
        }
    });

    // 初始化
    window.addEventListener('load', () => {
        // 获取可能在HTML生成后才存在的DOM元素
        const siteCards = document.querySelectorAll('.site-card');
        const categories = document.querySelectorAll('.category');
        const navItems = document.querySelectorAll('.nav-item');
        const navItemWrappers = document.querySelectorAll('.nav-item-wrapper');
        const submenuItems = document.querySelectorAll('.submenu-item');
        pages = document.querySelectorAll('.page');

        // 初始化主题
        initTheme();

        // 初始化侧边栏状态
        initSidebarState();

        // 初始化搜索引擎选择
        initSearchEngine();

        // 初始化MeNav对象版本信息
        try {
            const config = window.MeNav.getConfig();
            if (config && config.version) {
                window.MeNav.version = config.version;
                console.log('MeNav API initialized with version:', config.version);
            }
        } catch (error) {
            console.error('Error initializing MeNav API:', error);
        }

        // 立即执行初始化，不再使用requestAnimationFrame延迟
        // 显示首页
        showPage('home');

        // 添加载入动画
        categories.forEach((category, index) => {
            setTimeout(() => {
                category.style.opacity = '1';
            }, index * 100);
        });

        // 初始展开当前页面的子菜单
        const activeNavItem = document.querySelector('.nav-item.active');
        if (activeNavItem) {
            const activeWrapper = activeNavItem.closest('.nav-item-wrapper');
            if (activeWrapper) {
            }
        }

        // 导航项点击效果
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                if (item.getAttribute('target') === '_blank') return;

                e.preventDefault();

                // 获取当前项的父级wrapper
                const wrapper = item.closest('.nav-item-wrapper');
                const hasSubmenu = wrapper && wrapper.querySelector('.submenu');

                // 处理子菜单展开/折叠
                if (hasSubmenu) {
                    // 如果点击的导航项已经激活且有子菜单，则切换子菜单展开状态
                    if (item.classList.contains('active')) {
                        wrapper.classList.toggle('expanded');
                    } else {
                        // 关闭所有已展开的子菜单
                        navItemWrappers.forEach(navWrapper => {
                            if (navWrapper !== wrapper) {
                                navWrapper.classList.remove('expanded');
                            }
                        });

                        // 展开当前子菜单
                        wrapper.classList.add('expanded');
                    }
                }

                // 激活导航项
                navItems.forEach(nav => {
                    nav.classList.toggle('active', nav === item);
                });

                const pageId = item.getAttribute('data-page');
                if (pageId) {
                    showPage(pageId);

                    // 在移动端视图下点击导航项后自动收起侧边栏
                    if (isMobile() && isSidebarOpen && !hasSubmenu) {
                        closeAllPanels();
                    }
                }
            });
        });

        // 子菜单项点击效果
        submenuItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();

                // 获取页面ID和分类名称
                const pageId = item.getAttribute('data-page');
                const categoryName = item.getAttribute('data-category');

                if (pageId) {
                    // 清除所有子菜单项的激活状态
                    submenuItems.forEach(subItem => {
                        subItem.classList.remove('active');
                    });

                    // 激活当前子菜单项
                    item.classList.add('active');

                    // 激活相应的导航项
                    navItems.forEach(nav => {
                        nav.classList.toggle('active', nav.getAttribute('data-page') === pageId);
                    });

                    // 显示对应页面
                    showPage(pageId);

                    // 等待页面切换完成后滚动到对应分类
                    setTimeout(() => {
                        // 查找目标分类元素
                        const targetPage = document.getElementById(pageId);
                        if (targetPage) {
                            const targetCategory = Array.from(targetPage.querySelectorAll('.category h2')).find(
                                heading => heading.textContent.trim().includes(categoryName)
                            );

                            if (targetCategory) {
                                // 优化的滚动实现：滚动到使目标分类位于视口1/4处（更靠近顶部位置）
                                try {
                                    // 直接获取所需元素和属性，减少重复查询
                                    const contentElement = document.querySelector('.content');

                                    if (contentElement && contentElement.scrollHeight > contentElement.clientHeight) {
                                        // 获取目标元素相对于内容区域的位置
                                        const rect = targetCategory.getBoundingClientRect();
                                        const containerRect = contentElement.getBoundingClientRect();

                                        // 计算目标应该在视口中的位置（视口高度的1/4处）
                                        const desiredPosition = containerRect.height / 4;

                                        // 计算需要滚动的位置
                                        const scrollPosition = contentElement.scrollTop + rect.top - containerRect.top - desiredPosition;

                                        // 执行滚动
                                        contentElement.scrollTo({
                                            top: scrollPosition,
                                            behavior: 'smooth'
                                        });
                                    } else {
                                        // 回退到基本滚动方式
                                        targetCategory.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                    }
                                } catch (error) {
                                    console.error('Error during scroll:', error);
                                    // 回退到基本滚动方式
                                    targetCategory.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                }
                            }
                        }
                    }, 25); // 延迟时间

                    // 在移动端视图下点击子菜单项后自动收起侧边栏
                    if (isMobile() && isSidebarOpen) {
                        closeAllPanels();
                    }
                }
            });
        });

        // 初始化搜索索引（使用requestIdleCallback或setTimeout延迟初始化，避免影响页面加载）
        if ('requestIdleCallback' in window) {
            requestIdleCallback(() => initSearchIndex());
        } else {
            setTimeout(initSearchIndex, 1000);
        }
    });
});