/**
 * 分块对比性能测试脚本
 * 用于测试和验证分块对比预览的性能改进
 */

class ChunkComparePerformanceTester {
    constructor() {
        this.testResults = [];
        this.isRunning = false;
    }

    /**
     * 运行完整的性能测试套件
     */
    async runFullTestSuite() {
        if (this.isRunning) {
            console.warn('[PerformanceTest] 测试正在进行中，请等待完成');
            return;
        }

        this.isRunning = true;
        console.log('[PerformanceTest] 开始运行性能测试套件');

        try {
            const results = {
                testTime: new Date().toISOString(),
                browser: this.getBrowserInfo(),
                device: this.getDeviceInfo(),
                tests: {}
            };

            // 测试不同数量的分块
            const chunkCounts = [5, 10, 20, 50, 100];
            
            for (const count of chunkCounts) {
                console.log(`[PerformanceTest] 测试 ${count} 个分块的性能`);
                results.tests[`chunks_${count}`] = await this.testChunkRendering(count);
                
                // 让浏览器有时间清理
                await this.delay(1000);
            }

            // 测试内存使用情况
            results.memoryTest = this.testMemoryUsage();

            // 测试滚动性能
            results.scrollTest = await this.testScrollPerformance();

            // 生成测试报告
            this.generateTestReport(results);

            console.log('[PerformanceTest] 性能测试套件完成');
            return results;

        } catch (error) {
            console.error('[PerformanceTest] 测试过程中出错:', error);
        } finally {
            this.isRunning = false;
        }
    }

    /**
     * 测试分块渲染性能
     */
    async testChunkRendering(chunkCount) {
        const testData = this.generateTestData(chunkCount);
        const container = this.createTestContainer();
        
        // 测试原有渲染方法
        const originalResult = await this.testOriginalRendering(testData, container);
        
        // 清理
        container.innerHTML = '';
        await this.delay(100);
        
        // 测试优化后的渲染方法
        const optimizedResult = await this.testOptimizedRendering(testData, container);
        
        // 清理
        container.remove();
        
        const improvement = {
            renderTime: {
                original: originalResult.renderTime,
                optimized: optimizedResult.renderTime,
                improvement: ((originalResult.renderTime - optimizedResult.renderTime) / originalResult.renderTime * 100).toFixed(2) + '%'
            },
            memoryUsage: {
                original: originalResult.memoryUsage,
                optimized: optimizedResult.memoryUsage,
                reduction: originalResult.memoryUsage > 0 ? ((originalResult.memoryUsage - optimizedResult.memoryUsage) / originalResult.memoryUsage * 100).toFixed(2) + '%' : 'N/A'
            },
            domNodes: {
                original: originalResult.domNodes,
                optimized: optimizedResult.domNodes,
                reduction: ((originalResult.domNodes - optimizedResult.domNodes) / originalResult.domNodes * 100).toFixed(2) + '%'
            }
        };

        console.log(`[PerformanceTest] ${chunkCount}个分块测试结果:`, improvement);
        return improvement;
    }

    /**
     * 生成测试数据
     */
    generateTestData(chunkCount) {
        const ocrChunks = [];
        const translatedChunks = [];

        for (let i = 0; i < chunkCount; i++) {
            // 生成不同长度的测试内容
            const contentLength = Math.floor(Math.random() * 1000) + 200; // 200-1200字符
            
            const ocrContent = this.generateTestContent(contentLength, 'ocr', i);
            const transContent = this.generateTestContent(contentLength, 'translation', i);
            
            ocrChunks.push(ocrContent);
            translatedChunks.push(transContent);
        }

        return {
            ocrChunks,
            translatedChunks,
            images: []
        };
    }

    /**
     * 生成测试内容
     */
    generateTestContent(length, type, index) {
        const headings = [
            '# 主要标题',
            '## 次要标题', 
            '### 三级标题'
        ];
        
        const paragraphs = [
            '这是一段测试文本，用于验证分块对比功能的性能表现。',
            '本段包含**粗体文字**和*斜体文字*，以及`代码片段`。',
            '测试内容包括数学公式：$E = mc^2$，以及更复杂的公式：$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$',
            '这里有一个代码块：\n```javascript\nfunction test() {\n  console.log("Hello World");\n}\n```',
            '列表项目：\n- 第一项\n- 第二项\n- 第三项',
            '表格测试：\n| 列1 | 列2 | 列3 |\n|-----|-----|-----|\n| 值1 | 值2 | 值3 |'
        ];

        let content = `${headings[index % headings.length]} (${type} #${index + 1})\n\n`;
        
        while (content.length < length) {
            content += paragraphs[Math.floor(Math.random() * paragraphs.length)] + '\n\n';
        }

        return content.substring(0, length);
    }

