// 全局变量
let domainDataCache = {
    blocked: null,
    resolved: null
};
let domainUpdateTimer = null;
const DOMAIN_UPDATE_INTERVAL = 5000; // 域名排行更新间隔，设为5秒，比统计数据更新慢一些

// 初始化小型图表 - 修复Canvas重用问题
function initMiniCharts() {
    // 获取所有图表容器
    const chartContainers = document.querySelectorAll('.chart-card canvas');
    
    // 全局图表实例存储
    window.chartInstances = window.chartInstances || {};
    
    chartContainers.forEach(canvas => {
        // 获取图表数据属性
        const chartId = canvas.id;
        const chartType = canvas.dataset.chartType || 'line';
        const chartData = JSON.parse(canvas.dataset.chartData || '{}');
        
        // 设置图表上下文
        const ctx = canvas.getContext('2d');
        
        // 销毁已存在的图表实例，避免Canvas重用错误
        if (window.chartInstances[chartId]) {
            window.chartInstances[chartId].destroy();
        }
        
        // 创建新图表
        window.chartInstances[chartId] = new Chart(ctx, {
            type: chartType,
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 10,
                        cornerRadius: 4
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                animation: {
                    duration: 1000,
                    easing: 'easeOutQuart'
                }
            }
        });
    });
}

// 初始化仪表盘面板
function initDashboardPanel() {
    // 初始化小型图表
    if (typeof initMiniCharts === 'function') {
        initMiniCharts();
    }
    // 加载统计数据
    loadDashboardData();
    // 启动实时更新
    if (typeof startRealTimeUpdate === 'function') {
        startRealTimeUpdate();
    }
    // 启动域名排行的独立更新
    startDomainUpdate();
    
    // 初始化响应式侧边栏
    initResponsiveSidebar();
}

// 初始化响应式侧边栏
function initResponsiveSidebar() {
    // 创建侧边栏切换按钮
    const toggleBtn = document.createElement('button');
    toggleBtn.className = 'sidebar-toggle';
    toggleBtn.innerHTML = '<i class="fas fa-bars"></i>';
    document.body.appendChild(toggleBtn);
    
    // 侧边栏切换逻辑
    toggleBtn.addEventListener('click', function() {
        const sidebar = document.querySelector('.sidebar');
        sidebar.classList.toggle('open');
        
        // 更新按钮图标
        const icon = toggleBtn.querySelector('i');
        if (sidebar.classList.contains('open')) {
            icon.className = 'fas fa-times';
        } else {
            icon.className = 'fas fa-bars';
        }
    });
    
    // 在侧边栏打开时点击内容区域关闭侧边栏
    const content = document.querySelector('.content');
    content.addEventListener('click', function() {
        const sidebar = document.querySelector('.sidebar');
        const toggleBtn = document.querySelector('.sidebar-toggle');
        if (sidebar.classList.contains('open') && window.innerWidth <= 768) {
            sidebar.classList.remove('open');
            if (toggleBtn) {
                const icon = toggleBtn.querySelector('i');
                icon.className = 'fas fa-bars';
            }
        }
    });
    
    // 窗口大小变化时调整侧边栏状态
    window.addEventListener('resize', function() {
        const sidebar = document.querySelector('.sidebar');
        const toggleBtn = document.querySelector('.sidebar-toggle');
        
        if (window.innerWidth > 768) {
            sidebar.classList.remove('open');
            if (toggleBtn) {
                const icon = toggleBtn.querySelector('i');
                icon.className = 'fas fa-bars';
            }
        }
    });
}

// 加载仪表盘数据
function loadDashboardData() {
    // 加载统计卡片数据
    updateStatCards();
    
    // 首次加载时获取域名排行数据
    if (!domainDataCache.blocked) {
        loadTopBlockedDomains();
    }
    if (!domainDataCache.resolved) {
        loadTopResolvedDomains();
    }
}

// 启动域名排行的独立更新
function startDomainUpdate() {
    if (domainUpdateTimer) {
        clearInterval(domainUpdateTimer);
    }
    
    // 立即执行一次更新
    updateDomainRankings();
    
    // 设置定时器
    domainUpdateTimer = setInterval(() => {
        // 仅当当前面板是仪表盘时更新数据
        if (document.getElementById('dashboard') && document.getElementById('dashboard').classList.contains('active')) {
            updateDomainRankings();
        }
    }, DOMAIN_UPDATE_INTERVAL);
}

