/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

// =============================================
// 动态导航菜单系统
// =============================================

// 导航菜单数据
var menuJsonData = [
	{
		"name": "首页",
		"link": "首页",
		"children": []
	},
	{
		"name": "旅人图鉴",
		"link": "旅人图鉴",
		"children": [
			{
				"name": "测试旅人1",
				"link": "测试旅人1"
			},
			{
				"name": "测试旅人2",
				"link": "测试旅人2"
			}
		]
	},
	{
		"name": "秘纹图鉴",
		"link": "秘纹图鉴",
		"children": []
	},
	{
		"name": "特殊页面",
		"link": "特殊:特殊页面",
		"children": []
	}
];

// 导航菜单管理器
var NavigationMenu = {
    // 初始化所有导航菜单
    initAll: function() {
        // 确保容器存在
        NavigationMenu.ensureContainerExists();
        
        // 初始化容器
        $('.custom-navigation-container').each(function() {
            NavigationMenu.initContainer($(this));
        });
    },
    
    // 确保容器存在，如果不存在则在.header-nav-inner头部插入
    ensureContainerExists: function() {
        // 如果容器已存在，直接返回
        if ($('.custom-navigation-container').length > 0) {
            return;
        }
        
        // 查找.header-nav-inner元素
        var $headerNavInner = $('.header-nav-inner');
        
        if ($headerNavInner.length === 0) {
            console.warn('找不到.header-nav-inner元素，无法插入导航菜单');
            return;
        }
        
        // 创建导航容器
        var $container = $('<div>', {
            class: 'custom-navigation-container',
            id: 'custom-navigation-menu'
        });
        
        // 插入到.header-nav-inner的头部
        $headerNavInner.prepend($container);
        
        console.log('导航容器已插入到.header-nav-inner头部');
    },
    
    // 初始化单个容器
    initContainer: function($container) {
        // 防止重复初始化
        if ($container.data('initialized')) {
            return;
        }
        
        $container.data('initialized', true);
        
        // 加载导航数据
        NavigationMenu.loadNavData()
            .then(function(navData) {
                // 构建导航菜单
                NavigationMenu.buildNavigation($container, navData);
            })
            .catch(function(error) {
                console.error('加载导航数据失败:', error);
                NavigationMenu.showError($container, error);
            });
    },
    
    // 加载导航数据
    loadNavData: function() {
        return new Promise(function(resolve, reject) {
            resolve(menuJsonData);
        });
    },
    
    // 构建导航菜单
    buildNavigation: function($container, navData) {
        // 创建导航菜单HTML
        var navHTML = NavigationMenu.createNavHTML(navData);
        $container.html(navHTML);
        
        // 绑定事件
        NavigationMenu.bindNavEvents($container);
        
        // 添加响应式菜单按钮（移动端）
        NavigationMenu.addMobileMenuButton($container);
        
        // 初始化当前页面高亮
        NavigationMenu.highlightCurrentPage($container);
    },
    
    // 创建导航HTML（递归）
    createNavHTML: function(menuItems, level) {
        level = level || 1;
        
        if (!menuItems || menuItems.length === 0) {
            return '';
        }
        
        var ulClass = level === 1 ? 'nav-menu-primary' : 'nav-menu-sub nav-menu-level-' + level;
        var html = '<ul class="' + ulClass + '">';
        
        menuItems.forEach(function(item, index) {
            var hasChildren = item.children && item.children.length > 0;
            var liClass = 'nav-item';
            var aClass = 'nav-link';
            var submenuHTML = '';
            
            if (hasChildren) {
                liClass += ' has-children';
                aClass += ' has-children-link';
                submenuHTML = NavigationMenu.createNavHTML(item.children, level + 1);
            }
            
            // 构建链接
            var href = item.link ? mw.util.getUrl(item.link) : '#';
            var iconHTML = item.icon ? '<span class="nav-icon">' + item.icon + '</span>' : '';
            var nameHTML = '<span class="nav-text">' + item.name + '</span>';
            var arrowHTML = hasChildren ? '<span class="nav-arrow">▶</span>' : '';
            
            html += '<li class="' + liClass + '" data-link="' + (item.link || '') + '">';
            html += '<a href="' + href + '" class="' + aClass + '" title="' + (item.name || '') + '">';
            html += iconHTML + nameHTML + arrowHTML;
            html += '</a>';
            html += submenuHTML;
            html += '</li>';
            
            // 在一级菜单项之间添加分隔符（除了最后一个）
            if (level === 1 && index < menuItems.length - 1) {
                html += '<span class="navigation-separator"></span>';
            }
        });
        
        html += '</ul>';
        return html;
    },
    
    // 绑定导航事件
    bindNavEvents: function($container) {
        // 用于存储菜单的计时器
        var menuTimers = {};
        
        // 子菜单切换（桌面端悬停，移动端点击）
        if (window.innerWidth >= 768) {
            // 桌面端：悬停显示子菜单
            $container.on('mouseenter', '.nav-item.has-children', function(e) {
                var $this = $(this);
                var menuId = $this.data('link') || $this.index();
                
                // 清除可能存在的关闭计时器
                if (menuTimers[menuId]) {
                    clearTimeout(menuTimers[menuId]);
                    delete menuTimers[menuId];
                }
                
                // 关闭其他打开的菜单
                $container.find('.nav-item.hover').not($this).removeClass('hover');
                $container.find('.nav-menu-sub.active').not($this.find('.nav-menu-sub')).removeClass('active');
                
                // 显示当前菜单
                $this.addClass('hover');
                $this.find('.nav-menu-sub').first().addClass('active');
            });
            
            $container.on('mouseleave', '.nav-item.has-children', function(e) {
                var $this = $(this);
                var menuId = $this.data('link') || $this.index();
                var $submenu = $this.find('.nav-menu-sub').first();
                
                // 设置延迟关闭计时器
                menuTimers[menuId] = setTimeout(function() {
                    $this.removeClass('hover');
                    $submenu.removeClass('active');
                    delete menuTimers[menuId];
                }, 300); // 300ms延迟，避免鼠标短暂离开时立即关闭
            });
            
            // 当鼠标进入子菜单时，清除关闭计时器
            $container.on('mouseenter', '.nav-menu-sub', function(e) {
                var $submenu = $(this);
                var $parent = $submenu.closest('.nav-item');
                var menuId = $parent.data('link') || $parent.index();
                
                // 清除父菜单的关闭计时器
                if (menuTimers[menuId]) {
                    clearTimeout(menuTimers[menuId]);
                    delete menuTimers[menuId];
                }
            });
            
            // 当鼠标离开子菜单时，设置关闭计时器
            $container.on('mouseleave', '.nav-menu-sub', function(e) {
                var $submenu = $(this);
                var $parent = $submenu.closest('.nav-item');
                var menuId = $parent.data('link') || $parent.index();
                
                // 设置延迟关闭计时器
                menuTimers[menuId] = setTimeout(function() {
                    $parent.removeClass('hover');
                    $submenu.removeClass('active');
                    delete menuTimers[menuId];
                }, 300);
            });
        } else {
            // 移动端：点击切换子菜单
            $container.on('click', '.nav-link.has-children-link', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                var $link = $(this);
                var $parent = $link.closest('.nav-item');
                var $submenu = $parent.find('.nav-menu-sub').first();
                
                if ($submenu.hasClass('active')) {
                    $submenu.removeClass('active');
                    $parent.removeClass('expanded');
                } else {
                    // 关闭其他打开的菜单
                    $container.find('.nav-menu-sub.active').removeClass('active');
                    $container.find('.nav-item.expanded').removeClass('expanded');
                    
                    $submenu.addClass('active');
                    $parent.addClass('expanded');
                }
            });
        }
        
        // 点击外部关闭菜单
        $(document).on('click touchstart', function(e) {
            if (!$(e.target).closest('.custom-navigation-container').length) {
                $('.custom-navigation-container').find('.nav-menu-sub.active').removeClass('active');
                $('.custom-navigation-container').find('.nav-item.expanded').removeClass('expanded');
                $('.custom-navigation-container').find('.nav-item.hover').removeClass('hover');
                
                // 清除所有计时器
                for (var timerId in menuTimers) {
                    if (menuTimers.hasOwnProperty(timerId)) {
                        clearTimeout(menuTimers[timerId]);
                    }
                }
                menuTimers = {};
            }
        });
    },
    
    // 添加移动端菜单按钮
    addMobileMenuButton: function($container) {
        var $button = $('<button>', {
            class: 'nav-mobile-toggle',
            html: '<span class="nav-toggle-icon">☰</span>',
            click: function() {
                $container.toggleClass('mobile-open');
                $(this).toggleClass('active');
            }
        });
        
        $container.prepend($button);
    },
    
    // 高亮当前页面
    highlightCurrentPage: function($container) {
        var currentPage = mw.config.get('wgPageName');
        if (!currentPage) return;
        
        // 解码页面名称
        currentPage = decodeURIComponent(currentPage);
        
        // 查找匹配的导航项
        $container.find('.nav-item[data-link]').each(function() {
            var link = $(this).data('link');
            if (link && link === currentPage) {
                $(this).addClass('current-page');
                $(this).find('.nav-link').first().addClass('current');
                
                // 展开父级菜单
                $(this).parents('.nav-item.has-children').addClass('expanded');
                $(this).parents('.nav-menu-sub').addClass('active');
            }
        });
    },
    
    // 显示错误信息
    showError: function($container, error) {
        $container.html(
            '<div class="nav-error">' +
            '   <div class="error-icon">⚠️</div>' +
            '   <div class="error-title">导航菜单加载失败</div>' +
            '   <div class="error-message">' + error + '</div>' +
            '   <button class="error-retry" onclick="window.location.reload()">重试</button>' +
            '</div>'
        );
    }
};

