<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社群分析报告中心</title>
    <!-- 引入 Bootstrap CSS 和 Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        /* 增加鼠标悬浮效果 */
        .list-group-item:hover {
            background-color: #f8f9fa;
        }
        html[data-bs-theme="dark"] .list-group-item:hover {
            background-color: #343a40;
        }
    </style>
</head>
<body class="py-4">

    <div class="container" style="max-width: 960px;">
        
        <header class="border-bottom pb-3 mb-4">
            <!-- 图片横幅 -->
            <img src="{{ url_for('static', filename='images/header-banner.png') }}" class="img-fluid" alt="闪耀吧!噜咪 社群分析报告中心 星辉科研所">

            <!-- === 修改后的刷新信息栏 === -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <!-- 刷新提示文字（从页脚移动而来） -->
                <p class="text-muted mb-0">此页面每 30 秒自动刷新一次，以显示最新的分析报告。</p>

                <!-- 刷新动态图标 -->
                <div class="spinner-border text-primary" role="status" id="refresh-spinner" title="将在30秒后自动刷新...">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <!-- === 修改结束 === -->
        </header>

        <main>
            <div class="list-group shadow-sm">
                {% if reports %}
                    {% for report in reports %}
                        <!-- 报告列表项 -->
                        <a href="/reports/{{ report }}" target="_blank" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center p-3">
                            <span class="fs-5 fw-medium"><i class="bi bi-file-earmark-text me-2"></i>分析报告_{{ report.replace('_analysis.html', '') }}</span>
                            <span class="badge bg-secondary rounded-pill">{{ report.replace('_analysis.html', '') }}</span>
                        </a>
                    {% endfor %}
                {% else %}
                    <!-- 当没有报告时的友好提示 -->
                    <div class="list-group-item p-4">
                        <h5 class="mb-1"><i class="bi bi-info-circle-fill me-2"></i>暂无分析报告</h5>
                        <p class="mb-1 text-muted">
                            后台正在全力更新报告，请稍等。
                        </p>
                        <small>系统检测到文件后，将自动开始分析并在此处生成报告。</small>
                    </div>
                {% endif %}
            </div>
        </main>

        <!-- === 页脚（Footer）已被移除 === -->

    </div>

    <!-- 自动刷新脚本 -->
    <script>
        (function() {
            // 设置刷新间隔为 30000 毫秒 (30 秒)
            const REFRESH_INTERVAL_MS = 30000;
            
            // 在指定时间后执行刷新操作
            setTimeout(function() {
                const spinner = document.getElementById('refresh-spinner');
                if (spinner) {
                    // (可选) 在刷新前改变图标状态，给用户一个视觉反馈
                    spinner.classList.remove('text-primary');
                    spinner.classList.add('text-success');
                    spinner.title = "正在刷新...";
                }
                // 核心：重新加载页面
                window.location.reload();
            }, REFRESH_INTERVAL_MS);

            // (可选) 更新刷新指示器的倒计时提示
            let countdown = REFRESH_INTERVAL_MS / 1000;
            const spinner = document.getElementById('refresh-spinner');
            if (spinner) {
                spinner.title = `将在 ${countdown} 秒后自动刷新...`;
                const countdownTimer = setInterval(() => {
                    countdown--;
                    if (countdown > 0) {
                       spinner.title = `将在 ${countdown} 秒后自动刷新...`;
                    } else {
                       clearInterval(countdownTimer);
                    }
                }, 1000);
            }
        })();
    </script>
</body>
</html>