// 停止域名排行更新
function stopDomainUpdate() {
    if (domainUpdateTimer) {
        clearInterval(domainUpdateTimer);
        domainUpdateTimer = null;
    }
}

// 更新域名排行数据
function updateDomainRankings() {
    // 使用Promise.all并行加载，提高效率
    Promise.all([
        loadTopBlockedDomains(true),
        loadTopResolvedDomains(true)
    ]).catch(error => {
        console.error('更新域名排行数据失败:', error);
    });
}

// 更新统计卡片数据
function updateStatCards() {
    // 获取所有统计数据
    apiRequest('/stats')
        .then(data => {
            // 更新请求统计
            if (data && data.dns) {
                // 屏蔽请求
                const blockedCount = data.dns.Blocked || data.dns.blocked || 0;
                smoothUpdateStatCard('blocked-count', blockedCount);
                
                // 允许请求
                const allowedCount = data.dns.Allowed || data.dns.allowed || 0;
                smoothUpdateStatCard('allowed-count', allowedCount);
                
                // 错误请求
                const errorCount = data.dns.Errors || data.dns.errors || 0;
                smoothUpdateStatCard('error-count', errorCount);
                
                // 总请求数
                const totalCount = blockedCount + allowedCount + errorCount;
                smoothUpdateStatCard('total-queries', totalCount);
                
                // 更新数据历史记录和小型图表
                if (typeof updateDataHistory === 'function') {
                    updateDataHistory('blocked', blockedCount);
                    updateDataHistory('query', totalCount);
                }
                
                // 更新小型图表
                if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
                    updateMiniChart('blocked-chart', dataHistory.blocked);
                    updateMiniChart('query-chart', dataHistory.query);
                }
            } else {
                // 处理其他可能的数据格式
                const blockedValue = data && (data.Blocked !== undefined ? data.Blocked : (data.blocked !== undefined ? data.blocked : 0));
                const allowedValue = data && (data.Allowed !== undefined ? data.Allowed : (data.allowed !== undefined ? data.allowed : 0));
                const errorValue = data && (data.Errors !== undefined ? data.Errors : (data.errors !== undefined ? data.errors : 0));
                smoothUpdateStatCard('blocked-count', blockedValue);
                smoothUpdateStatCard('allowed-count', allowedValue);
                smoothUpdateStatCard('error-count', errorValue);
                const totalCount = blockedValue + allowedValue + errorValue;
                smoothUpdateStatCard('total-queries', totalCount);
            }
        })
        .catch(error => {
            console.error('获取统计数据失败:', error);
        });
    
    // 获取规则数
    apiRequest('/shield')
        .then(data => {
            let rulesCount = 0;
            
            // 增强的数据格式处理，确保能正确处理各种返回格式
            if (Array.isArray(data)) {
                rulesCount = data.length;
            } else if (data && data.rules && Array.isArray(data.rules)) {
                rulesCount = data.rules.length;
            } else if (data && data.domainRules) {
                // 处理可能的规则分类格式
                let domainRulesCount = 0;
                let regexRulesCount = 0;
                
                if (Array.isArray(data.domainRules)) {
                    domainRulesCount = data.domainRules.length;
                } else if (typeof data.domainRules === 'object') {
                    domainRulesCount = Object.keys(data.domainRules).length;
                }
                
                if (data.regexRules && Array.isArray(data.regexRules)) {
                    regexRulesCount = data.regexRules.length;
                }
                
                rulesCount = domainRulesCount + regexRulesCount;
            }
            
            // 确保至少显示0而不是--
            smoothUpdateStatCard('rules-count', rulesCount);
            
            // 更新数据历史记录和小型图表
            if (typeof updateDataHistory === 'function') {
                updateDataHistory('rules', rulesCount);
            }
            
            if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
                updateMiniChart('rules-chart', dataHistory.rules);
            }
        })
        .catch(error => {
            console.error('获取规则数失败:', error);
            // 即使出错也要设置为0，避免显示--
            smoothUpdateStatCard('rules-count', 0);
        });
    
    // 获取Hosts条目数量
    apiRequest('/shield/hosts')
        .then(data => {
            let hostsCount = 0;
            
            // 处理各种可能的数据格式
            if (Array.isArray(data)) {
                hostsCount = data.length;
            } else if (data && data.hosts && Array.isArray(data.hosts)) {
                hostsCount = data.hosts.length;
            } else if (data && typeof data === 'object' && data !== null) {
                // 如果是对象格式，计算键的数量
                hostsCount = Object.keys(data).length;
            }
            
            // 确保至少显示0而不是--
            smoothUpdateStatCard('hosts-count', hostsCount);
            
            // 更新数据历史记录和小型图表
            if (typeof updateDataHistory === 'function') {
                updateDataHistory('hosts', hostsCount);
            }
            
            if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
                updateMiniChart('hosts-chart', dataHistory.hosts);
            }
        })
        .catch(error => {
            console.error('获取Hosts数量失败:', error);
            // 即使出错也要设置为0，避免显示--
            smoothUpdateStatCard('hosts-count', 0);
        });
    
    // 获取Hosts条目数
    apiRequest('/shield/hosts')
        .then(data => {
            let hostsCount = 0;
            if (Array.isArray(data)) {
                hostsCount = data.length;
            } else if (data && data.hosts && Array.isArray(data.hosts)) {
                hostsCount = data.hosts.length;
            }
            
            smoothUpdateStatCard('hosts-count', hostsCount);
            
            // 更新数据历史记录和小型图表
            if (typeof updateDataHistory === 'function') {
                updateDataHistory('hosts', hostsCount);
            }
            
            if (typeof updateMiniChart === 'function' && typeof dataHistory !== 'undefined') {
                updateMiniChart('hosts-chart', dataHistory.hosts);
            }
        })
        .catch(error => {
            console.error('获取Hosts条目数失败:', error);
        });
}


