<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AIDSO 数据监控</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">
        <div class="brand">
            <img
                class="brand-logo"
                src="{{ url_for('static', filename='dashboard/aidso_logo.png') }}"
                alt="AIDSO"
            >
        </div>
        <div class="nav-label">数据看板</div>
        <nav class="nav-list">
            <button class="nav-btn active" id="queueNavBtn" onclick="showPanel('queue')">积压查看</button>
            <button class="nav-btn" id="trendNavBtn" onclick="showPanel('trend')">历史任务趋势</button>
            <button class="nav-btn" id="thirdNavBtn" onclick="showPanel('third')">三方用量分析</button>
        </nav>
        <div class="sidebar-foot">
            <span class="health-dot"></span>
            <span>数据服务运行中</span>
        </div>
    </aside>

    <main class="main">
        <div class="header">
            <div>
                <div class="title" id="pageTitle">队列积压监控</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>
                <a class="logout-link" href="{{ url_for('dashboard.dashboard_logout') }}">退出</a>
            </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="table-wrap">
                <div class="section-head panel-card-head">
                    <div class="section-title">队列积压详情</div>
                    <div class="section-note">Redis 队列长度</div>
                </div>
                <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="trend-panel">
                <div class="section-head panel-card-head">
                    <div class="section-title">历史任务概览</div>
                    <div class="section-note" id="statsNote">等待加载</div>
                </div>
                <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>

        <section class="panel" id="thirdPanel">
            <div class="third-panel">
                <div class="section-head panel-card-head">
                    <div class="section-title">三方用量概览</div>
                    <div class="section-note" id="thirdStatsNote">等待加载</div>
                </div>
                <div class="filter-row">
                    <div class="quick-range">
                        <button class="quick-btn active" id="thirdRange3Btn" onclick="setThirdQuickRange(3)">近3天</button>
                        <button class="quick-btn" id="thirdRange7Btn" onclick="setThirdQuickRange(7)">近7天</button>
                        <button class="quick-btn" id="thirdRange30Btn" onclick="setThirdQuickRange(30)">近30天</button>
                    </div>
                    <div class="field">
                        <label for="thirdBeginTime">开始时间</label>
                        <input id="thirdBeginTime" type="date">
                    </div>
                    <div class="field">
                        <label for="thirdEndTime">结束时间</label>
                        <input id="thirdEndTime" type="date">
                    </div>
                    <div class="field">
                        <label for="thirdChannelFilter">渠道</label>
                        <select id="thirdChannelFilter">
                            <option value="">全部渠道</option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="thirdPlatformFilter">平台</label>
                        <select id="thirdPlatformFilter">
                            <option value="">全部平台</option>
                        </select>
                    </div>
                </div>

                <div class="third-metrics">
                    <div class="third-metric-card"><span>三方任务总量</span><strong id="thirdTotalMetric">0</strong></div>
                    <div class="third-metric-card"><span>日均任务量</span><strong id="thirdDailyAverageMetric">0</strong></div>
                    <div class="third-metric-card"><span>三方任务占比</span><strong id="thirdRatioMetric">0%</strong></div>
                    <div class="third-metric-card"><span>三方分享任务</span><strong id="thirdShareMetric">0</strong></div>
                    <div class="third-metric-card"><span>当前启用渠道</span><strong id="thirdEnabledMetric">0</strong></div>
                </div>

                <div class="third-dashboard-grid">
                    <section class="third-section-card">
                        <div class="third-card-head">
                            <strong>渠道用量排行</strong>
                            <span>按任务量降序</span>
                        </div>
                        <div id="thirdRanking"></div>
                    </section>
                    <section class="third-section-card">
                        <div class="third-card-head">
                            <strong>三方每日用量趋势</strong>
                            <div class="third-trend-switch">
                                <button class="active" id="thirdTrendChannelBtn" onclick="setThirdTrendMode('channel')">按渠道</button>
                                <button id="thirdTrendTotalBtn" onclick="setThirdTrendMode('total')">每日总量</button>
                            </div>
                        </div>
                        <div class="third-trend-chart" id="thirdTrendChart"></div>
                    </section>
                </div>

                <section class="third-section-card">
                    <div class="third-card-head">
                        <strong>渠道 × 平台用量矩阵</strong>
                        <span>颜色越深代表任务量越高</span>
                    </div>
                    <div class="third-table-scroll">
                        <table class="third-matrix-table" id="thirdMatrixTable"></table>
                    </div>
                </section>

                <section class="third-section-card">
                    <div class="third-card-head">
                        <strong>渠道详细数据</strong>
                        <span>仅展示当前启用渠道</span>
                    </div>
                    <div class="third-table-scroll">
                        <table class="third-detail-table">
                            <thead>
                            <tr>
                                <th>渠道</th>
                                <th>任务量</th>
                                <th>三方用量占比</th>
                                <th>分享任务</th>
                                <th>平台数</th>
                                <th>最近使用</th>
                                <th>日额度</th>
                                <th>总额度</th>
                            </tr>
                            </thead>
                            <tbody id="thirdDetailBody"></tbody>
                        </table>
                    </div>
                </section>

                <div class="trend-loading-mask" id="thirdLoadingMask">
                    <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>
