{% extends "base.html" %}
{% from "_macros.html" import sidebar %}
{% block title %}PulseMQ - Dashboard{% endblock %}
{% block body %}
<div class="layout">
    {{ sidebar('dashboard') }}
    <div class="main-content">
        <div class="page-header"><h1>Dashboard</h1></div>

        <div class="stat-grid">
            <div class="stat-card blue">
                <div class="stat-icon">📡</div>
                <div class="stat-value">{{ topic_count }}</div>
                <div class="stat-label">Topics</div>
            </div>
            <div class="stat-card green">
                <div class="stat-icon">👥</div>
                <div class="stat-value">{{ online_count }} / {{ total_users }}</div>
                <div class="stat-label">在线 / 总用户</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-icon">🕐</div>
                <div class="stat-value" style="font-size:16px;">{{ latest_message_time.strftime('%H:%M:%S') if latest_message_time else '暂无' }}</div>
                <div class="stat-label">最近消息</div>
            </div>
            <div class="stat-card red">
                <div class="stat-icon">📦</div>
                <div class="stat-value">{{ config.queue_size }}</div>
                <div class="stat-label">队列大小</div>
            </div>
        </div>

        <div class="card">
            <div class="card-title">Topic 监控</div>
            <div style="display:flex;gap:12px;align-items:center;margin-bottom:12px;">
                <select id="topic-select" onchange="loadTopicChart()" style="width:260px;">
                    {% for topic in topics %}
                    <option value="{{ topic.name }}">{{ topic.name }}</option>
                    {% endfor %}
                </select>
                <span id="topic-realtime" style="color:var(--text-muted);font-size:12px;"></span>
            </div>
            <div id="chart-container" style="height:220px;"></div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            <div class="card">
                <div class="card-title">系统配置</div>
                <table>
                    <tr><td style="color:var(--text-muted);width:120px;">HTTP 端口</td><td>{{ config.http_port }}</td></tr>
                    <tr><td style="color:var(--text-muted);">ROUTER 端口</td><td>{{ config.zmq_router_port }}</td></tr>
                    <tr><td style="color:var(--text-muted);">PULL 端口</td><td>{{ config.zmq_pull_port }}</td></tr>
                    <tr><td style="color:var(--text-muted);">数据库</td><td>{{ config.db_type }}</td></tr>
                    <tr><td style="color:var(--text-muted);">心跳间隔</td><td>{{ config.heartbeat_interval }}s</td></tr>
                </table>
            </div>
            <div class="card">
                <div class="card-title">快速开始</div>
                <div id="quickstart-loading" style="color:var(--text-muted);">加载中...</div>
                <div id="quickstart-content" style="display:none;">
                    <div style="margin-bottom:8px;">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                            <span style="font-size:12px;color:var(--text-muted);">Server</span>
                            <button class="btn btn-sm" onclick="copyCode('server-code')">复制</button>
                        </div>
                        <pre style="max-height:120px;overflow-y:auto;"><code id="server-code"></code></pre>
                    </div>
                    <div>
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                            <span style="font-size:12px;color:var(--text-muted);">Client</span>
                            <button class="btn btn-sm" onclick="copyCode('client-code')">复制</button>
                        </div>
                        <pre style="max-height:120px;overflow-y:auto;"><code id="client-code"></code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
let chart=null;
function loadTopicChart(){
    const topic=document.getElementById('topic-select').value;
    if(!topic)return;
    fetch(`/api/dashboard/stats/${encodeURIComponent(topic)}`)
    .then(r=>r.json()).then(data=>{
        if(!chart) chart=echarts.init(document.getElementById('chart-container'));
        chart.setOption({
            backgroundColor:'transparent',
            tooltip:{trigger:'axis'},
            xAxis:{type:'category',data:data.labels,axisLabel:{color:'#7b8ba3',fontSize:11},axisLine:{lineStyle:{color:'#1e293b'}}},
            yAxis:{type:'value',axisLabel:{color:'#7b8ba3',fontSize:11},splitLine:{lineStyle:{color:'#1e293b'}},axisLine:{show:false}},
            series:[{type:'line',data:data.counts,smooth:true,areaStyle:{opacity:0.15,color:'#3b82f6'},lineStyle:{color:'#3b82f6',width:2},itemStyle:{color:'#3b82f6'},symbol:'none'}],
            grid:{left:45,right:15,top:15,bottom:25},
        });
        const rt=document.getElementById('topic-realtime');
        rt.textContent=`今日: ${data.today_count} 条`;
    });
}
function loadQuickstart(){
    fetch('/api/dashboard/quickstart')
    .then(r=>r.json()).then(data=>{
        document.getElementById('server-code').textContent=data.server_code;
        document.getElementById('client-code').textContent=data.client_code;
        document.getElementById('quickstart-loading').style.display='none';
        document.getElementById('quickstart-content').style.display='block';
    });
}
function copyCode(id){navigator.clipboard.writeText(document.getElementById(id).textContent)}
window.addEventListener('load',()=>{loadTopicChart();loadQuickstart()});
setInterval(loadTopicChart,30000);
</script>
{% endblock %}