// 更新单个统计卡片
function updateStatCard(elementId, value) {
    const element = document.getElementById(elementId);
    if (!element) return;
    
    // 格式化为可读数字
    const formattedValue = formatNumber(value);
    
    // 更新显示
    element.textContent = formattedValue;
    
    // 使用全局checkAndAnimate函数检测变化并添加光晕效果
    if (typeof checkAndAnimate === 'function') {
        checkAndAnimate(elementId, value);
    }
}

// 平滑更新统计卡片（数字递增动画）
function smoothUpdateStatCard(elementId, newValue) {
    const element = document.getElementById(elementId);
    if (!element) return;
    
    // 获取旧值
    const oldValue = previousStats[elementId] || 0;
    
    // 如果值相同，不更新
    if (newValue === oldValue) return;
    
    // 如果是初始值，直接更新
    if (oldValue === 0 || oldValue === '--') {
        updateStatCard(elementId, newValue);
        return;
    }
    
    // 设置动画持续时间
    const duration = 500; // 500ms
    const startTime = performance.now();
    
    // 动画函数
    function animate(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        
        // 使用缓动函数
        const easeOutQuad = 1 - (1 - progress) * (1 - progress);
        
        // 计算当前值
        const currentValue = Math.floor(oldValue + (newValue - oldValue) * easeOutQuad);
        
        // 更新显示
        element.textContent = formatNumber(currentValue);
        
        // 继续动画
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            // 动画完成，设置最终值
            element.textContent = formatNumber(newValue);
            // 添加光晕效果
            element.classList.add('update');
            setTimeout(() => {
                element.classList.remove('update');
            }, 1000);
            // 更新记录
            previousStats[elementId] = newValue;
        }
    }
    
    // 开始动画
    requestAnimationFrame(animate);
}