    /**
     * 创建测试容器
     */
    createTestContainer() {
        const container = document.createElement('div');
        container.id = 'performance-test-container';
        container.style.cssText = `
            position: absolute;
            top: -10000px;
            left: -10000px;
            width: 1000px;
            height: 600px;
            overflow: hidden;
        `;
        document.body.appendChild(container);
        return container;
    }

    /**
     * 测试原有渲染方法
     */
    async testOriginalRendering(testData, container) {
        const startTime = performance.now();
        const startMemory = this.getMemoryUsage();

        // 模拟原有的同步渲染
        let html = '<div class="chunk-compare-container">';
        
        for (let i = 0; i < testData.ocrChunks.length; i++) {
            html += `
                <div class="chunk-pair">
                    <div class="block-outer" id="block-${i}">
                        <h4>分块 ${i + 1}</h4>
                        <div class="original-chunk-content">
                            <div class="ocr-content">${this.renderMarkdownSync(testData.ocrChunks[i])}</div>
                            <div class="trans-content">${this.renderMarkdownSync(testData.translatedChunks[i])}</div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        html += '</div>';
        container.innerHTML = html;

        const endTime = performance.now();
        const endMemory = this.getMemoryUsage();
        const domNodes = container.querySelectorAll('*').length;

        return {
            renderTime: endTime - startTime,
            memoryUsage: endMemory - startMemory,
            domNodes: domNodes
        };
    }

    /**
     * 测试优化后的渲染方法
     */
    async testOptimizedRendering(testData, container) {
        const startTime = performance.now();
        const startMemory = this.getMemoryUsage();

        // 使用优化器进行渲染
        if (window.ChunkCompareOptimizer && window.ChunkCompareOptimizer.instance) {
            const optimizedHTML = window.ChunkCompareOptimizer.instance.optimizeChunkComparison(
                testData.ocrChunks,
                testData.translatedChunks,
                { images: testData.images, isOriginalFirst: true }
            );
            container.innerHTML = optimizedHTML;

            // 等待异步渲染完成
            await this.waitForOptimizedRendering(container);
        } else {
            // 回退到预览模式
            let html = '<div class="chunk-compare-container">';
            
            for (let i = 0; i < Math.min(testData.ocrChunks.length, 5); i++) {
                html += `
                    <div class="chunk-pair optimized-chunk">
                        <div class="chunk-header">
                            <h4>分块 ${i + 1}</h4>
                        </div>
                        <div class="chunk-preview-container" data-lazy-load="true">
                            <div class="chunk-preview">${this.getContentPreview(testData.ocrChunks[i])}</div>
                            <div class="load-full-content-btn">点击加载完整内容</div>
                        </div>
                    </div>
                `;
            }
            
            html += '</div>';
            container.innerHTML = html;
        }

        const endTime = performance.now();
        const endMemory = this.getMemoryUsage();
        const domNodes = container.querySelectorAll('*').length;

        return {
            renderTime: endTime - startTime,
            memoryUsage: endMemory - startMemory,
            domNodes: domNodes
        };
    }

    /**
     * 等待优化后的渲染完成
     */
    async waitForOptimizedRendering(container) {
        let maxWait = 5000; // 最多等待5秒
        const interval = 100;
        
        while (maxWait > 0) {
            const loadingIndicators = container.querySelectorAll('.chunk-loading-indicator');
            if (loadingIndicators.length === 0) {
                break;
            }
            
            await this.delay(interval);
            maxWait -= interval;
        }
    }

    /**
     * 同步渲染Markdown（简化版）
     */
    renderMarkdownSync(content) {
        if (!content) return '';
        
        // 简化的Markdown渲染，避免复杂的异步操作
        return content
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/`(.*?)`/g, '<code>$1</code>')
            .replace(/\n/g, '<br>');
    }

    /**
     * 获取内容预览
     */
    getContentPreview(content) {
        if (!content) return '(空内容)';
        return content.length > 100 ? content.substring(0, 100) + '...' : content;
    }

    /**
     * 测试内存使用情况
     */
    testMemoryUsage() {
        if (!performance.memory) {
            return { 
                error: '浏览器不支持内存监控',
                supported: false 
            };
        }

        const memory = performance.memory;
        return {
            supported: true,
            usedJSHeapSize: (memory.usedJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
            totalJSHeapSize: (memory.totalJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
            jsHeapSizeLimit: (memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2) + ' MB',
            usage: ((memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100).toFixed(2) + '%'
        };
    }

    /**
     * 测试滚动性能
     */
    async testScrollPerformance() {
        const container = document.querySelector('.chunk-compare-container');
        if (!container) {
            return { error: '未找到分块对比容器' };
        }

        const scrollTests = [];
        const scrollDistance = 100;
        const testCount = 10;

        for (let i = 0; i < testCount; i++) {
            const startTime = performance.now();
            
            // 模拟滚动
            container.scrollTop += scrollDistance;
            
            // 等待渲染完成
            await new Promise(resolve => requestAnimationFrame(resolve));
            
            const endTime = performance.now();
            scrollTests.push(endTime - startTime);
        }

        // 重置滚动位置
        container.scrollTop = 0;

        const avgScrollTime = scrollTests.reduce((a, b) => a + b, 0) / scrollTests.length;
        const maxScrollTime = Math.max(...scrollTests);
        const minScrollTime = Math.min(...scrollTests);

        return {
            averageTime: avgScrollTime.toFixed(2) + 'ms',
            maxTime: maxScrollTime.toFixed(2) + 'ms',
            minTime: minScrollTime.toFixed(2) + 'ms',
            testCount: testCount
        };
    }

    /**
     * 获取内存使用量
     */
    getMemoryUsage() {
        if (performance.memory) {
            return performance.memory.usedJSHeapSize;
        }
        return 0;
    }

    /**
     * 获取浏览器信息
     */
    getBrowserInfo() {
        const ua = navigator.userAgent;
        let browser = 'Unknown';
        
        if (ua.indexOf('Chrome') > -1) browser = 'Chrome';
        else if (ua.indexOf('Firefox') > -1) browser = 'Firefox';
        else if (ua.indexOf('Safari') > -1) browser = 'Safari';
        else if (ua.indexOf('Edge') > -1) browser = 'Edge';
        
        return {
            name: browser,
            userAgent: ua,
            vendor: navigator.vendor,
            language: navigator.language
        };
    }

    /**
     * 获取设备信息
     */
    getDeviceInfo() {
        return {
            platform: navigator.platform,
            hardwareConcurrency: navigator.hardwareConcurrency || 'Unknown',
            deviceMemory: navigator.deviceMemory || 'Unknown',
            screenResolution: `${screen.width}x${screen.height}`,
            viewportSize: `${window.innerWidth}x${window.innerHeight}`
        };
    }

    /**
     * 生成测试报告
     */
    generateTestReport(results) {
        console.group('[PerformanceTest] 性能测试报告');
        
        console.log('测试时间:', results.testTime);
        console.log('浏览器信息:', results.browser);
        console.log('设备信息:', results.device);
        
        console.group('分块渲染测试结果:');
        Object.entries(results.tests).forEach(([testName, result]) => {
            console.group(testName);
            console.log('渲染时间改善:', result.renderTime.improvement);
            console.log('内存使用减少:', result.memoryUsage.reduction);
            console.log('DOM节点减少:', result.domNodes.reduction);
            console.groupEnd();
        });
        console.groupEnd();
        
        console.log('内存测试:', results.memoryTest);
        console.log('滚动性能测试:', results.scrollTest);
        
        console.groupEnd();

        // 将结果保存到 localStorage
        localStorage.setItem('chunkComparePerformanceResults', JSON.stringify(results));
        
        // 显示用户友好的报告
        this.showUserReport(results);
    }

    /**
     * 显示用户友好的测试报告
     */
    showUserReport(results) {
        const reportEl = document.createElement('div');
        reportEl.className = 'performance-report-modal';
        reportEl.innerHTML = `
            <div class="report-overlay">
                <div class="report-content">
                    <h3>分块对比性能测试报告</h3>
                    <div class="report-summary">
                        <div class="summary-item">
                            <span class="label">测试时间:</span>
                            <span class="value">${new Date(results.testTime).toLocaleString()}</span>
                        </div>
                        <div class="summary-item">
                            <span class="label">浏览器:</span>
                            <span class="value">${results.browser.name}</span>
                        </div>
                        <div class="summary-item">
                            <span class="label">总体评价:</span>
                            <span class="value performance-grade">${this.calculateOverallGrade(results)}</span>
                        </div>
                    </div>
                    <div class="test-results">
                        <h4>性能改进详情</h4>
                        ${this.generateResultsHTML(results.tests)}
                    </div>
                    <div class="report-actions">
                        <button id="close-performance-report">关闭</button>
                        <button id="export-performance-report">导出报告</button>
                    </div>
                </div>
            </div>
        `;
        
        // 添加样式
        const style = document.createElement('style');
        style.id = 'performance-report-style'; // 添加ID以便后续清理
        style.textContent = `
            .performance-report-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10000;
            }
            .report-overlay {
                background: rgba(0,0,0,0.5);
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .report-content {
                background: white;
                max-width: 600px;
                max-height: 80vh;
                overflow-y: auto;
                border-radius: 8px;
                padding: 24px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            }
            .report-summary {
                margin: 16px 0;
                border: 1px solid #e2e8f0;
                border-radius: 6px;
                padding: 16px;
            }
            .summary-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
            }
            .performance-grade {
                font-weight: bold;
                color: #059669;
            }
            .test-results {
                margin: 16px 0;
            }
            .result-item {
                padding: 8px;
                border-bottom: 1px solid #f1f5f9;
            }
            .report-actions {
                display: flex;
                gap: 12px;
                justify-content: flex-end;
                margin-top: 20px;
            }
            .report-actions button {
                padding: 8px 16px;
                border: 1px solid #d1d5db;
                border-radius: 4px;
                background: white;
                cursor: pointer;
            }
            .report-actions button:first-child {
                background: #f3f4f6;
            }
            .report-actions button:last-child {
                background: #3b82f6;
                color: white;
                border-color: #3b82f6;
            }
        `;
        
        document.head.appendChild(style);
        document.body.appendChild(reportEl);
        
        // 添加事件监听器
        const closeBtn = document.getElementById('close-performance-report');
        const exportBtn = document.getElementById('export-performance-report');
        const overlay = reportEl.querySelector('.report-overlay');
        
        // 关闭按钮事件
        closeBtn.addEventListener('click', () => {
            this.closeReport();
        });
        
        // 导出按钮事件
        exportBtn.addEventListener('click', () => {
            this.exportReport();
        });
        
        // 点击遮罩层关闭
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                this.closeReport();
            }
        });
        
        // ESC键关闭
        const escHandler = (e) => {
            if (e.key === 'Escape') {
                this.closeReport();
                document.removeEventListener('keydown', escHandler);
            }
        };
        document.addEventListener('keydown', escHandler);
    }
    
    /**
     * 关闭性能报告
     */
    closeReport() {
        const reportEl = document.querySelector('.performance-report-modal');
        const styleEl = document.getElementById('performance-report-style');
        
        if (reportEl) {
            reportEl.remove();
        }
        
        if (styleEl) {
            styleEl.remove();
        }
    }

    /**
     * 计算总体评分
     */
    calculateOverallGrade(results) {
        let totalImprovement = 0;
        let testCount = 0;

        Object.values(results.tests).forEach(test => {
            const improvement = parseFloat(test.renderTime.improvement);
            if (!isNaN(improvement)) {
                totalImprovement += improvement;
                testCount++;
            }
        });

        const avgImprovement = testCount > 0 ? totalImprovement / testCount : 0;

        if (avgImprovement >= 50) return '优秀 (A)';
        if (avgImprovement >= 30) return '良好 (B)';
        if (avgImprovement >= 10) return '一般 (C)';
        return '需改进 (D)';
    }

    /**
     * 生成结果HTML
     */
    generateResultsHTML(tests) {
        return Object.entries(tests).map(([testName, result]) => `
            <div class="result-item">
                <strong>${testName.replace('chunks_', '')}个分块:</strong>
                <div>渲染速度提升: ${result.renderTime.improvement}</div>
                <div>内存使用减少: ${result.memoryUsage.reduction}</div>
                <div>DOM节点减少: ${result.domNodes.reduction}</div>
            </div>
        `).join('');
    }

    /**
     * 导出测试报告
     */
    exportReport() {
        const results = localStorage.getItem('chunkComparePerformanceResults');
        if (!results) {
            alert('没有可导出的测试结果');
            return;
        }

        const blob = new Blob([results], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `chunk-compare-performance-${Date.now()}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    /**
     * 延迟函数
     */
    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// 创建全局测试实例
window.ChunkComparePerformanceTester = new ChunkComparePerformanceTester();

// 添加控制台快捷命令
console.log('%c分块对比性能测试器已加载', 'color: #059669; font-weight: bold');
console.log('使用 window.ChunkComparePerformanceTester.runFullTestSuite() 运行完整测试');

// 如果在开发环境，自动运行测试
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
    // 页面加载完成后自动运行测试
    window.addEventListener('load', () => {
        setTimeout(() => {
            if (document.querySelector('.chunk-compare-container')) {
                console.log('[PerformanceTest] 检测到分块对比页面，自动运行性能测试');
                window.ChunkComparePerformanceTester.runFullTestSuite();
            }
        }, 2000);
    });
}