// 添加导航菜单样式
function addNavigationStyles() {
    if ($('#navigation-styles').length) {
        return;
    }
    
    var styles = `
        <style id="navigation-styles">
            /* 导航容器 */
            .custom-navigation-container {
            	flex: 1;
                position: relative;
                background: #4b5082;
                border-radius: 8px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                z-index: 1000;
            }
            
            /* 分隔符样式 */
            .navigation-separator {
                display: inline-block;
                width: 1px;
                height: 20px;
                background-color: rgba(255, 255, 255, 0.2);
                margin: 0 5px;
                vertical-align: middle;
            }
            
            /* 错误状态 */
            .nav-error {
                text-align: center;
                padding: 30px;
                color: #ecf0f1;
            }
            
            .error-icon {
                font-size: 40px;
                margin-bottom: 15px;
            }
            
            .error-title {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 10px;
                color: #e74c3c;
            }
            
            .error-message {
                font-size: 14px;
                margin-bottom: 20px;
                opacity: 0.8;
            }
            
            .error-retry {
                padding: 8px 20px;
                background: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                transition: background-color 0.3s;
            }
            
            .error-retry:hover {
                background: #2980b9;
            }
            
            /* 移动端菜单按钮 */
            .nav-mobile-toggle {
                display: none;
                position: absolute;
                top: 10px;
                right: 10px;
                background: transparent;
                border: none;
                color: white;
                font-size: 24px;
                cursor: pointer;
                z-index: 1001;
                padding: 5px 10px;
                border-radius: 4px;
            }
            
            /* 主菜单 */
            .nav-menu-primary {
                display: flex;
                margin: 0;
                padding: 0;
                list-style: none;
                align-items: center;
            }
            
            /* 导航项 */
            .nav-item {
                position: relative;
                margin: 0;
                padding: 0;
            }
            
            .nav-item > .nav-link {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 5px 20px;
                color: #ecf0f1;
                text-decoration: none !important;
                font-size: 15px;
                font-weight: 500;
                transition: all 0.3s ease;
                white-space: nowrap;
            }
            
            .nav-link:hover {
                background: rgba(255, 255, 255, 0.1);
                color: #3498db;
            }
            
            .nav-link.current {
                color: #3498db;
                font-weight: 600;
            }
            
            .nav-item.current-page > .nav-link {
                color: #3498db;
                font-weight: 600;
            }
            
            .nav-icon {
                font-size: 16px;
                line-height: 1;
            }
            
            .nav-text {
                flex: 1;
            }
            
            .nav-arrow {
                font-size: 10px;
                margin-left: 5px;
                transition: transform 0.3s;
            }
            
            .nav-item.expanded > .nav-link > .nav-arrow {
                transform: rotate(90deg);
            }
            
            /* 子菜单 */
            .nav-menu-sub {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 220px;
                background: white;
                border-radius: 0 0 8px 8px;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
                list-style: none;
                margin: 0;
                padding: 8px 0;
                z-index: 1000;
            }
            
            .nav-menu-sub.active {
                display: block;
            }
            
            .nav-menu-level-2 {
                background: #505587;
            }
            
            .nav-menu-level-3 {
                background: #2c3e50;
            }
            
            /* 子菜单项 */
            .nav-menu-sub .nav-item {
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }
            
            .nav-menu-sub .nav-item:last-child {
                border-bottom: none;
            }
            
            .nav-menu-sub .nav-link {
                padding: 8px 20px;
                color: #ecf0f1;
                font-size: 14px;
            }
            
            .nav-menu-sub .nav-link:hover {
                background: rgba(255, 255, 255, 0.1);
                color: #3498db;
            }
            
            /* 三级菜单位置 */
            .nav-menu-level-2 .nav-item.has-children > .nav-menu-sub {
                top: 0;
                left: 100%;
                border-radius: 0 8px 8px 8px;
            }
            
            /* 响应式设计 */
            @media (max-width: 767px) {
                .custom-navigation-container {
                    border-radius: 0;
                    box-shadow: none;
                }
                
                .navigation-separator {
                    display: none;
                }
                
                .nav-mobile-toggle {
                    display: block;
                }
                
                .nav-menu-primary {
                    display: none;
                    flex-direction: column;
                    padding: 10px 0;
                }
                
                .custom-navigation-container.mobile-open .nav-menu-primary {
                    display: flex;
                }
                
                .nav-menu-sub {
                    position: static;
                    display: none;
                    background: rgba(0, 0, 0, 0.2);
                    box-shadow: none;
                    padding-left: 20px;
                    margin: 0;
                    border-radius: 0;
                }
                
                .nav-menu-sub.active {
                    display: block;
                }
                
                .nav-menu-level-2 .nav-item.has-children > .nav-menu-sub {
                    position: static;
                    left: auto;
                    border-radius: 0;
                }
                
                .nav-link {
                    padding: 12px 20px;
                }
                
                .nav-item.has-children > .nav-link {
                    padding-right: 40px;
                }
            }
            
            @media (min-width: 768px) {
                .nav-item:hover > .nav-menu-sub {
                    display: block;
                }
                
                .nav-menu-sub {
                    animation: fadeInUp 0.3s ease;
                }
                
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }
        </style>
    `;
    
    $('head').append(styles);
}

