{% extends "base.html" %}
{% block title %}PulseMQ - Users{% 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">Topics</a>
        <a href="/users" class="active">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>Users</h1>
            <button class="btn btn-primary" onclick="showCreateDialog()">+ 创建用户</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>用户名</label>
                    <input type="text" id="new-username" placeholder="输入用户名">
                </div>
                <button class="btn btn-primary" onclick="createUser()">创建</button>
                <button class="btn" onclick="hideCreateDialog()" style="background:var(--border);color:var(--text-primary);">取消</button>
            </div>
        </div>

        <div id="create-result" style="display:none;margin-bottom:1rem;" class="card">
            <p>用户创建成功！请保存 Token：</p>
            <code id="new-token" style="display:block;margin:0.5rem 0;padding:0.5rem;background:var(--bg-primary);border-radius:4px;word-break:break-all;"></code>
            <button class="btn btn-primary" onclick="navigator.clipboard.writeText(document.getElementById('new-token').textContent)">复制</button>
        </div>

        <table>
            <thead>
                <tr><th>用户名</th><th>Token</th><th>状态</th><th>创建时间</th><th>操作</th></tr>
            </thead>
            <tbody>
                {% for u in users %}
                <tr>
                    <td>{{ u.username }}</td>
                    <td><code style="font-size:0.75rem;">{{ u.token[:16] }}...</code> <button class="btn" style="font-size:0.7rem;padding:0.2rem 0.5rem;" onclick="navigator.clipboard.writeText('{{ u.token }}')">复制</button></td>
                    <td><span class="badge badge-{{ 'success' if u.is_active else 'danger' }}">{{ '启用' if u.is_active else '停用' }}</span></td>
                    <td>{{ u.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        <a href="/users/{{ u.id }}" class="btn btn-primary" style="text-decoration:none;font-size:0.75rem;">详情</a>
                        <button class="btn" style="font-size:0.75rem;background:var(--border);color:var(--text-primary);" onclick="toggleUser({{ u.id }}, {{ 'false' if u.is_active else 'true' }})">{{ '停用' if u.is_active else '启用' }}</button>
                        <button class="btn btn-danger" style="font-size:0.75rem;" onclick="deleteUser({{ u.id }}, '{{ u.username }}')">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
function showCreateDialog() { document.getElementById('create-dialog').style.display = 'block'; document.getElementById('create-result').style.display = 'none'; }
function hideCreateDialog() { document.getElementById('create-dialog').style.display = 'none'; }

async function createUser() {
    const username = document.getElementById('new-username').value;
    const resp = await fetch('/api/users', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token')},
        body: JSON.stringify({username}),
    });
    if (resp.ok) {
        const data = await resp.json();
        document.getElementById('new-token').textContent = data.token;
        document.getElementById('create-result').style.display = 'block';
        document.getElementById('create-dialog').style.display = 'none';
    } else {
        alert((await resp.json()).detail);
    }
}

async function toggleUser(id, active) {
    await fetch(`/api/users/${id}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token')},
        body: JSON.stringify({is_active: active}),
    });
    location.reload();
}

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