<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回测结果查看器</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- Chart.js for 图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>📊 A股回测结果查看器</h1>
            <p class="subtitle">策略回测数据分析与可视化平台</p>
        </header>

        <!-- 标签页导航 -->
        <nav class="tabs">
            <button class="tab-btn active" data-tab="optimization">参数优化对比</button>
            <button class="tab-btn" data-tab="trades">交易明细</button>
            <button class="tab-btn" data-tab="equity">资金曲线</button>
            <button class="tab-btn" data-tab="comparison">多策略对比</button>
            <button class="tab-btn" data-tab="analytics">统计分析</button>
            <button class="tab-btn" data-tab="heatmap">参数热力图</button>
        </nav>

        <!-- 参数优化对比页面 -->
        <div id="optimization" class="tab-content active">
            <div class="section-header">
                <h2>参数优化结果对比</h2>
                <div class="controls">
                    <label>选择优化结果：
                        <select id="opt-file-select">
                            <option value="">加载中...</option>
                        </select>
                    </label>
                    <label>排序方式：
                        <select id="opt-sort-select">
                            <option value="sharpe">夏普比率↓</option>
                            <option value="total_return">总收益↓</option>
                            <option value="annual_return">年化收益↓</option>
                            <option value="max_drawdown">最大回撤↑</option>
                        </select>
                    </label>
                    <label>显示数量：
                        <input type="number" id="opt-limit" value="20" min="5" max="100" step="5">
                    </label>
                    <button id="opt-refresh-btn" class="btn-primary">刷新数据</button>
                    <button id="opt-export-btn" class="btn-secondary">导出Excel</button>
                </div>
            </div>

            <div class="stats-cards">
                <div class="stat-card">
                    <h3>参数组合总数</h3>
                    <p class="stat-value" id="opt-total">-</p>
                </div>
                <div class="stat-card">
                    <h3>最佳夏普比率</h3>
                    <p class="stat-value" id="opt-best-sharpe">-</p>
                </div>
                <div class="stat-card">
                    <h3>最佳总收益</h3>
                    <p class="stat-value" id="opt-best-return">-</p>
                </div>
                <div class="stat-card">
                    <h3>最小回撤</h3>
                    <p class="stat-value" id="opt-worst-dd">-</p>
                </div>
            </div>

            <div class="table-container">
                <table id="opt-table">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>短期均线</th>
                            <th>长期均线</th>
                            <th>持有天数</th>
                            <th>仓位比例</th>
                            <th>总收益率</th>
                            <th>年化收益</th>
                            <th>夏普比率</th>
                            <th>最大回撤</th>
                            <th>资金利用率</th>
                            <th>交易次数</th>
                        </tr>
                    </thead>
                    <tbody id="opt-tbody">
                        <tr><td colspan="11">请选择优化结果文件</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 交易明细页面 -->
        <div id="trades" class="tab-content">
            <div class="section-header">
                <h2>交易明细记录</h2>
                <div class="controls">
                    <label>选择交易记录：
                        <select id="trades-file-select">
                            <option value="">加载中...</option>
                        </select>
                    </label>
                    <label>筛选：
                        <select id="trades-filter">
                            <option value="all">全部交易</option>
                            <option value="win">盈利交易</option>
                            <option value="loss">亏损交易</option>
                        </select>
                    </label>
                    <button id="trades-refresh-btn" class="btn-primary">刷新数据</button>
                    <button id="trades-export-btn" class="btn-secondary">导出Excel</button>
                </div>
            </div>

            <div class="stats-cards">
                <div class="stat-card">
                    <h3>总交易次数</h3>
                    <p class="stat-value" id="trades-total">-</p>
                </div>
                <div class="stat-card">
                    <h3>胜率</h3>
                    <p class="stat-value" id="trades-win-rate">-</p>
                </div>
                <div class="stat-card">
                    <h3>总盈亏</h3>
                    <p class="stat-value" id="trades-profit">-</p>
                </div>
                <div class="stat-card">
                    <h3>平均盈亏</h3>
                    <p class="stat-value" id="trades-avg">-</p>
                </div>
                <div class="stat-card">
                    <h3>最大盈利</h3>
                    <p class="stat-value" id="trades-max-win">-</p>
                </div>
                <div class="stat-card">
                    <h3>最大亏损</h3>
                    <p class="stat-value" id="trades-max-loss">-</p>
                </div>
            </div>

            <div class="table-container">
                <table id="trades-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>股票代码</th>
                            <th>买入价</th>
                            <th>卖出价</th>
                            <th>数量</th>
                            <th>盈亏比例</th>
                            <th>盈亏金额</th>
                            <th>结果</th>
                        </tr>
                    </thead>
                    <tbody id="trades-tbody">
                        <tr><td colspan="8">请选择交易记录文件</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 资金曲线页面 -->
        <div id="equity" class="tab-content">
            <div class="section-header">
                <h2>资金曲线可视化</h2>
                <div class="controls">
                    <label>选择策略：
                        <select id="equity-file-select">
                            <option value="">加载中...</option>
                        </select>
                    </label>
                    <button id="equity-refresh-btn" class="btn-primary">刷新数据</button>
                </div>
            </div>

            <div class="stats-cards">
                <div class="stat-card">
                    <h3>初始资金</h3>
                    <p class="stat-value" id="equity-initial">-</p>
                </div>
                <div class="stat-card">
                    <h3>最终资金</h3>
                    <p class="stat-value" id="equity-final">-</p>
                </div>
                <div class="stat-card">
                    <h3>总收益率</h3>
                    <p class="stat-value" id="equity-return">-</p>
                </div>
                <div class="stat-card">
                    <h3>最大回撤</h3>
                    <p class="stat-value" id="equity-dd">-</p>
                </div>
            </div>

            <div class="chart-container">
                <canvas id="equity-chart"></canvas>
            </div>
        </div>

        <!-- 多策略对比页面 -->
        <div id="comparison" class="tab-content">
            <div class="section-header">
                <h2>多策略对比分析</h2>
                <div class="controls">
                    <label>选择策略1：
                        <select id="compare-strategy1">
                            <option value="">请选择...</option>
                        </select>
                    </label>
                    <label>选择策略2：
                        <select id="compare-strategy2">
                            <option value="">请选择...</option>
                        </select>
                    </label>
                    <button id="compare-btn" class="btn-primary">对比分析</button>
                </div>
            </div>

            <div class="comparison-grid">
                <div class="compare-card">
                    <h3>策略1</h3>
                    <div id="strategy1-stats" class="stats-list">
                        <p>请选择策略...</p>
                    </div>
                </div>
                <div class="compare-card">
                    <h3>对比指标</h3>
                    <div id="comparison-diff" class="stats-list">
                        <p>请选择两个策略...</p>
                    </div>
                </div>
                <div class="compare-card">
                    <h3>策略2</h3>
                    <div id="strategy2-stats" class="stats-list">
                        <p>请选择策略...</p>
                    </div>
                </div>
            </div>

            <div class="chart-container">
                <canvas id="comparison-chart"></canvas>
            </div>
        </div>

        <!-- 统计分析页面 -->
        <div id="analytics" class="tab-content">
            <div class="section-header">
                <h2>统计分析与可视化</h2>
                <div class="controls">
                    <label>选择交易记录：
                        <select id="analytics-file-select">
                            <option value="">加载中...</option>
                        </select>
                    </label>
                    <button id="analytics-refresh-btn" class="btn-primary">刷新数据</button>
                </div>
            </div>

            <div class="analytics-grid">
                <div class="chart-box">
                    <h3>收益分布</h3>
                    <canvas id="profit-distribution-chart"></canvas>
                </div>
                <div class="chart-box">
                    <h3>回撤分析</h3>
                    <canvas id="drawdown-chart"></canvas>
                </div>
            </div>

            <div class="analytics-grid">
                <div class="chart-box">
                    <h3>持仓时间分布</h3>
                    <canvas id="holding-period-chart"></canvas>
                </div>
                <div class="chart-box">
                    <h3>月度收益</h3>
                    <canvas id="monthly-return-chart"></canvas>
                </div>
            </div>
        </div>

        <!-- 参数热力图页面 -->
        <div id="heatmap" class="tab-content">
            <div class="section-header">
                <h2>参数热力图分析</h2>
                <div class="controls">
                    <label>选择优化结果：
                        <select id="heatmap-file-select">
                            <option value="">加载中...</option>
                        </select>
                    </label>
                    <label>X轴参数：
                        <select id="heatmap-x-param">
                            <option value="param_ma_short">短期均线</option>
                            <option value="param_ma_long">长期均线</option>
                            <option value="param_hold_days">持有天数</option>
                        </select>
                    </label>
                    <label>Y轴参数：
                        <select id="heatmap-y-param">
                            <option value="param_ma_long">长期均线</option>
                            <option value="param_hold_days">持有天数</option>
                            <option value="param_ma_short">短期均线</option>
                        </select>
                    </label>
                    <label>值指标：
                        <select id="heatmap-metric">
                            <option value="sharpe">夏普比率</option>
                            <option value="total_return">总收益</option>
                            <option value="annual_return">年化收益</option>
                            <option value="max_drawdown">最大回撤</option>
                        </select>
                    </label>
                    <button id="heatmap-generate-btn" class="btn-primary">生成热力图</button>
                </div>
            </div>

            <div class="chart-container" style="height: 600px;">
                <canvas id="heatmap-chart"></canvas>
            </div>
        </div>
    </div>

    <footer>
        <p>A股回测系统 v1.0 | 数据来源: strategy_backtest/results/</p>
    </footer>

    <script src="/static/js/app.js"></script>
    <script src="/static/js/advanced.js"></script>
    <script src="/static/js/export.js"></script>
</body>
</html>