// 页面加载完成后初始化
$(document).ready(function() {
    // 添加样式
    addNavigationStyles();
    
    // 初始化导航菜单
    NavigationMenu.initAll();
    
    // 监听页面内容动态加载
    mw.hook('wikipage.content').add(function($content) {
        // 重新确保容器存在并初始化
        NavigationMenu.ensureContainerExists();
        NavigationMenu.initAll();
    });
    
    // 窗口大小变化时重新绑定事件
    $(window).on('resize', function() {
        // 移除所有事件，重新绑定
        $('.custom-navigation-container').off();
        NavigationMenu.initAll();
    });
});

// 全局函数：重新加载导航菜单（可用于调试）
window.reloadNavigation = function() {
    // 确保容器存在
    NavigationMenu.ensureContainerExists();
    
    $('.custom-navigation-container').each(function() {
        $(this).removeData('initialized').empty();
        NavigationMenu.initContainer($(this));
    });
};

// 全局函数：手动插入导航菜单到指定位置
window.insertNavigationTo = function(selector) {
    // 移除现有的导航容器
    $('.custom-navigation-container').remove();
    
    // 在指定位置插入新容器
    var $target = $(selector);
    if ($target.length === 0) {
        console.error('找不到目标元素: ' + selector);
        return false;
    }
    
    var $container = $('<div>', {
        class: 'custom-navigation-container',
        id: 'custom-navigation-menu'
    });
    
    $target.prepend($container);
    
    // 重新初始化导航菜单
    reloadNavigation();
    
    return true;
};





// =============================================
// 角色属性查看器 - 动态创建版本
// =============================================

// 角色数据管理器
var CharacterDataManager = {
    cache: {},
    
    getCharacterData: function(characterId) {
        var self = this;
        
        // 检查缓存
        if (self.cache[characterId]) {
            return Promise.resolve(self.cache[characterId]);
        }
        
        return new Promise(function(resolve, reject) {
            // 构建数据页面路径
            var dataSource = 'Data:Character/' + characterId + '.json';
            
            $.get("http://trekkers-wiki.jvav.net.cn/index.php", {
                action: 'raw',
                title: dataSource
            }).done(function(data) {
                try {
                    var characterData = JSON.parse(data);
                    
                    // 缓存数据
                    self.cache[characterId] = characterData;
                    resolve(characterData);
                    
                } catch (e) {
                    reject('解析JSON数据失败: ' + e.message);
                }
            }).fail(function(error) {
                reject('API请求失败: ' + error);
            });
        });
    },
    
    clearCache: function() {
        this.cache = {};
    }
};

// 主初始化函数
$(document).ready(function() {
    // 添加全局样式
    addCharacterStatsStyles();
    
    // 测试代码
    
    // 初始化所有角色属性容器
    $('.character-stats-container').each(function() {
        createCharacterStatsWidget($(this));
    });
    
    // 当有新内容加载时也初始化
    mw.hook('wikipage.content').add(function($content) {
        $content.find('.character-stats-container').each(function() {
            if (!$(this).find('.character-stats-widget').length) {
                createCharacterStatsWidget($(this));
            }
        });
    });
});

