{% extends "base.html" %}

{% block title %}监控面板 - Gemini Balancer{% endblock %}

{% block head_extra %}
    <link rel="stylesheet" href="/static/css/status-grid.css">

{% endblock %}

{% block content %}

<!-- [核心] 页面顶栏：标题与全局控制器 -->
<div class="flex items-center justify-between mb-6">
    <h2 class="text-3xl font-bold tracking-tight">数据总览</h2>
    <div class="flex items-center space-x-3">
        <!-- [最终形态] 完全自定义的下拉选择器组件 -->
        <div class="relative w-full" data-custom-select-container>
        
        <!-- 1. 隐藏的真实 <select>，用于表单提交 -->
        <select name="group-filter" id="globalGroupFilter" class="hidden">
            <option value="">所有分组</option>
            <!-- JS将会动态填充更多选项 -->
        </select>
        
        <!-- 2. "诱饵" - 我们看到的、可以完全自定义的按钮 -->
        <button type="button" class="custom-select-trigger h-9 w-full rounded-md border border-zinc-300 bg-zinc-50 py-1 pl-4 pr-8 text-left text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset dark:border-zinc-700 dark:bg-zinc-900">
            <span class="block truncate">所有分组</span>
            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
            <svg class="h-4 w-4 text-zinc-700 dark:text-zinc-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6 8 4 4 4-4"/>
            </svg>
            </span>
        </button>
        
        <!-- 3. "真正的菜单" - 可以被我们完全样式化的下拉面板 -->
        <div class="custom-select-panel absolute z-10 mt-1 w-full rounded-lg bg-zinc-50 dark:bg-zinc-900 shadow-xl p-1 hidden">
            <!-- 选项将会由 JS 动态生成并插入此处 -->
            <!-- 示例选项 -->
            <div class="custom-select-option" data-value="">所有分组</div>
            <div class="custom-select-option" data-value="group1">分组一</div>
            <div class="custom-select-option" data-value="group2">分组二</div>
        </div>
        
        </div>
                        
        <!-- [核心] 快速处置按钮 (触发模态框) -->
        <button id="quick-action-btn" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors h-9 px-4 py-2 bg-blue-500 text-white shadow hover:bg-blue-500/90">
            <i class="fas fa-bolt"></i>
            <span class="hidden lg:inline">快速处置</span>
        </button>
    </div>
</div>

<!-- [组件蓝图] 任何页面都可以复制此结构来创建一个新的滑动标签实例 -->
<div class="py-2">
  <div class="w-full overflow-x-auto scrollbar-hide">
    <!-- 1. 容器: 必须有 `data-sliding-tabs-container` 属性 -->
    <div role="tablist" class="relative inline-flex h-10 items-center justify-center inset-shadow-sm/25 rounded-lg bg-zinc-800/50 dark:bg-zinc-950 p-1" data-sliding-tabs-container>
      
      <!-- 2. 指示器: 必须有 `data-tab-indicator` 属性 -->
      <div class="absolute left-0 h-[calc(100%-0.5rem)] rounded-md bg-white dark:bg-zinc-700 shadow-sm" data-tab-indicator style="transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);"></div>
      <!-- 3. 标签项: 必须有 `data-tab-item` 属性。激活项应有 `tab-active` class -->
      <a href="#" role="tab" class="tab-item tab-active" data-tab-item>数据总览</a>
      <a href="#" role="tab" class="tab-item" data-tab-item>密钥管理</a>
      <a href="#" role="tab" class="tab-item" data-tab-item>性能分析</a>
      <a href="#" role="tab" class="tab-item" data-tab-item>请求日志</a>
    </div>
  </div>
</div>

