// 高级功能：多策略对比、统计分析、参数热力图

// ===== 多策略对比功能 =====

async function initComparison() {
    // 加载策略列表到两个下拉框
    const response = await fetch('/api/equity/list');
    const result = await response.json();
    
    if (result.success) {
        const select1 = document.getElementById('compare-strategy1');
        const select2 = document.getElementById('compare-strategy2');
        
        select1.innerHTML = '<option value="">请选择...</option>';
        select2.innerHTML = '<option value="">请选择...</option>';
        
        result.files.forEach(file => {
            const option1 = document.createElement('option');
            const option2 = document.createElement('option');
            option1.value = file.filename;
            option2.value = file.filename;
            option1.textContent = file.strategy;
            option2.textContent = file.strategy;
            select1.appendChild(option1);
            select2.appendChild(option2);
        });
    }
    
    document.getElementById('compare-btn').addEventListener('click', compareStrategies);
}

async function compareStrategies() {
    const file1 = document.getElementById('compare-strategy1').value;
    const file2 = document.getElementById('compare-strategy2').value;
    
    if (!file1 || !file2) {
        alert('请选择两个策略进行对比');
        return;
    }
    
    // 加载两个策略的数据
    const [data1, data2] = await Promise.all([
        fetch(`/api/equity/${file1}`).then(r => r.json()),
        fetch(`/api/equity/${file2}`).then(r => r.json())
    ]);
    
    if (data1.success && data2.success) {
        // 显示统计数据
        displayStrategyStats('strategy1-stats', data1.stats);
        displayStrategyStats('strategy2-stats', data2.stats);
        displayComparisonDiff('comparison-diff', data1.stats, data2.stats);
        
        // 绘制对比图表
        renderComparisonChart(data1.data, data2.data, file1, file2);
    }
}

function displayStrategyStats(elementId, stats) {
    const element = document.getElementById(elementId);
    element.innerHTML = `
        <p>初始资金: ¥${stats.initial_asset.toLocaleString()}</p>
        <p>最终资金: ¥${stats.final_asset.toLocaleString()}</p>
        <p>总收益率: <span class="${stats.total_return > 0 ? 'positive' : 'negative'}">${(stats.total_return * 100).toFixed(2)}%</span></p>
        <p>最大回撤: <span class="negative">${(stats.max_drawdown * 100).toFixed(2)}%</span></p>
        <p>回测天数: ${stats.num_days}天</p>
    `;
}

function displayComparisonDiff(elementId, stats1, stats2) {
    const element = document.getElementById(elementId);
    const returnDiff = (stats1.total_return - stats2.total_return) * 100;
    const ddDiff = (stats1.max_drawdown - stats2.max_drawdown) * 100;
    
    element.innerHTML = `
        <p>收益率差: <span class="${returnDiff > 0 ? 'positive' : 'negative'}">${returnDiff > 0 ? '+' : ''}${returnDiff.toFixed(2)}%</span></p>
        <p>回撤差: <span class="${ddDiff > 0 ? 'negative' : 'positive'}">${ddDiff > 0 ? '+' : ''}${ddDiff.toFixed(2)}%</span></p>
        <p>策略${returnDiff > 0 ? '1' : '2'}收益更高</p>
        <p>策略${ddDiff < 0 ? '1' : '2'}回撤更小</p>
    `;
}

function renderComparisonChart(data1, data2, label1, label2) {
    const ctx = document.getElementById('comparison-chart').getContext('2d');
    
    if (comparisonChart) {
        comparisonChart.destroy();
    }
    
    // 采样数据
    const step = Math.max(1, Math.floor(Math.max(data1.length, data2.length) / 200));
    const labels = data1.filter((_, i) => i % step === 0).map(row => row.trade_date);
    const assets1 = data1.filter((_, i) => i % step === 0).map(row => row.total_asset);
    const assets2 = data2.filter((_, i) => i % step === 0).map(row => row.total_asset);
    
    comparisonChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: label1.replace('_equity.csv', ''),
                    data: assets1,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                },
                {
                    label: label2.replace('_equity.csv', ''),
                    data: assets2,
                    borderColor: '#f093fb',
                    backgroundColor: 'rgba(240, 147, 251, 0.1)',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '多策略资金曲线对比',
                    font: { size: 16 }
                }
            },
            scales: {
                y: {
                    title: {
                        display: true,
                        text: '总资产 (元)'
                    }
                }
            }
        }
    });
}

// ===== 统计分析功能 =====

async function initAnalytics() {
    // 加载交易文件列表
    const response = await fetch('/api/trades/list');
    const result = await response.json();
    
    if (result.success) {
        const select = document.getElementById('analytics-file-select');
        select.innerHTML = '<option value="">请选择...</option>';
        
        result.files.forEach(file => {
            const option = document.createElement('option');
            option.value = file.filename;
            option.textContent = `${file.time_display} - ${file.strategy_params}`;
            select.appendChild(option);
        });
    }
    
    document.getElementById('analytics-file-select').addEventListener('change', loadAnalyticsData);
    document.getElementById('analytics-refresh-btn').addEventListener('click', initAnalytics);
}

async function loadAnalyticsData() {
    const filename = document.getElementById('analytics-file-select').value;
    if (!filename) return;
    
    const response = await fetch(`/api/trades/${filename}`);
    const result = await response.json();
    
    if (result.success) {
        renderProfitDistribution(result.data);
        renderDrawdownAnalysis(result.data);
    }
}