// 添加样式到页面
function addCharacterStatsStyles() {
    if ($('#character-stats-styles').length) {
        return; // 样式已存在
    }
    
    var styles = `
        <style id="character-stats-styles">
            .character-stats-widget {
                max-width: 800px;
                margin: 0 auto;
                background-color: #ffffff;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                padding: 30px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            
            .character-header {
                text-align: center;
                margin-bottom: 20px;
            }
            
            .character-name {
                color: #4a6fa5;
                margin-bottom: 10px;
                font-size: 28px;
            }
            
            .character-description {
                color: #666;
                font-style: italic;
                font-size: 16px;
            }
            
            .loading-message, .error-message {
                text-align: center;
                padding: 20px;
                color: #666;
                font-size: 16px;
            }
            
            .error-message {
                color: #d32f2f;
                background-color: #ffebee;
                border-radius: 4px;
                border: 1px solid #f5c6cb;
            }
            
            .level-selector {
                margin-bottom: 30px;
            }
            
            .level-display {
                text-align: center;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 15px;
                color: #4a6fa5;
            }
            
            .slider-container {
                position: relative;
                margin-bottom: 10px;
            }
            
            .slider-container .level-slider {
                width: 100%;
                height: 10px;
                -webkit-appearance: none;
                appearance: none;
                background: linear-gradient(to right, #e0e0e0, #4a6fa5);
                outline: none;
                border-radius: 5px;
                cursor: pointer;
            }
            
            .slider-container .level-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: #4a6fa5;
                cursor: pointer;
                border: 3px solid white;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                transition: all 0.2s;
            }
            
            .slider-container .level-slider::-webkit-slider-thumb:hover {
                background: #3a5a80;
                transform: scale(1.1);
            }
            
            .slider-container .level-slider::-moz-range-thumb {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: #4a6fa5;
                cursor: pointer;
                border: 3px solid white;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .quick-buttons {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 5px;
                margin-top: 10px;
            }
            
            .level-btn {
                flex: 1;
                min-width: 60px;
                padding: 10px 5px;
                background-color: #e9ecef;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-weight: bold;
                transition: all 0.2s;
                font-size: 14px;
            }
            
            .level-btn:hover {
                background-color: #d0d8e2;
                transform: translateY(-2px);
            }
            
            .level-btn.active {
                background-color: #4a6fa5;
                color: white;
                box-shadow: 0 2px 4px rgba(74, 111, 165, 0.3);
            }
            
            .stats-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-top: 20px;
            }
            
            .stat-card {
                background-color: white;
                border-radius: 8px;
                padding: 20px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                border-left: 4px solid #4a6fa5;
                transition: transform 0.2s;
            }
            
            .stat-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .stat-card.attack {
                border-left-color: #ff6b6b;
            }
            
            .stat-card.health {
                border-left-color: #4caf50;
            }
            
            .stat-title {
                font-size: 18px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
            }
            
            .stat-card .stat-value {
                font-size: 32px;
                font-weight: bold;
                margin-bottom: 15px;
                color: #333;
            }
            
            .stat-card .attack .stat-value {
                color: #ff6b6b;
            }
            
            .stat-card .health .stat-value {
                color: #4caf50;
            }
            
            .stat-progress {
                height: 12px;
                background-color: #e9ecef;
                border-radius: 6px;
                overflow: hidden;
                margin-bottom: 10px;
            }
            
            .stat-bar {
                height: 100%;
                border-radius: 6px;
                width: 0%;
                transition: width 0.5s ease;
            }
            
            .attack .stat-bar {
                background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
            }
            
            .health .stat-bar {
                background: linear-gradient(90deg, #4caf50, #66bb6a);
            }
            
            .stat-growth {
                margin-top: 10px;
                font-size: 14px;
                color: #666;
                font-style: italic;
            }
            
            @media (max-width: 768px) {
                .character-stats-widget {
                    padding: 20px;
                    margin: 10px;
                }
                
                .stats-container {
                    grid-template-columns: 1fr;
                    gap: 15px;
                }
                
                .quick-buttons {
                    gap: 3px;
                }
                
                .level-btn {
                    min-width: 50px;
                    padding: 8px 3px;
                    font-size: 12px;
                }
                
                .character-name {
                    font-size: 24px;
                }
                
                .stat-card .stat-value {
                    font-size: 28px;
                }
            }
            
            @media (max-width: 480px) {
                .character-stats-widget {
                    padding: 15px;
                }
                
                .level-btn {
                    min-width: 40px;
                    padding: 6px 2px;
                    font-size: 11px;
                }
                
                .quick-buttons {
                    gap: 2px;
                }
            }
        </style>
    `;
    
    $('head').append(styles);
}

// 创建角色属性查看器
function createCharacterStatsWidget($container) {
    var characterId = $container.data('character');
    
    if (!characterId) {
        $container.html('<div class="error-message">错误：未指定角色ID</div>');
        return;
    }
    
    // 创建 Widget HTML 结构
    var widgetHTML = `
        <div class="character-stats-widget">
            <div class="character-header">
                <h2 class="character-name">加载中...</h2>
                <p class="character-description"></p>
            </div>
            
            <div class="level-selector">
                <div class="level-display">当前等级: <span class="current-level">1</span></div>
                
                <div class="slider-container">
                    <input type="range" min="1" max="90" value="1" class="level-slider">
                </div>
                
                <div class="quick-buttons">
                    <button class="level-btn" data-level="1">1级</button>
                    <button class="level-btn" data-level="10">10级</button>
                    <button class="level-btn" data-level="20">20级</button>
                    <button class="level-btn" data-level="30">30级</button>
                    <button class="level-btn" data-level="40">40级</button>
                    <button class="level-btn" data-level="50">50级</button>
                    <button class="level-btn" data-level="60">60级</button>
                    <button class="level-btn" data-level="70">70级</button>
                    <button class="level-btn" data-level="80">80级</button>
                    <button class="level-btn" data-level="90">90级</button>
                </div>
            </div>
            
            <div class="stats-container">
                <div class="stat-card attack">
                    <div class="stat-title">
                        <span>⚔️ 攻击力</span>
                    </div>
                    <div class="stat-value attack-value">-</div>
                    <div class="stat-progress">
                        <div class="stat-bar attack-bar"></div>
                    </div>
                    <div class="stat-growth">每级成长: <span class="attack-growth">-</span></div>
                </div>
                
                <div class="stat-card health">
                    <div class="stat-title">
                        <span>❤️ 生命值</span>
                    </div>
                    <div class="stat-value health-value">-</div>
                    <div class="stat-progress">
                        <div class="stat-bar health-bar"></div>
                    </div>
                    <div class="stat-growth">每级成长: <span class="health-growth">-</span></div>
                </div>
            </div>
            
            <div class="loading-message">正在加载角色数据...</div>
            <div class="error-message" style="display: none;"></div>
        </div>
    `;
    
    // 插入 HTML
    $container.html(widgetHTML);
    
    // 显示加载状态
    var $widget = $container.find('.character-stats-widget');
    $widget.find('.level-selector, .stats-container').hide();
    $widget.find('.loading-message').show();
    
    // 加载角色数据并初始化
    CharacterDataManager.getCharacterData(characterId)
        .then(function(characterData) {
            initCharacterStats($widget, characterData);
            $widget.find('.loading-message').hide();
            $widget.find('.level-selector, .stats-container').show();
        })
        .catch(function(error) {
            console.error('加载角色数据失败:', error);
            $widget.find('.loading-message').hide();
            $widget.find('.error-message').text('加载角色数据失败: ' + error).show();
        });
}