<!-- [核心] 标签页内容区域 -->
<div class="mt-8">
    <!-- 标签A: 数据总览 (默认显示) -->
    <div id="tab-content-overview" class="space-y-6">
        
        <!-- 第一行: 四核心指标卡片 -->
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            <!-- 卡片1: 密钥统计 -->
            <div class="ds-stats-card bg-card text-card-foreground">
                <div class="flex flex-row items-center justify-between space-y-0 pb-2">
                    <div class="text-sm font-medium">密钥统计</div>
                    <i class="h-4 w-4 text-zinc-500 fas fa-key"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold">
                        <span id="stat-valid-keys">0</span> / <span id="stat-total-keys">0</span>
                    </div>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">有效密钥 / 总密钥数</p>
                </div>
            </div>
            <!-- 卡片2: 请求总览 -->
            <div class="ds-stats-card bg-card text-card-foreground">
                <div class="flex flex-row items-center justify-between space-y-0 pb-2">
                    <div class="text-sm font-medium">请求总览</div>
                    <i class="h-4 w-4 text-zinc-500 fas fa-exchange-alt"></i>
                </div>
                <div>
                    <!-- [ID保留] 沿用旧ID: stat-calls-24h -->
                    <div class="text-2xl font-bold" id="stat-calls-24h">0</div>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">24小时请求数</p>
                </div>
            </div>
            <!-- 卡片3: Token消耗 -->
            <div class="ds-stats-card bg-card text-card-foreground">
                <div class="flex flex-row items-center justify-between space-y-0 pb-2">
                    <div class="text-sm font-medium">Token 消耗</div>
                    <i class="h-4 w-4 text-zinc-500 fas fa-coins"></i>
                </div>
                <div>
                    <!-- [ID新增] 新增ID: stat-tokens-24h -->
                    <div class="text-2xl font-bold" id="stat-tokens-24h">0</div>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">24小时消耗</p>
                </div>
            </div>
            <!-- 卡片4: 请求成功率 -->
            <div class="ds-stats-card bg-card text-card-foreground">
                <div class="flex flex-row items-center justify-between space-y-0 pb-2">
                    <div class="text-sm font-medium">请求成功率</div>
                    <i class="h-4 w-4 text-zinc-500 fas fa-check-circle"></i>
                </div>
                <div>
                    <!-- [ID新增] 新增ID: stat-success-rate-24h -->
                    <div class="text-2xl font-bold" id="stat-success-rate-24h">0%</div>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">24小时成功率</p>
                </div>
            </div>
        </div>

        <!-- 第二行: API 状态分布 (通栏) -->
        <div class="ds-stats-card bg-card text-card-foreground">
            <h3 class="font-semibold leading-none tracking-tight mb-4">API 状态分布</h3>
            <!-- [容器保留] 沿用旧ID, JS可无缝对接 -->
            <div id="poolGridContainer" class="relative p-2 canvas-placeholder" style="height: 60px;">
                <canvas id="poolGridCanvas" class="absolute top-0 left-0 w-full h-full"></canvas>
            </div>
            <!-- [图例保留] 沿用旧ID -->
            <div id="poolStatusLegend" class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs mt-4">
                <span class="legend-item" data-status-hover="ACTIVE"><i class="fas fa-square text-green-500"></i> ACTIVE (<span id="legend-active">0</span>)</span>
                <span class="legend-item" data-status-hover="PENDING"><i class="fas fa-square text-gray-400"></i> PENDING (<span id="legend-pending">0</span>)</span>
                <span class="legend-item" data-status-hover="COOLDOWN"><i class="fas fa-square text-yellow-500"></i> COOLDOWN (<span id="legend-cooldown">0</span>)</span>
                <span class="legend-item" data-status-hover="DISABLED"><i class="fas fa-square text-orange-500"></i> DISABLED (<span id="legend-disabled">0</span>)</span>
                <span class="legend-item" data-status-hover="BANNED"><i class="fas fa-square text-red-500"></i> BANNED (<span id="legend-banned">0</span>)</span>
            </div>
        </div>
        
        <!-- 第三行: 左侧图表 + 右侧排行 -->
        <div class="grid gap-6 lg:grid-cols-5">
            <!-- 左侧大卡片: 请求趋势图 (占位) -->
            <div class="ds-stats-card bg-card text-card-foreground lg:col-span-3">
                <h3 class="font-semibold leading-none tracking-tight">请求趋势</h3>
                <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">成功与失败请求数</p>
                <!-- [容器新增] 新增一个清晰的ID给新图表 -->
                <div class="h-[350px] flex items-center justify-center text-zinc-400">
                    <canvas id="successFailChart"></canvas>
                    <span>图表加载中...</span>
                </div>
            </div>
            <!-- 右侧小卡片: 模型排行 (占位) -->
            <div class="ds-stats-card bg-card text-card-foreground lg:col-span-2">
                 <h3 class="font-semibold leading-none tracking-tight">模型排行</h3>
                 <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">24小时内调用次数</p>
                 <!-- [容器新增] 新增一个列表容器ID -->
                 <div id="model-ranking-list" class="space-y-4 h-[350px] overflow-y-auto pr-2">
                    <!-- JS将在此处动态填充排行列表 -->
                    <div class="flex items-center text-sm text-zinc-500">排行数据加载中...</div>
                 </div>
            </div>
        </div>

    </div>

    <!-- 其他标签页的内容区域 (暂时留空) -->
    <div id="tab-content-keys" class="hidden">密钥管理内容</div>
    <div id="tab-content-performance" class="hidden">性能分析内容</div>
    <div id="tab-content-requests" class="hidden">请求日志内容</div>

</div>

<!-- [占位符] 快速处置模态框 -->
<div id="quick-action-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-md p-6">
        <h3 class="text-lg font-medium">快速处置</h3>
        <p class="text-sm text-zinc-500 mt-2">模态框内容占位符，未来将在此处实现具体功能。</p>
        <div class="mt-4 flex justify-end">
            <button id="close-modal-btn" class="px-4 py-2 text-sm rounded-md bg-zinc-200 dark:bg-zinc-700">关闭</button>
        </div>
    </div>
</div>

{% endblock %}


{% block page_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {

    });
</script>
    <!-- [保留] 核心UI依赖 -->
    <script src="/static/js/status-grid.js" defer></script>
    <!-- [保留] 核心UI主程序 (需要进行适配) -->
    <script src="/static/js/dashboard.js" defer></script> 
{% endblock %}