{% extends "base.html" %}
{% block title %}PulseMQ - Topics{% 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">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;">
            <h1>Topics</h1>
            <button class="btn btn-primary" onclick="showCreateDialog()">+ 创建 Topic</button>
        </div>

        <div id="create-dialog" style="display:none;margin-bottom:1rem;">
            <div class="card" style="display:flex;gap:1rem;align-items:end;">
                <div class="form-group" style="flex:1;margin-bottom:0;">
                    <label>Topic 名称 (group/topic)</label>
                    <input type="text" id="new-topic-name" placeholder="metrics/cpu">
                </div>
                <button class="btn btn-primary" onclick="createTopic()">创建</button>
                <button class="btn" onclick="hideCreateDialog()" style="background:var(--border);color:var(--text-primary);">取消</button>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Topic</th>
                    <th>今日消息量</th>
                    <th>最近消息时间</th>
                    <th>订阅用户</th>
                    <th>推送用户</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for t in topics %}
                <tr>
                    <td>{{ t.name }}</td>
                    <td>{{ t.today_count }}</td>
                    <td>{{ t.last_message_time.strftime('%Y-%m-%d %H:%M:%S') if t.last_message_time else '-' }}</td>
                    <td>{{ t.sub_user_count }}</td>
                    <td>{{ t.pub_user_count }}</td>
                    <td>
                        <a href="/topics/{{ t.id }}" class="btn btn-primary" style="text-decoration:none;font-size:0.75rem;">详情</a>
                        <button class="btn btn-danger" style="font-size:0.75rem;" onclick="deleteTopic({{ t.id }}, '{{ t.name }}')">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
function showCreateDialog() { document.getElementById('create-dialog').style.display = 'block'; }
function hideCreateDialog() { document.getElementById('create-dialog').style.display = 'none'; }

async function createTopic() {
    const name = document.getElementById('new-topic-name').value;
    const resp = await fetch('/api/topics', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token')},
        body: JSON.stringify({name}),
    });
    if (resp.ok) location.reload();
    else alert((await resp.json()).detail);
}

async function deleteTopic(id, name) {
    if (!confirm(`确定删除 ${name}？`)) return;
    await fetch(`/api/topics/${id}`, {
        method: 'DELETE',
        headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')},
    });
    location.reload();
}
</script>
{% endblock %}