{% extends "base.html" %}

{% block title %}首页 - A股量化交易系统{% endblock %}

{% block content %}
<!-- 页面标题 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-1 text-primary fw-bold">
                    <i class="fas fa-chart-line me-2"></i>交易信号概览
                </h1>
                <p class="text-muted mb-0">实时监控量化策略筛选结果</p>
            </div>
            <div class="text-end">
                <div class="text-muted small">
                    <i class="fas fa-clock me-1"></i>最后更新
                </div>
                <div class="fw-bold text-primary">{{ current_time }}</div>
            </div>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-2">
    {% for stat in strategy_stats %}
    <div class="col-lg-3 col-md-6 mb-1">
        <div class="stats-card hover-lift fade-in">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stats-label text-uppercase mb-1">{{ stat.strategy_name }}</div>
                    <div class="stats-value">{{ stat.total_signals or 0 }}</div>
                    <div class="stats-sublabel">
                        <i class="fas fa-building me-1"></i>{{ stat.unique_stocks or 0 }} 只股票
                    </div>
                </div>
                <div class="text-primary" style="opacity: 0.3;">
                    <i class="fas fa-signal fa-lg"></i>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <!-- 如果没有统计数据，显示默认卡片 -->
    {% if not strategy_stats %}
    <div class="col-lg-3 col-md-6 mb-1">
        <div class="stats-card hover-lift">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stats-label text-uppercase mb-1">K线形态策略</div>
                    <div class="stats-value">0</div>
                    <div class="stats-sublabel">
                        <i class="fas fa-building me-1"></i>0 只股票
                    </div>
                </div>
                <div class="text-primary" style="opacity: 0.3;">
                    <i class="fas fa-signal fa-lg"></i>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 最新信号表格 -->
<div class="row">
    <div class="col-12">
        <div class="card fade-in">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0 text-primary fw-bold">
                    <i class="fas fa-list-ul me-2"></i>最新交易信号
                </h5>
                <a href="{{ url_for('signals') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-arrow-right me-1"></i>查看全部
                </a>
            </div>
            <div class="card-body p-0">
                {% if signals %}
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>股票</th>
                                    <th>策略</th>
                                    <th>周期</th>
                                    <th>信号日期</th>
                                    <th>突破价格</th>
                                    <th>阴线高点</th>
                                    <th>突破幅度</th>
                                    <th>实体比例</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for signal in signals %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="badge badge-light-primary me-2">{{ signal.stock_code }}</span>
                                            <span class="fw-bold text-truncate" style="max-width: 80px;">{{ signal.stock_name or '未知' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-light-primary">{{ signal.strategy_name }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{% if signal.timeframe == 'daily' %}primary{% else %}success{% endif %}">
                                            {{ 'D' if signal.timeframe == 'daily' else 'W' }}
                                        </span>
                                    </td>
                                    <td class="text-muted">{{ signal.signal_date | datetime_format('%m-%d') }}</td>
                                    <td class="text-success fw-bold">{{ signal.breakout_price | currency }}元</td>
                                    <td class="text-muted">{{ signal.yin_high | currency }}元</td>
                                    <td>
                                        <span class="badge bg-{% if signal.breakout_pct and signal.breakout_pct > 3 %}success{% elif signal.breakout_pct and signal.breakout_pct > 1 %}warning{% else %}secondary{% endif %}">
                                            {{ signal.breakout_pct | percentage }}
                                        </span>
                                    </td>
                                    <td class="text-muted">{{ signal.final_yang_entity_ratio | percentage }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-chart-bar"></i>
                    <h4>暂无交易信号</h4>
                    <p>系统将在检测到符合条件的K线形态时显示信号</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 回踩提醒 -->
{% if pullback_alerts %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card border-warning">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>最近回踩提醒
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>股票代码</th>
                                <th>股票名称</th>
                                <th>回踩日期</th>
                                <th>当前价格</th>
                                <th>阴线高点</th>
                                <th>回调幅度</th>
                                <th>距离高点</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for alert in pullback_alerts[:5] %}
                            <tr>
                                <td><span class="badge bg-secondary">{{ alert.stock_code }}</span></td>
                                <td>{{ alert.stock_name }}</td>
                                <td>{{ alert.pullback_date | datetime_format('%Y-%m-%d') }}</td>
                                <td class="text-danger">{{ alert.current_price | currency }}元</td>
                                <td>{{ alert.yin_high | currency }}元</td>
                                <td>
                                    <span class="badge bg-danger">{{ alert.pullback_pct | percentage }}</span>
                                </td>
                                <td>{{ alert.distance_to_yin_high | percentage }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="text-end">
                    <a href="{{ url_for('pullbacks') }}" class="btn btn-warning btn-sm">
                        <i class="fas fa-eye me-1"></i>查看全部回踩提醒
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
    // 自动刷新功能
    function autoRefresh() {
        setTimeout(function() {
            location.reload();
        }, 300000); // 5分钟自动刷新
    }

    $(document).ready(function() {
        autoRefresh();
    });
</script>
{% endblock %}