// 加载24小时统计数据
function loadHourlyStats() {
    apiRequest('/hourly-stats')
        .then(data => {
            // 检查数据是否变化，避免不必要的重绘
            if (typeof previousChartData !== 'undefined' && 
                JSON.stringify(previousChartData) === JSON.stringify(data)) {
                return; // 数据未变化，无需更新图表
            }
            
            previousChartData = JSON.parse(JSON.stringify(data));
            
            // 处理不同可能的数据格式
            if (data) {
                // 优先处理用户提供的实际数据格式 {data: [], labels: []}
                if (data.labels && data.data && Array.isArray(data.labels) && Array.isArray(data.data)) {
                    // 确保labels和data数组长度一致
                    if (data.labels.length === data.data.length) {
                        // 假设data数组包含的是屏蔽请求数据，允许请求设为0
                        renderHourlyChart(data.labels, data.data, Array(data.data.length).fill(0));
                        return;
                    }
                }
                
                // 处理其他可能的数据格式
                if (data.labels && data.blocked && data.allowed) {
                    // 完整数据格式：分别有屏蔽和允许的数据
                    renderHourlyChart(data.labels, data.blocked, data.allowed);
                } else if (data.labels && data.data) {
                    // 简化数据格式：只有一组数据
                    renderHourlyChart(data.labels, data.data, Array(data.data.length).fill(0));
                } else {
                    // 尝试直接使用数据对象的属性
                    const hours = [];
                    const blocked = [];
                    const allowed = [];
                    
                    // 假设数据是按小时组织的对象
                    for (const key in data) {
                        if (data.hasOwnProperty(key)) {
                            hours.push(key);
                            // 尝试不同的数据结构访问方式
                            if (typeof data[key] === 'object' && data[key] !== null) {
                                blocked.push(data[key].Blocked || data[key].blocked || 0);
                                allowed.push(data[key].Allowed || data[key].allowed || 0);
                            } else {
                                blocked.push(data[key]);
                                allowed.push(0);
                            }
                        }
                    }
                    
                    // 只在有数据时渲染
                    if (hours.length > 0) {
                        renderHourlyChart(hours, blocked, allowed);
                    }
                }
            }
        })
        .catch(error => {
            console.error('获取24小时统计失败:', error);
            // 显示默认空数据，避免图表区域空白
            const emptyHours = Array.from({length: 24}, (_, i) => `${i}:00`);
            const emptyData = Array(24).fill(0);
            renderHourlyChart(emptyHours, emptyData, emptyData);
        });
}

// 渲染24小时统计图表 - 使用ECharts重新设计
function renderHourlyChart(hours, blocked, allowed) {
    const chartContainer = document.getElementById('hourly-chart');
    if (!chartContainer) return;
    
    // 销毁现有ECharts实例
    if (window.hourlyChart) {
        window.hourlyChart.dispose();
    }
    
    // 创建ECharts实例
    window.hourlyChart = echarts.init(chartContainer);
    
    // 计算24小时内的最大请求数，为Y轴设置合适的上限
    const maxRequests = Math.max(...blocked, ...allowed);
    const yAxisMax = maxRequests > 0 ? Math.ceil(maxRequests * 1.2) : 10;
    
    // 设置ECharts配置
    const option = {
        title: {
            text: '24小时请求统计',
            left: 'center',
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal'
            }
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            borderColor: '#ddd',
            borderWidth: 1,
            textStyle: {
                color: '#333'
            },
            formatter: function(params) {
                let result = params[0].name + '<br/>';
                params.forEach(param => {
                    result += param.marker + param.seriesName + ': ' + param.value + '<br/>';
                });
                return result;
            }
        },
        legend: {
            data: ['屏蔽请求', '允许请求'],
            top: '10%',
            textStyle: {
                color: '#666'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '25%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: hours,
            axisLabel: {
                color: '#666',
                interval: 1, // 每隔一个小时显示一个标签，避免拥挤
                rotate: 30 // 标签旋转30度，提高可读性
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: yAxisMax,
            axisLabel: {
                color: '#666',
                formatter: '{value}'
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '屏蔽请求',
                type: 'line',
                smooth: true, // 平滑曲线
                symbol: 'circle', // 拐点形状
                symbolSize: 6, // 拐点大小
                data: blocked,
                itemStyle: {
                    color: '#e74c3c'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(231, 76, 60, 0.3)' },
                        { offset: 1, color: 'rgba(231, 76, 60, 0.05)' }
                    ])
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#fff',
                        shadowBlur: 10,
                        shadowColor: 'rgba(231, 76, 60, 0.5)'
                    }
                },
                animationDuration: 800,
                animationEasing: 'cubicOut'
            },
            {
                name: '允许请求',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                data: allowed,
                itemStyle: {
                    color: '#2ecc71'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(46, 204, 113, 0.3)' },
                        { offset: 1, color: 'rgba(46, 204, 113, 0.05)' }
                    ])
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#fff',
                        shadowBlur: 10,
                        shadowColor: 'rgba(46, 204, 113, 0.5)'
                    }
                },
                animationDuration: 800,
                animationEasing: 'cubicOut'
            }
        ],
        // 添加数据提示功能
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ['line', 'bar']
                },
                restore: {},
                saveAsImage: {}
            },
            top: '15%'
        },
        // 添加数据缩放功能
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                start: 0,
                end: 100,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23.1h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }
        ]
    };
    
    // 应用配置项
    window.hourlyChart.setOption(option);
    
    // 添加窗口大小变化时的自适应
    window.addEventListener('resize', function() {
        if (window.hourlyChart) {
            window.hourlyChart.resize();
        }
    });
}