// 初始化角色属性显示
function initCharacterStats($widget, characterData) {
    // 防止重复初始化
    if ($widget.data('initialized')) {
        return;
    }
    $widget.data('initialized', true);
    
    // 更新角色信息
    $widget.find('.character-name').text(characterData.name);
    $widget.find('.character-description').text(characterData.description);
    
    // 生成完整的等级数据
    var fullLevelData = generateFullLevelData(characterData);
    
    // 获取UI元素
    var $levelSlider = $widget.find('.level-slider');
    var $currentLevel = $widget.find('.current-level');
    var $attackValue = $widget.find('.attack-value');
    var $healthValue = $widget.find('.health-value');
    var $attackBar = $widget.find('.attack-bar');
    var $healthBar = $widget.find('.health-bar');
    var $attackGrowth = $widget.find('.attack-growth');
    var $healthGrowth = $widget.find('.health-growth');
    var $quickButtons = $widget.find('.level-btn');
    
    // 更新显示函数
    function updateDisplay(level) {
        var stats = fullLevelData[level];
        
        $currentLevel.text(level);
        $attackValue.text(formatNumber(stats.attack));
        $healthValue.text(formatNumber(stats.health));
        
        // 显示成长值
        if (characterData.stats) {
            $attackGrowth.text('+' + (characterData.stats.attack_growth || '?'));
            $healthGrowth.text('+' + (characterData.stats.health_growth || '?'));
        }
        
        // 更新进度条宽度 (基于最大值的百分比)
        var maxAttack = fullLevelData[90].attack;
        var maxHealth = fullLevelData[90].health;
        $attackBar.css('width', (stats.attack / maxAttack) * 100 + '%');
        $healthBar.css('width', (stats.health / maxHealth) * 100 + '%');
        
        // 更新快速按钮激活状态
        $quickButtons.removeClass('active');
        $quickButtons.filter('[data-level="' + level + '"]').addClass('active');
    }
    
    // 事件绑定
    $levelSlider.on('input', function() {
        updateDisplay(parseInt(this.value));
    });
    
    $quickButtons.on('click', function() {
        var level = parseInt($(this).data('level'));
        $levelSlider.val(level);
        updateDisplay(level);
    });
    
    // 添加键盘支持
    $levelSlider.on('keydown', function(e) {
        var currentValue = parseInt(this.value);
        switch(e.key) {
            case 'ArrowLeft':
            case 'ArrowDown':
                e.preventDefault();
                this.value = Math.max(1, currentValue - 1);
                updateDisplay(this.value);
                break;
            case 'ArrowRight':
            case 'ArrowUp':
                e.preventDefault();
                this.value = Math.min(90, currentValue + 1);
                updateDisplay(this.value);
                break;
            case 'Home':
                e.preventDefault();
                this.value = 1;
                updateDisplay(this.value);
                break;
            case 'End':
                e.preventDefault();
                this.value = 90;
                updateDisplay(this.value);
                break;
        }
    });
    
    // 初始显示
    updateDisplay(1);
}

// 生成完整等级数据
function generateFullLevelData(characterData) {
    var fullData = {};
    var baseAttack = (characterData.stats && characterData.stats.base_attack) || 100;
    var baseHealth = (characterData.stats && characterData.stats.base_health) || 1000;
    var attackGrowth = (characterData.stats && characterData.stats.attack_growth) || 25;
    var healthGrowth = (characterData.stats && characterData.stats.health_growth) || 300;
    
    // 生成1-90级的完整数据
    for (var level = 1; level <= 90; level++) {
        // 如果有预定义的数据，使用预定义数据，否则计算
        if (characterData.levels && characterData.levels[level]) {
            fullData[level] = characterData.levels[level];
        } else {
            fullData[level] = {
                attack: baseAttack + attackGrowth * (level - 1),
                health: baseHealth + healthGrowth * (level - 1)
            };
        }
    }
    
    return fullData;
}

// 数字格式化函数
function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}





// =============================================
// 赛季BOSS展示页面功能模块
// =============================================

// 赛季BOSS页面初始化器
var SeasonBossPage = {
    // 初始化所有赛季BOSS页面
    initAll: function() {
        $('.season-boss-page').each(function() {
            SeasonBossPage.initPage($(this));
        });
    },
    
    // 初始化单个页面
    initPage: function($page) {
        // 防止重复初始化
        if ($page.data('page-initialized') === 'true') {
            return;
        }
        
        $page.data('page-initialized', 'true');
        
        // 绑定标签切换事件
        SeasonBossPage.bindTabEvents($page);
        
        // 初始化第一个可见的赛季内容
        SeasonBossPage.activateFirstTab($page);
    },
    
    // 绑定标签切换事件
    bindTabEvents: function($page) {
        // 使用事件委托处理标签点击
        $page.on('click', '.season-tab', function(e) {
            e.preventDefault();
            
            var $tab = $(this);
            var seasonId = $tab.data('season');
            
            // 如果已经是激活状态，则不处理
            if ($tab.hasClass('active')) {
                return;
            }
            
            // 切换标签和内容
            SeasonBossPage.switchSeason($page, seasonId);
        });
        
        // 添加键盘支持
        $page.on('keydown', '.season-tab', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                $(this).trigger('click');
            }
        });
    },
    
    // 切换赛季显示
    switchSeason: function($page, seasonId) {
        // 移除所有激活状态
        $page.find('.season-tab').removeClass('active');
        $page.find('.season-content').removeClass('active');
        
        // 添加新的激活状态
        $page.find('.season-tab[data-season="' + seasonId + '"]').addClass('active');
        $page.find('#' + seasonId).addClass('active');
        
        // 触发自定义事件，以便其他模块可以监听赛季切换
        $(document).trigger('seasonboss:seasonchanged', {
            seasonId: seasonId,
            page: $page
        });
        
        // 记录切换日志（仅开发时使用）
        if (console && console.log) {
            console.log('赛季切换至: ' + seasonId);
        }
    },
    
    // 激活第一个标签（如果当前没有激活的标签）
    activateFirstTab: function($page) {
        var $activeTab = $page.find('.season-tab.active');
        
        // 如果没有激活的标签，激活第一个
        if ($activeTab.length === 0) {
            var $firstTab = $page.find('.season-tab').first();
            var seasonId = $firstTab.data('season');
            
            $firstTab.addClass('active');
            $page.find('#' + seasonId).addClass('active');
        }
    },
    
    // 添加新赛季（动态添加功能）
    addSeason: function($page, seasonData) {
        // 参数检查
        if (!seasonData || !seasonData.id || !seasonData.name) {
            console.error('添加赛季失败：缺少必要的赛季数据');
            return false;
        }
        
        var seasonId = seasonData.id;
        var seasonName = seasonData.name;
        var seasonIcon = seasonData.icon || '🏅';
        
        // 检查赛季是否已存在
        if ($page.find('.season-tab[data-season="' + seasonId + '"]').length > 0) {
            console.warn('赛季已存在：' + seasonId);
            return false;
        }
        
        // 创建新标签
        var $newTab = $('<button>', {
            'class': 'season-tab',
            'data-season': seasonId,
            'html': '<span class="season-icon">' + seasonIcon + '</span>' +
                   '<span class="season-name">' + seasonName + '</span>'
        });
        
        // 添加到标签容器
        $page.find('.season-tabs').append($newTab);
        
        // 创建新内容区域
        var $newContent = $('<div>', {
            'class': 'season-content',
            'id': seasonId
        });
        
        // 如果提供了内容，添加到内容区域
        if (seasonData.content) {
            $newContent.html(seasonData.content);
        }
        
        // 添加到内容区域
        $page.find('.season-content').last().after($newContent);
        
        // 重新绑定事件（新添加的元素需要绑定）
        SeasonBossPage.bindTabEvents($page);
        
        return true;
    },
    
    // 获取当前激活的赛季ID
    getActiveSeason: function($page) {
        var $activeTab = $page.find('.season-tab.active');
        return $activeTab.length > 0 ? $activeTab.data('season') : null;
    },
    
    // 跳转到指定赛季
    goToSeason: function($page, seasonId) {
        var $targetTab = $page.find('.season-tab[data-season="' + seasonId + '"]');
        
        if ($targetTab.length === 0) {
            console.error('赛季不存在：' + seasonId);
            return false;
        }
        
        SeasonBossPage.switchSeason($page, seasonId);
        return true;
    }
};

