{% extends "base.html" %}
{% from "_macros.html" import sidebar %}
{% block title %}PulseMQ - {{ topic_name }}{% endblock %}
{% block body %}
<div class="layout">
    {{ sidebar('topics') }}
    <div class="main-content">
        <div class="page-header">
            <h1>{{ topic_name }}</h1>
            <a href="/topics" class="btn">← 返回</a>
        </div>

        <div class="stat-grid">
            <div class="stat-card blue">
                <div class="stat-icon">📊</div>
                <div class="stat-value">{{ realtime.today_count }}</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;">{{ realtime.last_message_time.strftime('%H:%M:%S') if realtime.last_message_time else '暂无' }}</div>
                <div class="stat-label">最近消息</div>
            </div>
            <div class="stat-card green">
                <div class="stat-icon">📅</div>
                <div class="stat-value" style="font-size:16px;">{{ topic_created.strftime('%Y-%m-%d %H:%M') if topic_created else '-' }}</div>
                <div class="stat-label">创建时间</div>
            </div>
        </div>

        <div class="card" style="margin-bottom:16px;">
            <div class="card-title">消息量趋势</div>
            <div id="chart" style="height:200px;"></div>
        </div>

        <div class="card">
            <div class="card-title">授权用户</div>
            <div class="table-wrap" style="max-height:200px;">
                <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-muted);">暂无授权用户</td></tr>
                    {% endif %}
                    </tbody>
                </table>
            </div>
            <p style="margin-top:8px;font-size:12px;color:var(--text-muted);">权限管理请前往 <a href="/permissions" style="color:var(--accent);">Permissions</a></p>
        </div>
    </div>
</div>
<script>
fetch('/api/dashboard/stats/{{ topic_name }}').then(r=>r.json()).then(data=>{
    const c=echarts.init(document.getElementById('chart'));
    c.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},
    });
});
</script>
{% endblock %}