// 加载请求类型分布 - 注意：后端可能没有这个API，暂时注释掉
function loadRequestsDistribution() {
    // 后端没有对应的API路由，暂时跳过
    console.log('请求类型分布API暂不可用');
    return Promise.resolve()
        .then(data => {
            // 检查数据是否变化，避免不必要的重绘
            if (typeof previousFullData !== 'undefined' && 
                JSON.stringify(previousFullData) === JSON.stringify(data)) {
                return; // 数据未变化，无需更新图表
            }
            
            previousFullData = JSON.parse(JSON.stringify(data));
            
            // 构造饼图所需的数据，支持多种数据格式
            const labels = ['允许请求', '屏蔽请求', '错误请求'];
            let requestData = [0, 0, 0]; // 默认值
            
            if (data) {
                // 尝试多种可能的数据结构
                if (data.dns) {
                    // 主要数据结构
                    requestData = [
                        data.dns.Allowed || data.dns.allowed || 0,
                        data.dns.Blocked || data.dns.blocked || 0,
                        data.dns.Errors || data.dns.errors || 0
                    ];
                } else if (data.Allowed !== undefined || data.Blocked !== undefined) {
                    // 直接在顶级对象中
                    requestData = [
                        data.Allowed || data.allowed || 0,
                        data.Blocked || data.blocked || 0,
                        data.Errors || data.errors || 0
                    ];
                } else if (data.requests) {
                    // 可能在requests属性中
                    requestData = [
                        data.requests.Allowed || data.requests.allowed || 0,
                        data.requests.Blocked || data.requests.blocked || 0,
                        data.requests.Errors || data.requests.errors || 0
                    ];
                }
            }
            
            // 渲染图表，即使数据全为0也渲染，避免空白
            renderRequestsPieChart(labels, requestData);
        })
        .catch(error => {
            console.error('获取请求类型分布失败:', error);
            // 显示默认空数据的图表
            const labels = ['允许请求', '屏蔽请求', '错误请求'];
            const defaultData = [0, 0, 0];
            renderRequestsPieChart(labels, defaultData);
        });
}

// 渲染请求类型饼图
function renderRequestsPieChart(labels, data) {
    const ctx = document.getElementById('requests-pie-chart');
    if (!ctx) return;
    
    // 销毁现有图表
    if (window.requestsPieChart) {
        window.requestsPieChart.destroy();
    }
    
    // 创建新图表
    window.requestsPieChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: [
                    '#2ecc71',  // 允许
                    '#e74c3c',  // 屏蔽
                    '#f39c12',  // 错误
                    '#9b59b6'   // 其他
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((value / total) * 100).toFixed(1);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            },
            cutout: '60%',
            animation: {
                duration: 500 // 快速动画，提升实时更新体验
            }
        }
    });
}

// 辅助函数：深度比较两个对象是否相等
function isEqual(obj1, obj2) {
    // 处理null或undefined情况
    if (obj1 === obj2) return true;
    if (obj1 == null || obj2 == null) return false;
    
    // 确保都是数组
    if (!Array.isArray(obj1) || !Array.isArray(obj2)) return false;
    if (obj1.length !== obj2.length) return false;
    
    // 比较数组中每个元素
    for (let i = 0; i < obj1.length; i++) {
        const a = obj1[i];
        const b = obj2[i];
        
        // 比较域名和计数
        if (a.domain !== b.domain || a.count !== b.count) {
            return false;
        }
    }
    
    return true;
}

