{% extends "service_monitor/base.html" %}
{% block title %}报告对比{% endblock %}

{% block extra_css %}
<style>
    .container { max-width: 960px; }

    /* 对比报告头 */
    .compare-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
    .compare-meta h2 { font-size: 20px; color: var(--gray-900); margin-bottom: 4px; }
    .compare-meta .sub { font-size: 13px; color: var(--gray-500); }
    .compare-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn-action { border: none; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-primary:hover { background: #1d4ed8; }
    .btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
    .btn-secondary:hover { background: var(--gray-200); }

    /* 报告信息对比表 */
    .report-info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); }
    .report-info-table th { background: var(--gray-50); padding: 10px 16px; text-align: left; font-weight: 600; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); }
    .report-info-table td { padding: 10px 16px; border-bottom: 1px solid var(--gray-100); font-size: 14px; color: var(--gray-900); }
    .report-info-table tr:last-child td { border-bottom: none; }
    .report-info-table .col-label { width: 100px; color: var(--gray-500); font-weight: 500; }

    /* 差异汇总卡片 */
    .diff-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
    .diff-card { background: #fff; border-radius: 12px; padding: 18px; text-align: center; border: 1px solid var(--gray-200); }
    .diff-card .count { font-size: 28px; font-weight: 700; }
    .diff-card .label { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
    .diff-card .icon { font-size: 20px; margin-bottom: 4px; }
    .dc-abnormal { border-color: #ffccc7; background: #fff0f0; }
    .dc-abnormal .count { color: #cf1322; }
    .dc-recovered { border-color: #b7eb8f; background: #f0fff0; }
    .dc-recovered .count { color: #389e0d; }
    .dc-changed { border-color: #ffe58f; background: #fffbe6; }
    .dc-changed .count { color: #d48806; }
    .dc-new { border-color: #91d5ff; background: #e6f7ff; }
    .dc-new .count { color: #096dd9; }
    .dc-removed { border-color: #d9d9d9; background: #f5f5f5; }
    .dc-removed .count { color: #8c8c8c; }

    /* 差异类型区块 */
    .diff-section { margin-bottom: 20px; }
    .diff-section-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--gray-200); }
    .diff-section-title .badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
    .badge-abnormal { background: #fff0f0; color: #cf1322; }
    .badge-recovered { background: #f0fff0; color: #389e0d; }
    .badge-changed { background: #fffbe6; color: #d48806; }
    .badge-new { background: #e6f7ff; color: #096dd9; }
    .badge-removed { background: #f5f5f5; color: #8c8c8c; }

    /* 模块分组 */
    .module-group { background: #fff; border-radius: 12px; border: 1px solid var(--gray-200); margin-bottom: 10px; overflow: hidden; }
    .module-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; user-select: none; }
    .module-group-header:hover { background: var(--gray-50); }
    .module-group-toggle { font-size: 12px; color: var(--gray-500); transition: transform .2s; flex-shrink: 0; }
    .module-group.open .module-group-toggle { transform: rotate(90deg); }
    .module-group-name { font-weight: 700; color: var(--gray-900); flex: 1; }
    .module-group-count { font-size: 12px; color: var(--gray-500); }
    .module-group-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .module-group.open .module-group-body { max-height: 5000px; }

    /* 差异项行 */
    .diff-row { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--gray-100); font-size: 14px; align-items: center; }
    .diff-row:last-child { border-top: none; }
    .diff-item-name { font-weight: 600; color: var(--gray-900); }
    .diff-value { font-weight: 500; }
    .diff-change { font-size: 13px; }
    .tag-abnormal { color: #cf1322; font-weight: 600; }
    .tag-recovered { color: #389e0d; font-weight: 600; }
    .tag-changed { color: #d48806; font-weight: 600; }
    .tag-new { color: #096dd9; font-weight: 600; }
    .tag-removed { color: #8c8c8c; }

    /* 无差异提示 */
    .no-diff { text-align: center; padding: 40px 20px; color: var(--gray-500); font-size: 15px; }
    .no-diff .icon { font-size: 48px; margin-bottom: 12px; }

    /* 错误提示 */
    .error-box { text-align: center; padding: 40px 20px; }
    .error-box .icon { font-size: 48px; margin-bottom: 12px; }
    .error-box .msg { color: var(--red); font-size: 16px; font-weight: 600; }

    /* 导出菜单 */
    .export-wrap { position: relative; }
    .export-menu { display: none; position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); overflow: hidden; z-index: 10; }
    .export-menu.show { display: block; }
    .export-menu a { display: block; padding: 10px 20px; font-size: 14px; color: var(--gray-700); text-decoration: none; }
    .export-menu a:hover { background: var(--gray-50); }

    @media screen and (max-width: 768px) {
        .container { padding: 0; }
        .compare-head { flex-direction: column; align-items: flex-start; gap: 10px; }
        .compare-meta h2 { font-size: 16px; }
        .compare-actions { width: 100%; }
        .btn-action { flex: 1; text-align: center; font-size: 13px; padding: 8px 12px; }
        .diff-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .diff-card { padding: 12px; }
        .diff-card .count { font-size: 22px; }
        .diff-card .label { font-size: 11px; }
        .report-info-table td, .report-info-table th { padding: 8px 10px; font-size: 13px; }
        .diff-row { grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 14px; font-size: 13px; }
        .diff-row .diff-value:last-of-type { display: none; }
        .module-group-header { padding: 10px 14px; }
        .module-group-name { font-size: 14px; word-break: break-word; }
        .export-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; border-radius: 12px; }
    }
    @media screen and (max-width: 480px) {
        .compare-meta h2 { font-size: 14px; }
        .diff-summary { grid-template-columns: repeat(2, 1fr); gap: 6px; }
        .diff-card { padding: 10px; }
        .diff-card .count { font-size: 18px; }
        .diff-card .icon { font-size: 16px; }
        .diff-row { padding: 7px 12px; font-size: 12px; }
        .module-group-header { padding: 8px 12px; }
        .module-group-name { font-size: 13px; }
        .btn-action { font-size: 12px; padding: 7px 10px; }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    {% if error %}
    <div class="error-box">
        <div class="icon">❌</div>
        <div class="msg">{{ error }}</div>
        <a href="/service-monitor/reports" class="btn-action btn-secondary" style="margin-top:16px;">返回报告列表</a>
    </div>
    {% elif data %}
    <div class="compare-head">
        <div class="compare-meta">
            <h2>📊 报告对比</h2>
            <div class="sub">
                {{ data.report_a.target_name }} ·
                {{ (data.report_a.created_at or '').replace('T', ' ') }} vs {{ (data.report_b.created_at or '').replace('T', ' ') }}
            </div>
        </div>
        <div class="compare-actions">
            <div class="export-wrap">
                <button class="btn-action btn-primary" onclick="toggleExport()">⬇ 导出对比 ▾</button>
                <div class="export-menu" id="export-menu">
                    <a href="/api/service-monitor/reports/{{ data.report_a.id }}/compare/{{ data.report_b.id }}/export?format=md">导出 Markdown</a>
                    <a href="/api/service-monitor/reports/{{ data.report_a.id }}/compare/{{ data.report_b.id }}/export?format=html">导出 HTML</a>
                </div>
            </div>
            <a href="/service-monitor/report/{{ data.report_a.id }}" class="btn-action btn-secondary">查看基准报告</a>
            <a href="/service-monitor/reports" class="btn-action btn-secondary">返回列表</a>
        </div>
    </div>

    <!-- 报告信息对比表 -->
    <table class="report-info-table">
        <tr><th></th><th>基准报告</th><th>对比报告</th></tr>
        <tr><td class="col-label">报告ID</td><td>{{ data.report_a.id }}</td><td>{{ data.report_b.id }}</td></tr>
        <tr><td class="col-label">时间</td><td>{{ (data.report_a.created_at or '').replace('T', ' ') }}</td><td>{{ (data.report_b.created_at or '').replace('T', ' ') }}</td></tr>
        <tr><td class="col-label">总项数</td><td>{{ data.report_a.total_items }}</td><td>{{ data.report_b.total_items }}</td></tr>
        <tr><td class="col-label">正常</td><td>{{ data.report_a.normal_count }}</td><td>{{ data.report_b.normal_count }}</td></tr>
        <tr><td class="col-label">警告</td><td>{{ data.report_a.warning_count }}</td><td>{{ data.report_b.warning_count }}</td></tr>
        <tr><td class="col-label">严重</td><td>{{ data.report_a.critical_count }}</td><td>{{ data.report_b.critical_count }}</td></tr>
    </table>

    <!-- 差异汇总卡片 -->
    <div class="diff-summary">
        <div class="diff-card dc-abnormal">
            <div class="icon">⚠️</div>
            <div class="count">{{ data.diff_summary.new_abnormal }}</div>
            <div class="label">新增异常</div>
        </div>
        <div class="diff-card dc-recovered">
            <div class="icon">✅</div>
            <div class="count">{{ data.diff_summary.recovered }}</div>
            <div class="label">恢复正常</div>
        </div>
        <div class="diff-card dc-changed">
            <div class="icon">📊</div>
            <div class="count">{{ data.diff_summary.value_changed }}</div>
            <div class="label">值变化</div>
        </div>
        <div class="diff-card dc-new">
            <div class="icon">➕</div>
            <div class="count">{{ data.diff_summary.new_items }}</div>
            <div class="label">新增检测项</div>
        </div>
        <div class="diff-card dc-removed">
            <div class="icon">➖</div>
            <div class="count">{{ data.diff_summary.removed_items }}</div>
            <div class="label">消失检测项</div>
        </div>
    </div>

    {% set total_diffs = data.diff_summary.new_abnormal + data.diff_summary.recovered + data.diff_summary.value_changed + data.diff_summary.new_items + data.diff_summary.removed_items %}
    {% if total_diffs == 0 %}
    <div class="no-diff">
        <div class="icon">🎉</div>
        <div>两份报告无差异，所有检测项状态一致</div>
    </div>
    {% else %}

    <!-- 新增异常 -->
    {% if data.diff_details.new_abnormal %}
    <div class="diff-section">
        <div class="diff-section-title">⚠️ 新增异常 <span class="badge badge-abnormal">{{ data.diff_summary.new_abnormal }}</span></div>
        {% for group in data.diff_details.new_abnormal %}
        <div class="module-group open">
            <div class="module-group-header" onclick="this.parentElement.classList.toggle('open')">
                <span class="module-group-toggle">▶</span>
                <span class="module-group-name">{{ group.module_name }}</span>
                <span class="module-group-count">{{ group.items|length }} 项</span>
            </div>
            <div class="module-group-body">
                ">
                {% for it in group.items %}
                <div class="diff-row">
                    <div class="diff-item-name tag-abnormal">{{ it.name }}</div>
                    <div class="diff-value">{{ it.value_a }}</div>
                    <div class="diff-value tag-abnormal">{{ it.value_b }}</div>
                    <div class="diff-change tag-abnormal">{{ it.change_desc }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- 恢复正常 -->
    {% if data.diff_details.recovered %}
    <div class="diff-section">
        <div class="diff-section-title">✅ 恢复正常 <span class="badge badge-recovered">{{ data.diff_summary.recovered }}</span></div>
        {% for group in data.diff_details.recovered %}
        <div class="module-group open">
            <div class="module-group-header" onclick="this.parentElement.classList.toggle('open')">
                <span class="module-group-toggle">▶</span>
                <span class="module-group-name">{{ group.module_name }}</span>
                <span class="module-group-count">{{ group.items|length }} 项</span>
            </div>
            <div class="module-group-body">
                {% for it in group.items %}
                <div class="diff-row">
                    <div class="diff-item-name tag-recovered">{{ it.name }}</div>
                    <div class="diff-value">{{ it.value_a }}</div>
                    <div class="diff-value tag-recovered">{{ it.value_b }}</div>
                    <div class="diff-change tag-recovered">{{ it.change_desc }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- 值变化 -->
    {% if data.diff_details.value_changed %}
    <div class="diff-section">
        <div class="diff-section-title">📊 值变化 <span class="badge badge-changed">{{ data.diff_summary.value_changed }}</span></div>
        {% for group in data.diff_details.value_changed %}
        <div class="module-group">
            <div class="module-group-header" onclick="this.parentElement.classList.toggle('open')">
                <span class="module-group-toggle">▶</span>
                <span class="module-group-name">{{ group.module_name }}</span>
                <span class="module-group-count">{{ group.items|length }} 项</span>
            </div>
            <div class="module-group-body">
                {% for it in group.items %}
                <div class="diff-row">
                    <div class="diff-item-name tag-changed">{{ it.name }}</div>
                    <div class="diff-value">{{ it.value_a }}</div>
                    <div class="diff-value">{{ it.value_b }}</div>
                    <div class="diff-change tag-changed">{{ it.change_desc }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- 新增检测项 -->
    {% if data.diff_details.new_items %}
    <div class="diff-section">
        <div class="diff-section-title">➕ 新增检测项 <span class="badge badge-new">{{ data.diff_summary.new_items }}</span></div>
        {% for group in data.diff_details.new_items %}
        <div class="module-group">
            <div class="module-group-header" onclick="this.parentElement.classList.toggle('open')">
                <span class="module-group-toggle">▶</span>
                <span class="module-group-name">{{ group.module_name }}</span>
                <span class="module-group-count">{{ group.items|length }} 项</span>
            </div>
            <div class="module-group-body">
                {% for it in group.items %}
                <div class="diff-row">
                    <div class="diff-item-name tag-new">{{ it.name }}</div>
                    <div class="diff-value">-</div>
                    <div class="diff-value">{{ it.value_b }}</div>
                    <div class="diff-change tag-new">新增检测项</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- 消失检测项 -->
    {% if data.diff_details.removed_items %}
    <div class="diff-section">
        <div class="diff-section-title">➖ 消失检测项 <span class="badge badge-removed">{{ data.diff_summary.removed_items }}</span></div>
        {% for group in data.diff_details.removed_items %}
        <div class="module-group">
            <div class="module-group-header" onclick="this.parentElement.classList.toggle('open')">
                <span class="module-group-toggle">▶</span>
                <span class="module-group-name">{{ group.module_name }}</span>
                <span class="module-group-count">{{ group.items|length }} 项</span>
            </div>
            <div class="module-group-body">
                {% for it in group.items %}
                <div class="diff-row">
                    <div class="diff-item-name tag-removed">{{ it.name }}</div>
                    <div class="diff-value">{{ it.value_a }}</div>
                    <div class="diff-value">-</div>
                    <div class="diff-change tag-removed">消失检测项</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {% endif %}{# total_diffs check #}
    {% endif %}{# data check #}
</div>
{% endblock %}

{% block extra_js %}
<script>
function toggleExport() {
    const menu = document.getElementById('export-menu');
    menu.classList.toggle('show');
}
document.addEventListener('click', function(e) {
    const menu = document.getElementById('export-menu');
    if (menu && !e.target.closest('.export-wrap')) {
        menu.classList.remove('show');
    }
});
</script>
{% endblock %}