<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GEO 队列监控面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ url_for('static', filename='dashboard/queue_monitor.css') }}">
</head>

<body>
<div class="layout">
    <aside class="sidebar">
        <button class="nav-btn active" id="queueNavBtn" onclick="showPanel('queue')">积压查看</button>
        <button class="nav-btn" id="trendNavBtn" onclick="showPanel('trend')">历史任务趋势</button>
    </aside>

    <main class="main">
        <div class="header">
            <div>
                <div class="title" id="pageTitle">GEO 队列监控面板</div>
                <div class="desc" id="pageDesc">查看各平台 stream_batch / batch 队列积压情况</div>
            </div>

            <div class="right">
                <span class="last-time" id="lastTime">未刷新</span>
                <button class="btn" onclick="refreshCurrentPanel()">刷新</button>
            </div>
        </div>

        <section class="panel active" id="queuePanel">
            <div class="summary">
                <div class="card">
                    <div class="card-name">总积压</div>
                    <div class="card-value" id="totalCount">0</div>
                </div>
                <div class="card">
                    <div class="card-name">stream_batch 总数</div>
                    <div class="card-value" id="streamBatchCount">0</div>
                </div>
                <div class="card">
                    <div class="card-name">batch 总数</div>
                    <div class="card-value" id="batchCount">0</div>
                </div>
                <div class="card">
                    <div class="card-name">提交队列</div>
                    <div class="card-value" id="commitCount">0</div>
                </div>
            </div>

            <div class="section-head">
                <div class="section-title">队列积压详情</div>
                <div class="section-note">Redis 队列长度</div>
            </div>
            <div class="table-wrap">
                <table>
                    <thead>
                    <tr>
                        <th>平台</th>
                        <th>stream_batch</th>
                        <th>batch</th>
                        <th>总积压</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="queueTableBody"></tbody>
                </table>
            </div>
        </section>

        <section class="panel" id="trendPanel">
            <div class="section-head">
                <div class="section-title">历史任务趋势</div>
                <div class="section-note" id="statsNote">等待加载</div>
            </div>
            <div class="trend-panel">
                <div class="filter-row">
                    <div class="quick-range">
                        <button class="quick-btn active" id="range3Btn" onclick="setQuickRange(3)">近3天</button>
                        <button class="quick-btn" id="range7Btn" onclick="setQuickRange(7)">近7天</button>
                        <button class="quick-btn" id="range30Btn" onclick="setQuickRange(30)">近30天</button>
                    </div>
                    <div class="field">
                        <label for="beginTime">开始时间</label>
                        <input id="beginTime" type="date">
                    </div>
                    <div class="field">
                        <label for="endTime">结束时间</label>
                        <input id="endTime" type="date">
                    </div>
                </div>
                <div class="trend-chart" id="platformTrendChart"></div>
                <div class="trend-summary" id="trendSummary"></div>
                <div class="trend-loading-mask" id="trendLoadingMask">
                    <div class="loading-box">
                        <span class="loading-spinner"></span>
                        <span>加载中</span>
                    </div>
                </div>
            </div>
        </section>

        <div class="error" id="errorBox"></div>
    </main>
</div>

<script src="{{ url_for('static', filename='dashboard/queue_monitor.js') }}" defer></script>
</body>
</html>
