// 前端测试示例：ComfyUI任务统计修复验证
// 这个文件展示了如何在前端调用修复后的统计API

import { invoke } from '@tauri-apps/api/tauri';

/**
 * 测试修复后的任务统计API
 */
async function testTaskStatistics() {
    try {
        console.log('🔍 开始测试任务统计API...');
        
        // 调用修复后的统计API
        const statistics = await invoke('get_task_statistics', {
            workflowName: 'test_statistics'  // 使用测试数据的工作流名称
        });
        
        console.log('✅ 统计API调用成功!');
        console.log('📊 完整统计数据:', statistics);
        
        // 验证数据结构
        console.log('\n=== 统计数据验证 ===');
        
        // 总体统计
        console.log('📈 总体统计:');
        console.log(`   总任务数: ${statistics.total_tasks}`);
        console.log(`   完成任务: ${statistics.completed_tasks}`);
        console.log(`   失败任务: ${statistics.failed_tasks}`);
        console.log(`   运行中任务: ${statistics.running_tasks}`);
        console.log(`   排队任务: ${statistics.queued_tasks}`);
        console.log(`   成功率: ${statistics.success_rate.toFixed(2)}%`);
        
        // 单个任务统计
        console.log('\n📋 单个任务统计:');
        console.log(`   总数: ${statistics.single_task_stats.total_tasks}`);
        console.log(`   完成: ${statistics.single_task_stats.completed_tasks}`);
        console.log(`   失败: ${statistics.single_task_stats.failed_tasks}`);
        console.log(`   运行中: ${statistics.single_task_stats.running_tasks}`);
        console.log(`   排队: ${statistics.single_task_stats.queued_tasks}`);
        console.log(`   成功率: ${statistics.single_task_stats.success_rate.toFixed(2)}%`);
        
        // 批量任务统计
        console.log('\n📦 批量任务统计:');
        console.log(`   总数: ${statistics.batch_task_stats.total_tasks}`);
        console.log(`   完成: ${statistics.batch_task_stats.completed_tasks}`);
        console.log(`   失败: ${statistics.batch_task_stats.failed_tasks}`);
        console.log(`   运行中: ${statistics.batch_task_stats.running_tasks}`);
        console.log(`   排队: ${statistics.batch_task_stats.queued_tasks}`);
        console.log(`   成功率: ${statistics.batch_task_stats.success_rate.toFixed(2)}%`);
        
        // 验证数据正确性
        console.log('\n✅ 数据正确性验证:');
        
        // 验证总数是否等于单个任务 + 批量任务
        const calculatedTotal = statistics.single_task_stats.total_tasks + statistics.batch_task_stats.total_tasks;
        const totalMatch = calculatedTotal === statistics.total_tasks;
        console.log(`   总数验证: ${calculatedTotal} = ${statistics.total_tasks} - ${totalMatch ? '✅' : '❌'}`);
        
        // 验证完成任务数
        const calculatedCompleted = statistics.single_task_stats.completed_tasks + statistics.batch_task_stats.completed_tasks;
        const completedMatch = calculatedCompleted === statistics.completed_tasks;
        console.log(`   完成数验证: ${calculatedCompleted} = ${statistics.completed_tasks} - ${completedMatch ? '✅' : '❌'}`);
        
        // 验证失败任务数
        const calculatedFailed = statistics.single_task_stats.failed_tasks + statistics.batch_task_stats.failed_tasks;
        const failedMatch = calculatedFailed === statistics.failed_tasks;
        console.log(`   失败数验证: ${calculatedFailed} = ${statistics.failed_tasks} - ${failedMatch ? '✅' : '❌'}`);
        
        if (totalMatch && completedMatch && failedMatch) {
            console.log('\n🎉 所有验证通过！统计数据正确区分了单个任务和批量任务！');
        } else {
            console.log('\n❌ 验证失败，数据可能存在问题');
        }
        
        return statistics;
        
    } catch (error) {
        console.error('❌ 统计API调用失败:', error);
        console.error('错误详情:', error.message);
        throw error;
    }
}

/**
 * 在UI中显示统计信息的示例函数
 */
function displayStatisticsInUI(statistics) {
    // 这是一个示例函数，展示如何在UI中使用修复后的统计数据
    
    // 更新总体统计卡片
    updateStatCard('total-tasks', statistics.total_tasks);
    updateStatCard('completed-tasks', statistics.completed_tasks);
    updateStatCard('failed-tasks', statistics.failed_tasks);
    updateStatCard('success-rate', `${statistics.success_rate.toFixed(1)}%`);
    
    // 更新单个任务管理区域
    updateTaskTypeSection('single-task-section', {
        title: '单个任务管理',
        stats: statistics.single_task_stats
    });
    
    // 更新批量任务管理区域
    updateTaskTypeSection('batch-task-section', {
        title: '批量任务管理',
        stats: statistics.batch_task_stats
    });
}

/**
 * 更新统计卡片
 */
function updateStatCard(elementId, value) {
    const element = document.getElementById(elementId);
    if (element) {
        element.textContent = value;
    }
}

/**
 * 更新任务类型区域
 */
function updateTaskTypeSection(sectionId, data) {
    const section = document.getElementById(sectionId);
    if (section) {
        // 更新标题
        const titleElement = section.querySelector('.section-title');
        if (titleElement) {
            titleElement.textContent = data.title;
        }
        
        // 更新统计数据
        const statsContainer = section.querySelector('.stats-container');
        if (statsContainer) {
            statsContainer.innerHTML = `
                <div class="stat-item">
                    <span class="stat-label">总数:</span>
                    <span class="stat-value">${data.stats.total_tasks}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">完成:</span>
                    <span class="stat-value">${data.stats.completed_tasks}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">失败:</span>
                    <span class="stat-value">${data.stats.failed_tasks}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">运行中:</span>
                    <span class="stat-value">${data.stats.running_tasks}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">排队:</span>
                    <span class="stat-value">${data.stats.queued_tasks}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">成功率:</span>
                    <span class="stat-value">${data.stats.success_rate.toFixed(1)}%</span>
                </div>
            `;
        }
    }
}

/**
 * 页面加载时自动测试
 */
document.addEventListener('DOMContentLoaded', async () => {
    console.log('📄 页面加载完成，开始测试统计功能...');
    
    try {
        const statistics = await testTaskStatistics();
        displayStatisticsInUI(statistics);
        
        console.log('✅ 统计功能测试完成，UI已更新');
    } catch (error) {
        console.error('❌ 统计功能测试失败:', error);
    }
});

// 导出函数供其他模块使用
export {
    testTaskStatistics,
    displayStatisticsInUI,
    updateStatCard,
    updateTaskTypeSection
};

// 使用示例：
// 
// 1. 在ComfyUI任务管理中心页面调用：
//    const stats = await testTaskStatistics();
//    displayStatisticsInUI(stats);
//
// 2. 定期刷新统计数据：
//    setInterval(async () => {
//        try {
//            const stats = await invoke('get_task_statistics');
//            displayStatisticsInUI(stats);
//        } catch (error) {
//            console.error('刷新统计失败:', error);
//        }
//    }, 30000); // 每30秒刷新一次
//
// 3. 按工作流筛选统计：
//    const workflowStats = await invoke('get_task_statistics', {
//        workflowName: 'specific_workflow_name'
//    });