// 加载最常屏蔽的域名
function loadTopBlockedDomains(isUpdate = false) {
    // 首先获取表格元素并显示加载状态
    const topBlockedTable = document.getElementById('top-blocked-table');
    const tbody = topBlockedTable ? topBlockedTable.querySelector('tbody') : null;
    
    // 非更新操作时显示加载状态
    if (tbody && !isUpdate) {
        // 显示加载中状态
        tbody.innerHTML = `<td colspan="100%" style="color: #7f8c8d; font-style: italic;">加载中...</td>`;
    }
    
    return apiRequest('/top-blocked')
        .then(data => {
            // 处理多种可能的数据格式，特别优化对用户提供格式的支持
            let processedData = [];
            
            if (Array.isArray(data)) {
                // 数组格式：直接使用，并过滤出有效的域名数据
                processedData = data.filter(item => item && (item.domain || item.name || item.Domain || item.Name) && (item.count !== undefined || item.Count !== undefined || item.hits !== undefined || item.Hits !== undefined));
            } else if (data && data.domains && Array.isArray(data.domains)) {
                // 嵌套在domains属性中
                processedData = data.domains;
            } else if (data && typeof data === 'object') {
                // 对象格式：转换为数组
                processedData = Object.keys(data).map(key => ({
                    domain: key,
                    count: data[key]
                }));
            }
            
            // 计算最大值用于百分比计算
            if (processedData.length > 0) {
                const maxCount = Math.max(...processedData.map(item => {
                    return item.count !== undefined ? item.count : 
                           (item.Count !== undefined ? item.Count : 
                           (item.hits !== undefined ? item.hits : 
                           (item.Hits !== undefined ? item.Hits : 0)));
                }));
                // 为每个项目添加百分比
                processedData.forEach(item => {
                    const count = item.count !== undefined ? item.count : 
                                 (item.Count !== undefined ? item.Count : 
                                 (item.hits !== undefined ? item.hits : 
                                 (item.Hits !== undefined ? item.Hits : 0)));
                    item.percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
                });
            }
            
            // 数据变化检测
            const hasDataChanged = !isEqual(domainDataCache.blocked, processedData);
            
            // 只在数据发生变化或不是更新操作时重新渲染
            if (hasDataChanged || !isUpdate) {
                // 更新缓存
                domainDataCache.blocked = JSON.parse(JSON.stringify(processedData));
                // 渲染最常屏蔽的域名表格
                smoothRenderTable('top-blocked-table', processedData, renderDomainRow);
            }
        })
        .catch(error => {
            console.error('获取最常屏蔽域名失败:', error);
            // 显示默认空数据而不是错误消息，保持界面一致性
            const tbody = document.getElementById('top-blocked-table').querySelector('tbody');
            if (tbody) {
                showEmpty(tbody, '获取数据失败');
            }
            
            // 使用全局通知功能
            if (typeof showNotification === 'function') {
                showNotification('danger', '获取最常屏蔽域名失败');
            }
        });
}

// 加载最常解析的域名
function loadTopResolvedDomains(isUpdate = false) {
    // 首先获取表格元素
    const topResolvedTable = document.getElementById('top-resolved-table');
    const tbody = topResolvedTable ? topResolvedTable.querySelector('tbody') : null;
    
    // 非更新操作时显示加载状态
    if (tbody && !isUpdate) {
        // 显示加载中状态
        tbody.innerHTML = `<td colspan="100%" style="color: #7f8c8d; font-style: italic;">加载中...</td>`;
    }
    
    return apiRequest('/top-resolved')
        .then(data => {
            // 处理多种可能的数据格式
            let processedData = [];
            
            if (Array.isArray(data)) {
                // 数组格式：直接使用
                processedData = data;
            } else if (data && data.domains && Array.isArray(data.domains)) {
                // 嵌套在domains属性中
                processedData = data.domains;
            } else if (data && typeof data === 'object') {
                // 对象格式：转换为数组
                processedData = Object.keys(data).map(key => ({
                    domain: key,
                    count: data[key]
                }));
            }
            
            // 计算最大值用于百分比计算
            if (processedData.length > 0) {
                const maxCount = Math.max(...processedData.map(item => {
                    return item.count !== undefined ? item.count : 
                           (item.Count !== undefined ? item.Count : 
                           (item.hits !== undefined ? item.hits : 
                           (item.Hits !== undefined ? item.Hits : 0)));
                }));
                // 为每个项目添加百分比
                processedData.forEach(item => {
                    const count = item.count !== undefined ? item.count : 
                                 (item.Count !== undefined ? item.Count : 
                                 (item.hits !== undefined ? item.hits : 
                                 (item.Hits !== undefined ? item.Hits : 0)));
                    item.percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
                });
            }
            
            // 数据变化检测
            const hasDataChanged = !isEqual(domainDataCache.resolved, processedData);
            
            // 只在数据发生变化或不是更新操作时重新渲染
            if (hasDataChanged || !isUpdate) {
                // 更新缓存
                domainDataCache.resolved = JSON.parse(JSON.stringify(processedData));
                // 渲染最常解析的域名表格
                smoothRenderTable('top-resolved-table', processedData, renderDomainRow);
            }
        })
        .catch(error => {
            console.error('获取最常解析域名失败:', error);
            // 显示默认空数据而不是错误消息，保持界面一致性
            const tbody = document.getElementById('top-resolved-table').querySelector('tbody');
            if (tbody) {
                showEmpty(tbody, '暂无解析记录');
            }
            
            // 使用全局通知功能
            if (typeof showNotification === 'function') {
                showNotification('danger', '获取最常解析域名失败');
            }
        });
}

