{% extends "base.html" %}
{% from "_macros.html" import sidebar %}
{% block title %}PulseMQ - Users{% endblock %}
{% block body %}
<div class="layout">
    {{ sidebar('users') }}
    <div class="main-content">
        <div class="page-header">
            <h1>Users</h1>
            <button class="btn btn-primary" onclick="showCreate()">+ 创建用户</button>
        </div>

        <div id="create-dialog" style="display:none;">
            <div class="card inline-form">
                <div class="form-group"><label>用户名</label><input type="text" id="new-username" placeholder="输入用户名"></div>
                <button class="btn btn-primary" onclick="createUser()">创建</button>
                <button class="btn" onclick="document.getElementById('create-dialog').style.display='none'">取消</button>
            </div>
        </div>

        <div id="create-result" style="display:none;" class="card">
            <span style="color:var(--success);">✓ 创建成功</span> — 请保存 Token：
            <code id="new-token" style="display:block;margin:8px 0;padding:8px;background:var(--bg-input);border-radius:4px;word-break:break-all;font-size:12px;"></code>
            <button class="btn btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('new-token').textContent)">复制</button>
        </div>

        <div class="card">
            <div class="table-wrap">
                <table>
                    <thead><tr><th>用户名</th><th>Token</th><th>创建Topic</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead>
                    <tbody id="data-body">
                        {% for u in users %}
                        <tr data-idx="{{ loop.index0 }}">
                            <td style="font-weight:600;">{{ u.username }}</td>
                            <td><code style="font-size:11px;">{{ u.token[:12] }}…</code> <button class="btn btn-sm" onclick="navigator.clipboard.writeText('{{ u.token }}')">复制</button></td>
                            <td>
                                <button class="btn btn-sm {{ 'btn-success' if u.can_create_topic else '' }}" onclick="toggleCreate({{ u.id }}, {{ 'false' if u.can_create_topic else 'true' }})">{{ '✓' if u.can_create_topic else '✗' }}</button>
                            </td>
                            <td><span class="badge {{ 'badge-success' if u.is_active else 'badge-danger' }}">{{ '启用' if u.is_active else '停用' }}</span></td>
                            <td style="color:var(--text-muted);">{{ u.created_at.strftime('%m-%d %H:%M') }}</td>
                            <td>
                                <a href="/users/{{ u.id }}" class="btn btn-sm">详情</a>
                                <button class="btn btn-sm" onclick="toggleActive({{ u.id }},{{ 'false' if u.is_active else 'true' }})">{{ '停用' if u.is_active else '启用' }}</button>
                                <button class="btn btn-sm btn-danger" onclick="delUser({{ u.id }},'{{ u.username }}')">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div id="pagination" class="pagination"></div>
        </div>
    </div>
</div>
<script>
function showCreate(){document.getElementById('create-dialog').style.display='block';document.getElementById('create-result').style.display='none'}
async function createUser(){
    const r=await fetch('/api/users',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:document.getElementById('new-username').value})});
    if(r.ok){const d=await r.json();document.getElementById('new-token').textContent=d.token;document.getElementById('create-result').style.display='block';document.getElementById('create-dialog').style.display='none'}
    else alert((await r.json()).detail);
}
async function toggleActive(id,v){await fetch('/api/users/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({is_active:v})});location.reload()}
async function toggleCreate(id,v){await fetch('/api/users/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({can_create_topic:v})});location.reload()}
async function delUser(id,name){if(!confirm('确定删除 '+name+'？'))return;await fetch('/api/users/'+id,{method:'DELETE'});location.reload()}
paginate('data-body',15);
</script>
{% endblock %}