{% extends "base.html" %}
{% block title %}PulseMQ - Dashboard{% endblock %}
{% block body %}
<div class="layout">
    <nav class="sidebar">
        <h3 style="margin-bottom:1.5rem;color:var(--accent);">PulseMQ</h3>
        <a href="/" class="active">Dashboard</a>
        <a href="/topics">Topics</a>
        <a href="/users">Users</a>
        <a href="/permissions">Permissions</a>
    </nav>
    <div class="main-content">
        <h1 style="margin-bottom:1.5rem;">Dashboard</h1>

        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;">
            <div class="card">
                <div class="stat-label">Topics</div>
                <div class="stat-value">{{ topic_count }}</div>
            </div>
            <div class="card">
                <div class="stat-label">在线用户 / 总用户</div>
                <div class="stat-value">{{ online_count }} / {{ total_users }}</div>
            </div>
            <div class="card">
                <div class="stat-label">最近消息时间</div>
                <div class="stat-value" style="font-size:1rem;">{{ latest_message_time.strftime('%H:%M:%S') if latest_message_time else '暂无数据' }}</div>
            </div>
            <div class="card">
                <div class="stat-label">队列大小</div>
                <div class="stat-value">{{ config.queue_size }}</div>
            </div>
        </div>

        <div class="card" style="margin-bottom:1.5rem;">
            <h3 style="margin-bottom:1rem;">Topic 监控</h3>
            <select id="topic-select" onchange="loadTopicChart()" style="width:300px;margin-bottom:1rem;">
                {% for topic in topics %}
                <option value="{{ topic.name }}">{{ topic.name }}</option>
                {% endfor %}
            </select>
            <div id="chart-container" style="height:300px;"></div>
            <div id="topic-realtime" style="margin-top:0.5rem;color:var(--text-secondary);"></div>
        </div>

        <div class="card" style="margin-bottom:1.5rem;">
            <h3 style="margin-bottom:1rem;">系统配置</h3>
            <table>
                <tr><td>HTTP 端口</td><td>{{ config.http_port }}</td></tr>
                <tr><td>ZMQ ROUTER 端口</td><td>{{ config.zmq_router_port }}</td></tr>
                <tr><td>ZMQ PULL 端口</td><td>{{ config.zmq_pull_port }}</td></tr>
                <tr><td>数据库类型</td><td>{{ config.db_type }}</td></tr>
                <tr><td>队列大小</td><td>{{ config.queue_size }}</td></tr>
                <tr><td>心跳间隔</td><td>{{ config.heartbeat_interval }}s</td></tr>
            </table>
        </div>

        <div class="card">
            <h3 style="margin-bottom:1rem;">快速开始</h3>
            <div id="quickstart-loading">加载中...</div>
            <div id="quickstart-content" style="display:none;">
                <h4>Server</h4>
                <pre><code id="server-code"></code></pre>
                <button class="btn btn-primary" onclick="copyCode('server-code')" style="margin:0.5rem 0;">复制</button>
                <h4>Client</h4>
                <pre><code id="client-code"></code></pre>
                <button class="btn btn-primary" onclick="copyCode('client-code')" style="margin:0.5rem 0;">复制</button>
            </div>
        </div>
    </div>
</div>

<script>
let chart = null;

function loadTopicChart() {
    const topic = document.getElementById('topic-select').value;
    fetch(`/api/dashboard/stats/${encodeURIComponent(topic)}`, {
        headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}
    })
    .then(r => r.json())
    .then(data => {
        if (!chart) {
            chart = echarts.init(document.getElementById('chart-container'));
        }
        chart.setOption({
            backgroundColor: 'transparent',
            xAxis: { type: 'category', data: data.labels, axisLabel: { color: '#a0a0b0' } },
            yAxis: { type: 'value', axisLabel: { color: '#a0a0b0' } },
            series: [{ type: 'line', data: data.counts, smooth: true, areaStyle: { opacity: 0.3 }, lineStyle: { color: '#e94560' }, itemStyle: { color: '#e94560' } }],
            grid: { left: 50, right: 20, top: 20, bottom: 30 },
        });
        const rt = document.getElementById('topic-realtime');
        rt.textContent = `今日消息: ${data.today_count} | 最近消息: ${data.last_message_time || '暂无'}`;
    });
}

function loadQuickstart() {
    fetch('/api/dashboard/quickstart', {
        headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}
    })
    .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 %}