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

        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
            <div class="card">
                <div class="stat-label">今日消息量</div>
                <div class="stat-value">{{ realtime.today_count }}</div>
            </div>
            <div class="card">
                <div class="stat-label">最近消息时间</div>
                <div class="stat-value" style="font-size:1rem;">{{ realtime.last_message_time.strftime('%H:%M:%S') if realtime.last_message_time else '暂无' }}</div>
            </div>
            <div class="card">
                <div class="stat-label">创建时间</div>
                <div class="stat-value" style="font-size:1rem;">{{ topic_created.strftime('%Y-%m-%d %H:%M') if topic_created else '-' }}</div>
            </div>
        </div>

        <div class="card" style="margin-bottom:1.5rem;">
            <h3 style="margin-bottom:1rem;">消息量趋势（近 7 天）</h3>
            <div id="chart-container" style="height:300px;"></div>
        </div>

        <div class="card">
            <h3 style="margin-bottom:1rem;">授权用户</h3>
            <table>
                <thead><tr><th>用户</th><th>推送权限</th><th>订阅权限</th></tr></thead>
                <tbody>
                    {% for u in users %}
                    <tr>
                        <td>{{ u.username }}</td>
                        <td>{{ '✓' if u.can_pub else '✗' }}</td>
                        <td>{{ '✓' if u.can_sub else '✗' }}</td>
                    </tr>
                    {% endfor %}
                    {% if not users %}
                    <tr><td colspan="3" style="text-align:center;color:var(--text-secondary);">暂无授权用户</td></tr>
                    {% endif %}
                </tbody>
            </table>
            <p style="margin-top:0.5rem;color:var(--text-secondary);font-size:0.875rem;">权限管理请前往 <a href="/permissions" style="color:var(--accent);">Permissions</a> 页面</p>
        </div>
    </div>
</div>
<script>
fetch('/api/dashboard/stats/{{ topic_name }}', {
    headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}
}).then(r => r.json()).then(data => {
    const 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 },
    });
});
</script>
{% endblock %}