// 页面加载完成后初始化赛季BOSS页面
$(document).ready(function() {
    SeasonBossPage.initAll();
    
    // 监听内容动态加载（例如通过Widgets或AJAX）
    $(document).on('seasonboss:contentloaded', function() {
        SeasonBossPage.initAll();
    });
});

// 当有新内容添加到页面时也初始化
mw.hook('wikipage.content').add(function($content) {
    $content.find('.season-boss-page').each(function() {
        SeasonBossPage.initPage($(this));
    });
});




// =============================================
// 全局可用的函数
// =============================================

// 全局函数：跳转到指定赛季
window.goToSeason = function(seasonId) {
    var $page = $('.season-boss-page').first();
    if ($page.length > 0) {
        return SeasonBossPage.goToSeason($page, seasonId);
    }
    return false;
};

// 全局函数：获取当前赛季
window.getCurrentSeason = function() {
    var $page = $('.season-boss-page').first();
    if ($page.length > 0) {
        return SeasonBossPage.getActiveSeason($page);
    }
    return null;
};

// 全局函数：添加新赛季
window.addNewSeason = function(seasonData) {
    var $page = $('.season-boss-page').first();
    if ($page.length > 0) {
        return SeasonBossPage.addSeason($page, seasonData);
    }
    return false;
};





// =============================================
// 筛选系统
// =============================================