// 渲染域名行
function renderDomainRow(item, index) {
    if (!item) return null;
    
    // 支持不同的字段名和格式
    const domainName = item.domain || item.name || item.Domain || item.Name || '未知域名';
    const count = item.count !== undefined ? item.count : 
                 (item.Count !== undefined ? item.Count : 
                 (item.hits !== undefined ? item.hits : 
                 (item.Hits !== undefined ? item.Hits : 0)));
    const percentage = item.percentage || 0;
    
    const row = document.createElement('tr');
    row.className = 'fade-in'; // 添加淡入动画类
    row.dataset.domain = domainName;
    row.dataset.count = count;
    row.dataset.percentage = percentage;
    
    // 为不同类型的排行使用不同的进度条颜色
    let barColor = '#3498db'; // 默认蓝色
    if (item.domain && item.domain.includes('microsoft.com')) {
        barColor = '#2ecc71'; // 绿色
    } else if (item.domain && item.domain.includes('tencent.com')) {
        barColor = '#e74c3c'; // 红色
    }
    
    row.innerHTML = `
        <td>${domainName}</td>
        <td class="count-cell" style="position: relative; padding-right: 80px;">
            <div class="count-number">${formatNumber(count)}</div>
            <div class="percentage-text">${percentage}%</div>
            <div class="percentage-bar-container">
                <div class="percentage-bar" style="width: ${percentage}%; background-color: ${barColor};"></div>
            </div>
        </td>
    `;
    
    // 设置动画延迟，创建级联效果
    row.style.animationDelay = `${index * 50}ms`;
    
    return row;
}

