// 初始化仪表盘面板
function initDashboardPanel() {
    // 加载统计数据
    loadDashboardData();
    // 启动实时更新
    if (typeof startRealTimeUpdate === 'function') {
        startRealTimeUpdate();
    }
}

// 加载仪表盘数据
function loadDashboardData() {
    // 加载统计卡片数据
    updateStatCards();
    
    // 加载24小时统计数据
    loadHourlyStats();
    
    // 加载请求类型分布
    loadRequestsDistribution();
    
    // 加载最常屏蔽的域名
    loadTopBlockedDomains();
    
    // 加载最常解析的域名
    loadTopResolvedDomains();
}

// 更新统计卡片数据
function updateStatCards() {
    // 获取所有统计数据
    apiRequest('/stats')
        .then(data => {
            // 更新请求统计
            if (data && data.dns) {
                // 屏蔽请求
                const blockedCount = data.dns.Blocked || data.dns.blocked || 0;
                updateStatCard('blocked-count', blockedCount);
                
                // 允许请求
                const allowedCount = data.dns.Allowed || data.dns.allowed || 0;
                updateStatCard('allowed-count', allowedCount);
                
                // 错误请求
                const errorCount = data.dns.Errors || data.dns.errors || 0;
                updateStatCard('error-count', errorCount);
                
                // 总请求数
                const totalCount = blockedCount + allowedCount + errorCount;
                updateStatCard('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));
                updateStatCard('blocked-count', blockedValue);
                updateStatCard('allowed-count', allowedValue);
                updateStatCard('error-count', errorValue);
                const totalCount = blockedValue + allowedValue + errorValue;
                updateStatCard('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;
            }
            
            updateStatCard('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);
        });
    
    // 获取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;
            }
            
            updateStatCard('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);
    }
}

// 加载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小时统计图表
function renderHourlyChart(hours, blocked, allowed) {
    const ctx = document.getElementById('hourly-chart');
    if (!ctx) return;
    
    // 销毁现有图表
    if (window.hourlyChart) {
        window.hourlyChart.destroy();
    }
    
    // 创建新图表
    window.hourlyChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: hours,
            datasets: [
                {
                    label: '屏蔽请求',
                    data: blocked,
                    borderColor: '#e74c3c',
                    backgroundColor: 'rgba(231, 76, 60, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true
                },
                {
                    label: '允许请求',
                    data: allowed,
                    borderColor: '#2ecc71',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '请求数'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '时间（小时）'
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            animation: {
                duration: 500 // 快速动画，提升实时更新体验
            }
        }
    });
}

// 加载请求类型分布 - 注意：后端可能没有这个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 loadTopBlockedDomains() {
    // 首先获取表格元素并显示加载状态
    // 修复语法错误，使用传统的DOM访问方式
    const topBlockedTable = document.getElementById('top-blocked-table');
    const tbody = topBlockedTable ? topBlockedTable.querySelector('tbody') : null;
    if (tbody) {
        // 显示加载中状态
        tbody.innerHTML = `<td colspan="100%" style="color: #7f8c8d; font-style: italic;">加载中...</td>`;
    }
    
    apiRequest('/top-blocked')
        .then(data => {
            // 处理多种可能的数据格式，特别优化对用户提供格式的支持
            let processedData = [];
            
            console.log('最常屏蔽域名API返回数据:', data);
            
            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));
                console.log('处理后的域名数据:', processedData);
            } 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]
                }));
            }
            
            renderTopBlockedDomains(processedData);
        })
        .catch(error => {
            console.error('获取最常屏蔽域名失败:', error);
            // 显示默认空数据而不是错误消息，保持界面一致性
            if (tbody) {
                showEmpty(tbody, '获取数据失败');
            }
            
            // 使用全局通知功能
            if (typeof showNotification === 'function') {
                showNotification('danger', '获取最常屏蔽域名失败');
            }
        });
}

// 渲染最常屏蔽的域名表格
function renderTopBlockedDomains(domains) {
    // 修复语法错误，使用传统的DOM访问方式
    const topBlockedTable = document.getElementById('top-blocked-table');
    const tbody = topBlockedTable ? topBlockedTable.querySelector('tbody') : null;
    if (!tbody) return;
    
    console.log('准备渲染的域名数据:', domains);
    
    if (!domains || domains.length === 0) {
        showEmpty(tbody, '暂无屏蔽记录');
        return;
    }
    
    tbody.innerHTML = '';
    
    domains.forEach((domain, index) => {
        if (!domain) return;
        
        // 支持不同的字段名和格式，特别针对用户提供的数据格式优化
        const domainName = domain.domain || domain.name || domain.Domain || domain.Name || '未知域名';
        const count = domain.count !== undefined ? domain.count : 
                     (domain.Count !== undefined ? domain.Count : 
                     (domain.hits !== undefined ? domain.hits : 
                     (domain.Hits !== undefined ? domain.Hits : 0)));
        
        console.log(`渲染域名 ${index + 1}:`, {domainName, count});
        
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${domainName}</td>
            <td>${formatNumber(count)}</td>
        `;
        tbody.appendChild(row);
    });
    
    // 初始化表格排序
    if (typeof initTableSort === 'function') {
        initTableSort('top-blocked-table');
    }
}

// 加载最常解析的域名
function loadTopResolvedDomains() {
    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]
                }));
            }
            
            renderTopResolvedDomains(processedData);
        })
        .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 renderTopResolvedDomains(domains) {
    const tbody = document.getElementById('top-resolved-table').querySelector('tbody');
    if (!tbody) return;
    
    if (!domains || domains.length === 0) {
        showEmpty(tbody, '暂无解析记录');
        return;
    }
    
    tbody.innerHTML = '';
    
    domains.forEach((domain, index) => {
        // 支持不同的字段名和格式
        const domainName = domain.domain || domain.name || domain.Domain || domain.Name || '未知域名';
        const count = domain.count || domain.Count || domain.hits || domain.Hits || 0;
        
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${domainName}</td>
            <td>${formatNumber(count)}</td>
        `;
        tbody.appendChild(row);
    });
    
    // 初始化表格排序
    initTableSort('top-resolved-table');
}