{% extends "audit/base.html" %}
{% load audit_filters %}

{% block title %}审计复盘中心 - AgomTradePro{% endblock %}

{% block extra_css %}
<style>
.hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.hero-panel {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.22), transparent 38%),
        linear-gradient(135deg, #0f172a, #1e293b 58%, #334155);
    color: #f8fafc;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.hero-title {
    margin: 0 0 10px 0;
    font-size: 28px;
    line-height: 1.2;
}

.hero-text {
    margin: 0 0 18px 0;
    color: rgba(248, 250, 252, 0.82);
    font-size: 14px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.meta-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 18px;
}

.meta-label {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 8px;
}

.meta-value {
    color: #0f172a;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.meta-note {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.workflow-grid,
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.action-card,
.workflow-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
}

.action-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.action-card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.action-icon,
.workflow-index {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
}

.action-icon {
    background: #eff6ff;
    color: #2563eb;
}

.workflow-index {
    background: #fff7ed;
    color: #c2410c;
}

.action-title,
.workflow-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.action-description,
.workflow-text {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.recent-reports {
    display: grid;
    gap: 14px;
}

.report-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto auto;
    gap: 18px;
    align-items: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
}

.report-info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #0f172a;
}

.report-meta {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.report-stats {
    display: flex;
    gap: 20px;
}

.report-stat {
    text-align: center;
}

.report-stat-value {
    font-size: 18px;
    font-weight: 700;
}

.report-stat-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.api-hint {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}

.api-hint code {
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 6px;
}

@media (max-width: 1100px) {
    .hero,
    .workflow-grid,
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-card {
        grid-template-columns: 1fr;
    }

    .report-stats {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .hero,
    .hero-meta,
    .workflow-grid,
    .quick-actions {
        grid-template-columns: 1fr;
    }

    .hero-panel,
    .meta-card,
    .action-card,
    .workflow-card,
    .report-card {
        padding: 18px;
    }

    .hero-title {
        font-size: 24px;
    }
}
</style>
{% endblock %}

{% block page_subtitle %}
<p class="page-subtitle">给 `/audit/review/` 一个真正可用的前端入口，而不是只讲接口。</p>
{% endblock %}

{% block header_actions %}
<a href="{% url 'audit:reports' %}" class="btn btn-outline">归因报告</a>
<a href="/api/docs/" class="btn btn-secondary">接口文档</a>
{% endblock %}

{% block audit_content %}
<section class="hero">
    <div class="hero-panel">
        <div class="badge badge-info" style="margin-bottom: 12px;">审计复核工作台</div>
        <h2 class="hero-title">审计复盘中心</h2>
        <p class="hero-text">
            这里聚合归因报告、阈值验证和操作审计入口。日常使用直接从页面进入，只有需要系统集成或自动化时再走 API。
        </p>
        <div class="hero-actions">
            <a href="{% url 'audit:reports' %}" class="btn btn-primary">查看归因报告</a>
            <a href="{% url 'audit:threshold_validation' %}" class="btn btn-outline">阈值验证</a>
            <a href="{% url 'audit:indicator_performance' %}" class="btn btn-outline">指标表现</a>
        </div>
    </div>

    <div class="hero-meta">
        <div class="meta-card">
            <div class="meta-label">最新验证批次</div>
            <div class="meta-value">
                {% if latest_validation %}{{ latest_validation.total_indicators }}{% else %}--{% endif %}
            </div>
            <div class="meta-note">
                {% if latest_validation %}
                本次共评估 {{ latest_validation.total_indicators }} 个指标，平均 F1 为 {{ latest_validation.avg_f1_score|floatformat:3 }}。
                {% else %}
                还没有最新验证结果，可以先进入阈值验证页面发起一次评估。
                {% endif %}
            </div>
        </div>
        <div class="meta-card">
            <div class="meta-label">最近归因报告</div>
            <div class="meta-value">{{ report_total_count|default:recent_reports|length }}</div>
            <div class="meta-note">
                当前已生成 {{ report_total_count|default:recent_reports|length }} 份报告，最近 5 条会直接展示在本页。
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="section-header">
        <h2 class="section-title">怎么用这个页面</h2>
    </div>
    <div class="workflow-grid">
        <div class="workflow-card">
            <div class="workflow-index">1</div>
            <h3 class="workflow-title">先看最近结果</h3>
            <p class="workflow-text">先确认最近生成了哪些归因报告，哪些验证批次需要复盘。</p>
        </div>
        <div class="workflow-card">
            <div class="workflow-index">2</div>
            <h3 class="workflow-title">进入专题页面</h3>
            <p class="workflow-text">按问题类型进入报告列表、指标表现或阈值验证，不需要手工拼 API 地址。</p>
        </div>
        <div class="workflow-card">
            <div class="workflow-index">3</div>
            <h3 class="workflow-title">查看操作日志</h3>
            <p class="workflow-text">管理员可直接追踪 MCP/SDK 调用链，普通用户查看自己的审计日志。</p>
        </div>
        <div class="workflow-card">
            <div class="workflow-index">4</div>
            <h3 class="workflow-title">需要集成再调 API</h3>
            <p class="workflow-text">接口保留给外部系统、脚本和自动化任务，本页只把它们作为辅助入口。</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="section-header">
        <h2 class="section-title">快速入口</h2>
    </div>
    <div class="quick-actions">
        <div class="action-card" onclick="location.href='{% url 'audit:reports' %}'">
            <div class="action-icon">报</div>
            <h3 class="action-title">归因报告</h3>
            <p class="action-description">查看已有报告、筛选归因方法、进入单份报告详情。</p>
        </div>
        <div class="action-card" onclick="location.href='{% url 'audit:indicator_performance' %}'">
            <div class="action-icon">指</div>
            <h3 class="action-title">指标表现</h3>
            <p class="action-description">检查指标准确率、召回率、稳定性和建议动作。</p>
        </div>
        <div class="action-card" onclick="location.href='{% url 'audit:threshold_validation' %}'">
            <div class="action-icon">阈</div>
            <h3 class="action-title">阈值验证</h3>
            <p class="action-description">发起验证任务，检查阈值是否合理，定位需要调整的指标。</p>
        </div>
        {% if user.is_staff %}
        <div class="action-card" onclick="location.href='{% url 'audit:operation_logs_admin' %}'">
            <div class="action-icon">审</div>
            <h3 class="action-title">操作审计</h3>
            <p class="action-description">查看后台操作日志、统计和导出能力，适合排查调用链。</p>
        </div>
        {% else %}
        <div class="action-card" onclick="location.href='{% url 'audit:my_operation_logs' %}'">
            <div class="action-icon">我</div>
            <h3 class="action-title">我的日志</h3>
            <p class="action-description">查看自己触发的审计记录和调用结果，便于做个人复盘。</p>
        </div>
        {% endif %}
    </div>
</section>

{% if pending_backtests %}
<section class="section">
    <div class="section-header">
        <h2 class="section-title">待复盘回测</h2>
    </div>
    <div class="recent-reports">
        {% for backtest in pending_backtests %}
        <div class="report-card">
            <div class="report-info">
                <h3>{{ backtest.name }}</h3>
                <div class="report-meta">
                    区间：{{ backtest.start_date|date:"Y-m-d" }} - {{ backtest.end_date|date:"Y-m-d" }}<br>
                    状态：已完成回测，尚未看到对应归因报告
                </div>
            </div>
            <div class="report-stats">
                <div class="report-stat">
                    <div class="report-stat-value">{{ completed_backtest_count }}</div>
                    <div class="report-stat-label">已完成回测</div>
                </div>
            </div>
            <a href="{% url 'backtest:detail' backtest.id %}" class="btn btn-outline btn-sm">查看回测</a>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if latest_validation %}
<section class="section">
    <div class="section-header">
        <h2 class="section-title">最新验证摘要</h2>
        <a href="{% url 'audit:threshold_validation' %}" class="btn btn-outline btn-sm">查看验证页</a>
    </div>
    <div class="card">
        <div class="report-stats">
            <div class="report-stat">
                <div class="report-stat-value">{{ latest_validation.total_indicators }}</div>
                <div class="report-stat-label">评估指标</div>
            </div>
            <div class="report-stat">
                <div class="report-stat-value text-success">{{ latest_validation.approved_indicators }}</div>
                <div class="report-stat-label">通过验证</div>
            </div>
            <div class="report-stat">
                <div class="report-stat-value">{{ latest_validation.avg_f1_score|floatformat:3 }}</div>
                <div class="report-stat-label">平均 F1</div>
            </div>
            <div class="report-stat">
                <div class="report-stat-value">{{ latest_validation.avg_stability_score|floatformat:3 }}</div>
                <div class="report-stat-label">平均稳定性</div>
            </div>
        </div>
        <div class="api-hint">
            最近一次运行时间：{{ latest_validation.run_date|date:"Y-m-d H:i" }}。
            总体建议：{{ latest_validation.overall_recommendation|default:"暂无建议" }}。
        </div>
    </div>
</section>
{% endif %}

<section class="section">
    <div class="section-header">
        <h2 class="section-title">最近归因报告</h2>
        <a href="{% url 'audit:reports' %}" class="btn btn-outline btn-sm">查看全部</a>
    </div>
    <div class="recent-reports">
        {% for report in recent_reports %}
        <div class="report-card">
            <div class="report-info">
                <h3>{{ report.backtest.name|default:report.backtest_id }}</h3>
                <div class="report-meta">
                    区间：{{ report.period_start|date:"Y-m-d" }} - {{ report.period_end|date:"Y-m-d" }}<br>
                    创建时间：{{ report.created_at|date:"Y-m-d H:i" }}
                </div>
            </div>
            <div class="report-stats">
                <div class="report-stat">
                    <div class="report-stat-value {% if report.total_pnl >= 0 %}text-success{% else %}text-danger{% endif %}">
                        {{ report.total_pnl|percentage:2 }}
                    </div>
                    <div class="report-stat-label">总收益</div>
                </div>
                <div class="report-stat">
                    <div class="report-stat-value">{{ report.regime_accuracy|floatformat:1 }}%</div>
                    <div class="report-stat-label">准确率</div>
                </div>
                <div class="report-stat">
                            <div class="report-stat-value">{{ report.loss_analyses_count|default:0 }}</div>
                    <div class="report-stat-label">损失项</div>
                </div>
            </div>
            <a href="{% url 'audit:report_detail' report.id %}" class="btn btn-primary btn-sm">查看详情</a>
        </div>
        {% empty %}
        <div class="card empty-state">
            <div class="empty-icon">审</div>
            <p>当前还没有归因报告，可以先去回测或报告页生成数据。</p>
            <a href="{% url 'audit:reports' %}" class="btn btn-primary">打开报告列表</a>
        </div>
        {% endfor %}
    </div>
</section>

<section class="section">
    <div class="section-header">
        <h2 class="section-title">接口还在，但退居二线</h2>
    </div>
    <div class="card">
        <p style="margin: 0; color: #475569; line-height: 1.8;">
            如果你是在浏览器里使用审计模块，直接从本页进入各个功能即可。
            只有脚本集成、外部系统调用或自动化任务才建议访问 API。
        </p>
        <div class="api-hint">
            需要对接接口时，统一从接口文档进入即可。
            浏览器侧常用入口保留在 <code>/audit/review/</code>、<code>/audit/reports/</code>、<code>/audit/threshold-validation/</code>。
        </div>
    </div>
</section>
{% endblock %}

{% block audit_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.action-card').forEach(function (card) {
        card.addEventListener('keypress', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                card.click();
            }
        });
        card.setAttribute('tabindex', '0');
        card.setAttribute('role', 'link');
    });
});
</script>
{% endblock %}