function renderProfitDistribution(data) {
    const ctx = document.getElementById('profit-distribution-chart').getContext('2d');
    
    if (profitDistChart) {
        profitDistChart.destroy();
    }
    
    // 统计盈亏分布
    const profits = data.map(row => row.profit_pct * 100);
    const bins = [-50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50];
    const counts = new Array(bins.length - 1).fill(0);
    
    profits.forEach(p => {
        for (let i = 0; i < bins.length - 1; i++) {
            if (p >= bins[i] && p < bins[i + 1]) {
                counts[i]++;
                break;
            }
        }
    });
    
    profitDistChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: bins.slice(0, -1).map((b, i) => `${b}~${bins[i+1]}%`),
            datasets: [{
                label: '交易次数',
                data: counts,
                backgroundColor: counts.map((_, i) => bins[i] < 0 ? 'rgba(220, 53, 69, 0.7)' : 'rgba(40, 167, 69, 0.7)'),
                borderColor: counts.map((_, i) => bins[i] < 0 ? '#dc3545' : '#28a745'),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: {
                    display: true,
                    text: '收益率分布直方图'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '交易笔数'
                    }
                }
            }
        }
    });
}

function renderDrawdownAnalysis(data) {
    const ctx = document.getElementById('drawdown-chart').getContext('2d');
    
    if (drawdownChart) {
        drawdownChart.destroy();
    }
    
    // 计算累计盈亏和回撤
    let cumProfit = 0;
    let maxProfit = 0;
    const cumProfits = [];
    const drawdowns = [];
    
    data.forEach(row => {
        cumProfit += row.profit_amount;
        cumProfits.push(cumProfit);
        maxProfit = Math.max(maxProfit, cumProfit);
        drawdowns.push(cumProfit - maxProfit);
    });
    
    drawdownChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.map((_, i) => i + 1),
            datasets: [
                {
                    label: '累计盈亏',
                    data: cumProfits,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    yAxisID: 'y'
                },
                {
                    label: '回撤',
                    data: drawdowns,
                    borderColor: '#dc3545',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    yAxisID: 'y'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'top' },
                title: {
                    display: true,
                    text: '累计盈亏与回撤分析'
                }
            },
            scales: {
                y: {
                    title: {
                        display: true,
                        text: '金额 (元)'
                    }
                }
            }
        }
    });
}

// ===== 参数热力图功能 =====

async function initHeatmap() {
    // 加载优化结果文件列表
    const response = await fetch('/api/optimization/list');
    const result = await response.json();
    
    if (result.success) {
        const select = document.getElementById('heatmap-file-select');
        select.innerHTML = '<option value="">请选择...</option>';
        
        result.files.forEach(file => {
            const option = document.createElement('option');
            option.value = file.filename;
            option.textContent = `${file.time_display} (${file.num_results}组参数)`;
            select.appendChild(option);
        });
    }
    
    document.getElementById('heatmap-generate-btn').addEventListener('click', generateHeatmap);
}

async function generateHeatmap() {
    const filename = document.getElementById('heatmap-file-select').value;
    if (!filename) {
        alert('请选择优化结果文件');
        return;
    }
    
    const response = await fetch(`/api/optimization/${filename}`);
    const result = await response.json();
    
    if (result.success) {
        const xParam = document.getElementById('heatmap-x-param').value;
        const yParam = document.getElementById('heatmap-y-param').value;
        const metric = document.getElementById('heatmap-metric').value;
        
        renderHeatmap(result.data, xParam, yParam, metric);
    }
}

function renderHeatmap(data, xParam, yParam, metric) {
    // 获取唯一的X和Y值
    const xValues = [...new Set(data.map(row => row[xParam]))].sort((a, b) => a - b);
    const yValues = [...new Set(data.map(row => row[yParam]))].sort((a, b) => a - b);
    
    // 创建热力图矩阵
    const matrix = [];
    for (let y of yValues) {
        const row = [];
        for (let x of xValues) {
            const point = data.find(d => d[xParam] === x && d[yParam] === y);
            row.push(point ? point[metric] : null);
        }
        matrix.push(row);
    }
    
    // 使用Chart.js的matrix插件或简单的热力图
    const ctx = document.getElementById('heatmap-chart').getContext('2d');
    
    if (heatmapChart) {
        heatmapChart.destroy();
    }
    
    // 简化版：使用散点图模拟热力图
    const points = [];
    data.forEach(row => {
        if (row[xParam] !== undefined && row[yParam] !== undefined && row[metric] !== null) {
            points.push({
                x: row[xParam],
                y: row[yParam],
                v: row[metric]
            });
        }
    });
    
    // 找出最大最小值用于颜色映射
    const values = points.map(p => p.v);
    const minVal = Math.min(...values);
    const maxVal = Math.max(...values);
    
    heatmapChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: metric,
                data: points,
                backgroundColor: points.map(p => {
                    const ratio = (p.v - minVal) / (maxVal - minVal);
                    const r = Math.floor(220 * (1 - ratio) + 40 * ratio);
                    const g = Math.floor(53 * (1 - ratio) + 167 * ratio);
                    const b = Math.floor(69 * (1 - ratio) + 69 * ratio);
                    return `rgba(${r}, ${g}, ${b}, 0.7)`;
                }),
                borderColor: '#fff',
                borderWidth: 1,
                pointRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: {
                    display: true,
                    text: `参数热力图 - ${metric}`,
                    font: { size: 16 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${metric}: ${context.raw.v.toFixed(4)}`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: xParam
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: yParam
                    }
                }
            }
        }
    });
}

// 初始化所有高级功能
document.addEventListener('DOMContentLoaded', function() {
    // 延迟加载，等待主功能初始化完成
    setTimeout(() => {
        initComparison();
        initAnalytics();
        initHeatmap();
    }, 500);
});