(function (mw, $) {
    'use strict';

    // 筛选器管理器
    var FilterManager = {
        instances: {},
        defaultConfig: {
            autoApply: false,
            multiSelect: true,
            persistState: true,
            showCount: true,
            collapsible: false
        },

        // 初始化所有筛选器
        initAll: function () {
            $('.filter-main').each(function () {
                var $filter = $(this);
                var filterId = $filter.attr('id');

                if (filterId) {
                    FilterManager.init(filterId, $filter);
                }
            });
        },

        // 初始化单个筛选器
        init: function (filterId, $filter) {
            var target = $filter.data('target');
            var autoApply = $filter.data('auto') === 'true';

            if (!target) {
                console.warn('筛选器缺少目标:', filterId);
                return;
            }

            // 创建实例
            var instance = {
                id: filterId,
                $filter: $filter,
                $target: $(target),
                config: $.extend({}, FilterManager.defaultConfig, {
                    autoApply: autoApply
                }),
                state: {
                    activeFilters: {},
                    currentPage: 1,
                    pageSize: 20
                }
            };

            FilterManager.instances[filterId] = instance;

            // 初始化UI事件
            FilterManager.initUIEvents(instance);

            // 初始化数据
            FilterManager.initData(instance);

            // 从URL恢复状态
            FilterManager.restoreFromURL(instance);

            // 初始筛选
            if (Object.keys(instance.state.activeFilters).length > 0) {
                FilterManager.applyFilters(instance);
            }
        },

        // 初始化UI事件
        initUIEvents: function (instance) {
            var $filter = instance.$filter;

            // 筛选项点击
            $filter.on('click', '.filter-option', function (e) {
                e.preventDefault();
                FilterManager.toggleOption(instance, $(this));
            });

            // 应用筛选按钮
            $filter.find('.filter-apply').on('click', function () {
                FilterManager.applyFilters(instance);
            });

            // 重置按钮
            $filter.find('.filter-reset').on('click', function () {
                FilterManager.resetFilters(instance);
            });

            // 清除组按钮
            $filter.on('click', '.filter-group-clear', function (e) {
                e.stopPropagation();
                var group = $(this).data('group');
                FilterManager.clearGroup(instance, group);
            });

            // 清除活动筛选
            $filter.on('click', '.active-filters-clear', function () {
                FilterManager.resetFilters(instance);
            });

            // 移除单个筛选标签
            $filter.on('click', '.active-filter-remove', function (e) {
                e.stopPropagation();
                var $tag = $(this).parent();
                var group = $tag.data('group');
                var value = $tag.data('value');
                FilterManager.removeFilter(instance, group, value);
            });

            // 折叠/展开
            $filter.on('click', '.filter-main-toggle', function () {
                $filter.find('.filter-main-content').toggleClass('collapsed');
                $(this).text($(this).text() === '▼' ? '▲' : '▼');
            });

            // 分页事件
            if ($filter.closest('.filterable-container').find('.filter-pagination').length) {
                FilterManager.initPagination(instance);
            }

            // 键盘支持
            $filter.on('keydown', '.filter-option', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    $(this).click();
                }
            });
        },

        // 初始化数据
        initData: function (instance) {
            // 收集所有可筛选元素的数据
            instance.elements = [];
            instance.$target.each(function () {
                var $el = $(this);
                var data = {};

                // 收集所有data-*属性
                $.each($el.data(), function (key, value) {
                    if (key !== 'toggle' && key !== 'target') {
                        data[key] = value;
                    }
                });

                // 如果没有data属性，从内容中提取
                if ($.isEmptyObject(data) && $el.is('tr, li, div')) {
                    data = FilterManager.extractDataFromContent($el);
                }

                instance.elements.push({
                    $el: $el,
                    data: data,
                    visible: true
                });
            });

            // 初始化筛选组数据
            instance.groups = {};
            instance.$filter.find('.filter-group').each(function () {
                var $group = $(this);
                var groupName = $group.data('group');
                var isMulti = $group.data('multi') === 'true';

                instance.groups[groupName] = {
                    $group: $group,
                    multiSelect: isMulti,
                    options: []
                };

                // 收集选项数据
                $group.find('.filter-option').each(function () {
                    var $option = $(this);
                    instance.groups[groupName].options.push({
                        $option: $option,
                        value: $option.data('value'),
                        display: $option.data('display'),
                        isDefault: $option.data('default') === 'true'
                    });

                    // 设置默认选中
                    if ($option.data('default') === 'true') {
                        $option.addClass('selected');
                        if (!instance.state.activeFilters[groupName]) {
                            instance.state.activeFilters[groupName] = [];
                        }
                        if (instance.state.activeFilters[groupName].indexOf($option.data('value')) === -1) {
                            instance.state.activeFilters[groupName].push($option.data('value'));
                        }
                    }
                });
            });
        },

        // 从内容提取数据
        extractDataFromContent: function ($el) {
            var data = {};

            // 如果是表格行，从单元格提取
            if ($el.is('tr')) {
                $el.find('td[data-field]').each(function () {
                    var field = $(this).data('field');
                    data[field] = $(this).text().trim();
                });
            }
            // 如果是列表项或div，从子元素提取
            else {
                $el.find('[data-field]').each(function () {
                    var field = $(this).data('field');
                    data[field] = $(this).text().trim();
                });
            }

            return data;
        },

        // 切换选项
        toggleOption: function (instance, $option) {
            var group = $option.data('group');
            var value = $option.data('value');
            var isMulti = $option.data('multi') === 'true';

            // 初始化组状态
            if (!instance.state.activeFilters[group]) {
                instance.state.activeFilters[group] = [];
            }

            var filterValues = instance.state.activeFilters[group];
            var index = filterValues.indexOf(value);

            // 处理"全部"选项
            if (value === 'all') {
                if (!$option.hasClass('selected')) {
                    // 选中"全部"，清除同组其他选项
                    instance.$filter.find('.filter-option[data-group="' + group + '"]')
                        .removeClass('selected');
                    $option.addClass('selected');
                    instance.state.activeFilters[group] = [];
                }
                return;
            }

            // 处理单选/多选逻辑
            if (index === -1) {
                // 添加选中
                if (!isMulti && filterValues.length > 0) {
                    // 单选模式，清除同组其他选项
                    var oldValue = filterValues[0];
                    instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="' + oldValue + '"]')
                        .removeClass('selected');
                    filterValues = [];
                }

                filterValues.push(value);
                $option.addClass('selected');

                // 取消"全部"选项的选中
                instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="all"]')
                    .removeClass('selected');
            } else {
                // 移除选中
                filterValues.splice(index, 1);
                $option.removeClass('selected');

                // 如果清空了所有选项，选中"全部"
                if (filterValues.length === 0) {
                    instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="all"]')
                        .addClass('selected');
                }
            }

            instance.state.activeFilters[group] = filterValues;

            // 更新组清除按钮
            FilterManager.updateGroupClearButton(instance, group);

            // 自动应用筛选
            if (instance.config.autoApply) {
                FilterManager.applyFilters(instance);
            }
        },

        // 应用筛选
        applyFilters: function (instance) {
            var matchedCount = 0;
            var totalCount = instance.elements.length;

            // 遍历所有元素
            instance.elements.forEach(function (item) {
                var shouldShow = true;

                // 检查每个筛选条件
                for (var group in instance.state.activeFilters) {
                    var filterValues = instance.state.activeFilters[group];

                    if (filterValues.length === 0) continue;

                    var elementValue = item.data[group];
                    if (elementValue === undefined) continue;

                    // 检查是否匹配
                    var isMatched = false;
                    for (var i = 0; i < filterValues.length; i++) {
                        if (elementValue == filterValues[i]) {
                            isMatched = true;
                            break;
                        }
                    }

                    if (!isMatched) {
                        shouldShow = false;
                        break;
                    }
                }

                // 更新元素状态
                item.visible = shouldShow;
                if (shouldShow) {
                    item.$el.removeClass('filtered-out').addClass('filtered-in');
                    matchedCount++;
                } else {
                    item.$el.removeClass('filtered-in').addClass('filtered-out');
                }
            });

            // 更新UI
            FilterManager.updateActiveFilters(instance);
            FilterManager.updateResults(instance, matchedCount, totalCount);
            FilterManager.saveToURL(instance);

            // 更新分页
            if (instance.$filter.closest('.filterable-container').find('.filter-pagination').length) {
                FilterManager.updatePagination(instance);
            }

            // 触发事件
            $(document).trigger('filter:applied', {
                instance: instance,
                matched: matchedCount,
                total: totalCount
            });
        },

        // 重置筛选
        resetFilters: function (instance) {
            // 清除所有选中状态
            instance.state.activeFilters = {};

            // 清除UI选中状态
            instance.$filter.find('.filter-option').removeClass('selected');

            // 重置为默认选中
            instance.$filter.find('.filter-option[data-default="true"]').addClass('selected');
            instance.$filter.find('.filter-option[data-value="all"]').addClass('selected');

            // 重新收集默认选中项
            for (var group in instance.groups) {
                instance.groups[group].options.forEach(function (option) {
                    if (option.isDefault) {
                        if (!instance.state.activeFilters[group]) {
                            instance.state.activeFilters[group] = [];
                        }
                        instance.state.activeFilters[group].push(option.value);
                    }
                });
            }

            // 清除活动筛选标签
            instance.$filter.find('.active-filters').hide().find('.active-filters-list').empty();

            // 隐藏组清除按钮
            instance.$filter.find('.filter-group-clear').hide();

            // 应用筛选
            FilterManager.applyFilters(instance);

            // 清除URL
            FilterManager.clearURL(instance);
        },

        // 清除单个组
        clearGroup: function (instance, group) {
            // 清除该组所有选中
            instance.$filter.find('.filter-option[data-group="' + group + '"]')
                .removeClass('selected');

            // 选中"全部"选项
            instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="all"]')
                .addClass('selected');

            // 更新状态
            delete instance.state.activeFilters[group];

            // 应用筛选
            FilterManager.applyFilters(instance);
        },

        // 移除单个筛选
        removeFilter: function (instance, group, value) {
            var filterValues = instance.state.activeFilters[group];
            if (filterValues) {
                var index = filterValues.indexOf(value);
                if (index !== -1) {
                    filterValues.splice(index, 1);

                    // 更新UI
                    instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="' + value + '"]')
                        .removeClass('selected');

                    // 如果清空了，选中"全部"
                    if (filterValues.length === 0) {
                        instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="all"]')
                            .addClass('selected');
                    }

                    // 应用筛选
                    FilterManager.applyFilters(instance);
                }
            }
        },

        // 更新组清除按钮
        updateGroupClearButton: function (instance, group) {
            var $group = instance.$filter.find('.filter-group[data-group="' + group + '"]');
            var $clearBtn = $group.find('.filter-group-clear');
            var filterValues = instance.state.activeFilters[group];

            if (filterValues && filterValues.length > 0) {
                $clearBtn.show();
            } else {
                $clearBtn.hide();
            }
        },

        // 更新活动筛选标签
        updateActiveFilters: function (instance) {
            var $activeFilters = instance.$filter.find('.active-filters');
            var $activeFiltersList = instance.$filter.find('.active-filters-list');

            $activeFiltersList.empty();

            var hasActiveFilters = false;

            for (var group in instance.state.activeFilters) {
                var filterValues = instance.state.activeFilters[group];
                var $group = instance.$filter.find('.filter-group[data-group="' + group + '"]');
                var groupLabel = $group.data('label') || group;

                filterValues.forEach(function (value) {
                    if (value === 'all') return;

                    var $option = instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="' + value + '"]');
                    var displayText = $option.data('display') || value;
                    var icon = $option.find('.filter-option-icon').text();

                    var $tag = $('<span class="active-filter-tag"></span>')
                        .attr('data-group', group)
                        .attr('data-value', value)
                        .html(
                            (icon ? '<span class="active-filter-icon">' + icon + '</span>' : '') +
                            '<span class="active-filter-text">' + groupLabel + ': ' + displayText + '</span>' +
                            '<button type="button" class="active-filter-remove">×</button>'
                        );

                    $activeFiltersList.append($tag);
                    hasActiveFilters = true;
                });
            }

            if (hasActiveFilters) {
                $activeFilters.show();
            } else {
                $activeFilters.hide();
            }
        },

        // 更新结果统计
        updateResults: function (instance, matched, total) {
            var $results = instance.$filter.find('.filter-results');
            if ($results.length) {
                $results.find('.filter-total').text(total);
                $results.find('.filter-matched').text(matched);
                $results.show();
            }
        },

        // URL相关方法
        saveToURL: function (instance) {
            if (!instance.config.persistState) return;

            var params = {};

            for (var group in instance.state.activeFilters) {
                var values = instance.state.activeFilters[group];
                if (values.length > 0) {
                    params[instance.id + '_' + group] = values.join(',');
                }
            }

            FilterManager.updateURL(params);
        },

        restoreFromURL: function (instance) {
            var params = FilterManager.getURLParams();

            for (var key in params) {
                if (key.startsWith(instance.id + '_')) {
                    var group = key.replace(instance.id + '_', '');
                    var values = params[key].split(',');

                    values.forEach(function (value) {
                        var $option = instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="' + value + '"]');
                        if ($option.length) {
                            $option.addClass('selected');
                            if (!instance.state.activeFilters[group]) {
                                instance.state.activeFilters[group] = [];
                            }
                            if (instance.state.activeFilters[group].indexOf(value) === -1) {
                                instance.state.activeFilters[group].push(value);
                            }

                            // 取消"全部"选项的选中
                            instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="all"]')
                                .removeClass('selected');
                        }
                    });
                }
            }
        },

        clearURL: function (instance) {
            var params = FilterManager.getURLParams();
            var changed = false;

            for (var key in params) {
                if (key.startsWith(instance.id + '_')) {
                    delete params[key];
                    changed = true;
                }
            }

            if (changed) {
                FilterManager.updateURL(params);
            }
        },

        getURLParams: function () {
            var params = {};
            var search = window.location.search.substring(1);

            if (search) {
                var pairs = search.split('&');
                pairs.forEach(function (pair) {
                    var kv = pair.split('=');
                    if (kv[0]) {
                        params[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1] || '');
                    }
                });
            }

            return params;
        },

        updateURL: function (params) {
            var url = new URL(window.location);

            // 清除旧参数
            url.searchParams.forEach(function (value, key) {
                url.searchParams.delete(key);
            });

            // 添加新参数
            for (var key in params) {
                if (params[key]) {
                    url.searchParams.set(encodeURIComponent(key), encodeURIComponent(params[key]));
                }
            }

            window.history.replaceState({}, '', url.toString());
        },

        // 分页相关
        initPagination: function (instance) {
            var $container = instance.$filter.closest('.filterable-container');

            $container.find('.filter-pagination-prev').on('click', function () {
                FilterManager.prevPage(instance);
            });

            $container.find('.filter-pagination-next').on('click', function () {
                FilterManager.nextPage(instance);
            });

            $container.find('.filter-page-size').on('change', function () {
                instance.state.pageSize = parseInt($(this).val());
                instance.state.currentPage = 1;
                FilterManager.updatePagination(instance);
            });
        },

        updatePagination: function (instance) {
            var $container = instance.$filter.closest('.filterable-container');
            var visibleElements = instance.elements.filter(function (item) {
                return item.visible;
            });
            var totalPages = Math.ceil(visibleElements.length / instance.state.pageSize);
            var start = (instance.state.currentPage - 1) * instance.state.pageSize;
            var end = start + instance.state.pageSize;

            // 隐藏所有元素
            instance.elements.forEach(function (item) {
                item.$el.hide();
            });

            // 显示当前页元素
            visibleElements.slice(start, end).forEach(function (item) {
                item.$el.show();
            });

            // 更新分页控件
            $container.find('.current-page').text(instance.state.currentPage);
            $container.find('.filter-pagination-prev').prop('disabled', instance.state.currentPage === 1);
            $container.find('.filter-pagination-next').prop('disabled', instance.state.currentPage >= totalPages || totalPages === 0);
        },

        prevPage: function (instance) {
            if (instance.state.currentPage > 1) {
                instance.state.currentPage--;
                FilterManager.updatePagination(instance);
            }
        },

        nextPage: function (instance) {
            var visibleElements = instance.elements.filter(function (item) {
                return item.visible;
            });
            var totalPages = Math.ceil(visibleElements.length / instance.state.pageSize);

            if (instance.state.currentPage < totalPages) {
                instance.state.currentPage++;
                FilterManager.updatePagination(instance);
            }
        },

        // 公开API
        api: {
            getInstance: function (filterId) {
                return FilterManager.instances[filterId];
            },

            applyFilter: function (filterId) {
                var instance = FilterManager.instances[filterId];
                if (instance) {
                    FilterManager.applyFilters(instance);
                }
            },

            resetFilter: function (filterId) {
                var instance = FilterManager.instances[filterId];
                if (instance) {
                    FilterManager.resetFilters(instance);
                }
            },

            getFilterState: function (filterId) {
                var instance = FilterManager.instances[filterId];
                return instance ? instance.state.activeFilters : null;
            },

            setFilterValue: function (filterId, group, value) {
                var instance = FilterManager.instances[filterId];
                if (instance) {
                    var $option = instance.$filter.find('.filter-option[data-group="' + group + '"][data-value="' + value + '"]');
                    if ($option.length) {
                        FilterManager.toggleOption(instance, $option);
                    }
                }
            }
        }
    };

    // 全局初始化
    $(function () {
        FilterManager.initAll();
    });

    // 全局API
    window.MediaWikiFilter = FilterManager.api;

    // 全局键盘快捷键
    // $(document).on('keydown', function (e) {
    //     // Ctrl+F 聚焦到第一个筛选器
    //     if (e.ctrlKey && e.key === 'f') {
    //         e.preventDefault();
    //         var $firstFilter = $('.filter-main').first();
    //         if ($firstFilter.length) {
    //             $firstFilter.find('.filter-option').first().focus();
    //         }
    //     }

    //     // ESC 清除所有筛选
    //     if (e.key === 'Escape') {
    //         for (var filterId in FilterManager.instances) {
    //             FilterManager.resetFilters(FilterManager.instances[filterId]);
    //         }
    //     }
    // });

})(mediaWiki, jQuery);