// 平滑渲染表格数据
function smoothRenderTable(tableId, newData, rowRenderer) {
    const table = document.getElementById(tableId);
    const tbody = table ? table.querySelector('tbody') : null;
    if (!tbody) return;
    
    // 添加过渡类，用于CSS动画支持
    tbody.classList.add('table-transition');
    
    if (!newData || newData.length === 0) {
        showEmpty(tbody, '暂无数据记录');
        // 移除过渡类
        setTimeout(() => tbody.classList.remove('table-transition'), 300);
        return;
    }
    
    // 创建映射以提高查找效率
    const oldRows = Array.from(tbody.querySelectorAll('tr'));
    const rowMap = new Map();
    
    oldRows.forEach(row => {
        if (!row.querySelector('td:first-child')) return;
        const key = row.dataset.domain || row.querySelector('td:first-child').textContent;
        rowMap.set(key, row);
    });
    
    // 准备新的数据行
    const newRows = [];
    const updatedRows = new Set();
    
    // 处理每一条新数据
    newData.forEach((item, index) => {
        const key = item.domain || item.name || item.Domain || item.Name || '未知域名';
        
        if (rowMap.has(key)) {
            // 数据项已存在，更新它
            const existingRow = rowMap.get(key);
            const oldCount = parseInt(existingRow.dataset.count) || 0;
            const count = item.count !== undefined ? item.count : 
                         (item.Count !== undefined ? item.Count : 
                         (item.hits !== undefined ? item.hits : 
                         (item.Hits !== undefined ? item.Hits : 0)));
            
            // 更新数据属性
            existingRow.dataset.count = count;
            
            // 添加高亮效果，用于CSS过渡
            existingRow.classList.add('table-row-highlight');
            setTimeout(() => {
                existingRow.classList.remove('table-row-highlight');
            }, 1000);
            
            // 如果计数变化，应用平滑更新
            if (oldCount !== count) {
                const countCell = existingRow.querySelector('.count-cell');
                if (countCell) {
                    smoothUpdateNumber(countCell, oldCount, count);
                }
            }
            
            // 更新位置
            existingRow.style.animationDelay = `${index * 50}ms`;
            newRows.push(existingRow);
            updatedRows.add(key);
        } else {
            // 新数据项，创建新行
            const newRow = rowRenderer(item, index);
            if (newRow) {
                // 添加淡入动画类
                newRow.classList.add('table-row-fade-in');
                // 先设置透明度为0，避免在错误位置闪烁
                newRow.style.opacity = '0';
                newRows.push(newRow);
            }
        }
    });
    
    // 移除不再存在的数据行
    oldRows.forEach(row => {
        if (!row.querySelector('td:first-child')) return;
        const key = row.dataset.domain || row.querySelector('td:first-child').textContent;
        if (!updatedRows.has(key)) {
            // 添加淡出动画
            row.classList.add('table-row-fade-out');
            setTimeout(() => {
                if (row.parentNode === tbody) {
                    tbody.removeChild(row);
                }
            }, 300);
        }
    });
    
    // 批量更新表格内容，减少重排
    requestAnimationFrame(() => {
        // 保留未移除的行并按新顺序插入
        const fragment = document.createDocumentFragment();
        
        newRows.forEach(row => {
            // 如果是新行，添加到文档片段
            if (!row.parentNode || row.parentNode !== tbody) {
                fragment.appendChild(row);
            }
            // 如果是已有行，移除它以便按新顺序重新插入
            else if (tbody.contains(row)) {
                tbody.removeChild(row);
                fragment.appendChild(row);
            }
        });
        
        // 将文档片段添加到表格
        tbody.appendChild(fragment);
        
        // 触发动画
        setTimeout(() => {
            newRows.forEach(row => {
                row.style.opacity = '1';
            });
            
            // 移除过渡类和动画类
            setTimeout(() => {
                tbody.querySelectorAll('.table-row-fade-in').forEach(row => {
                    row.classList.remove('table-row-fade-in');
                });
                tbody.classList.remove('table-transition');
            }, 300);
        }, 10);
        
        // 初始化表格排序
        if (typeof initTableSort === 'function') {
            initTableSort(tableId);
        }
    });
}

// 平滑更新数字
function smoothUpdateNumber(element, oldValue, newValue) {
    // 如果值相同，不更新
    if (oldValue === newValue || !element) return;
    
    // 根据数值差动态调整持续时间
    const valueDiff = Math.abs(newValue - oldValue);
    const baseDuration = 400;
    const maxDuration = 1000;
    // 数值变化越大，动画时间越长，但不超过最大值
    const duration = Math.min(baseDuration + Math.log10(valueDiff + 1) * 200, maxDuration);
    
    const startTime = performance.now();
    
    function animate(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        
        // 使用easeOutQuart缓动函数，使动画更自然
        let easeOutProgress;
        if (progress < 1) {
            // 四阶缓动函数：easeOutQuart
            easeOutProgress = 1 - Math.pow(1 - progress, 4);
        } else {
            easeOutProgress = 1;
        }
        
        // 根据不同的数值范围使用不同的插值策略
        let currentValue;
        if (valueDiff < 10) {
            // 小数值变化，使用线性插值
            currentValue = Math.floor(oldValue + (newValue - oldValue) * easeOutProgress);
        } else if (valueDiff < 100) {
            // 中等数值变化，使用四舍五入
            currentValue = Math.round(oldValue + (newValue - oldValue) * easeOutProgress);
        } else {
            // 大数值变化，使用更平滑的插值
            currentValue = Math.floor(oldValue + (newValue - oldValue) * easeOutProgress);
        }
        
        // 更新显示
        element.textContent = formatNumber(currentValue);
        
        // 添加微小的缩放动画效果
        const scaleFactor = 1 + 0.05 * Math.sin(progress * Math.PI);
        element.style.transform = `scale(${scaleFactor})`;
        
        // 继续动画
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            // 动画完成
            element.textContent = formatNumber(newValue);
            // 重置缩放
            element.style.transform = 'scale(1)';
            
            // 触发最终的高亮效果
            element.classList.add('number-update-complete');
            setTimeout(() => {
                element.classList.remove('number-update-complete');
            }, 300);
        }
    }
    
    // 重置元素样式
    element.style.transform = 'scale(1)';
    // 开始动画
    requestAnimationFrame(animate);
}