{% extends "base.html" %}

{% block title %}用户管理 - 钢琴练习方案系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4><i class="bi bi-person-badge"></i> 用户管理</h4>
    <button class="btn btn-primary" onclick="openAddUser()">
        <i class="bi bi-plus-circle"></i> 新增用户
    </button>
</div>

<div class="card">
    <div class="card-body">
        <table class="table table-hover" id="usersTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>角色</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- 新增/编辑用户弹窗 -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">新增用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="userId">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control" id="userName">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" id="passwordLabel">初始密码</label>
                        <input type="password" class="form-control" id="password">
                        <div class="form-text">8位以上，包含大小写字母、数字和特殊字符</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">角色</label>
                        <select class="form-select" id="role">
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 重置密码弹窗 -->
<div class="modal fade" id="resetPwdModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">重置密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="resetPwdForm">
                    <input type="hidden" id="resetUserId">
                    <div class="mb-3">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required>
                        <div class="form-text">8位以上，包含大小写字母、数字和特殊字符</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" id="confirmResetBtn">重置密码</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const ROLE_LABELS = { 'admin': '管理员', 'user': '普通用户' };

window.pageInit = function() {
    loadUsers();
};

// Toast 通知函数
function showToast(message, isError = true) {
    const toast = document.createElement('div');
    toast.className = 'toast-container position-fixed top-50 start-50 translate-middle';
    toast.style.zIndex = '9999';
    toast.innerHTML = `
        <div class="toast show" role="alert">
            <div class="toast-header ${isError ? 'bg-danger' : 'bg-success'} text-white">
                <strong class="me-auto">${isError ? '错误' : '成功'}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">${message}</div>
        </div>
    `;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// 加载用户列表
function loadUsers() {
    fetch('/api/users')
        .then(r => {
            if (!r.ok) throw new Error('请求失败: ' + r.status);
            return r.json();
        })
        .then(users => {
            const tbody = document.querySelector('#usersTable tbody');
            if (users.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无用户</td></tr>';
            } else {
                tbody.innerHTML = users.map(u => `
                    <tr>
                        <td>${u.id}</td>
                        <td>${u.username}</td>
                        <td>${u.name || '-'}</td>
                        <td><span class="badge ${u.role === 'admin' ? 'bg-danger' : 'bg-secondary'}">${ROLE_LABELS[u.role]}</span></td>
                        <td>${u.created_at}</td>
                        <td>
                            <button class="btn btn-sm btn-primary me-1" onclick="openEditUser(${u.id}, '${u.username}', '${u.name || ''}', '${u.role}')">编辑</button>
                            <button class="btn btn-sm btn-warning me-1" onclick="openResetPwd(${u.id})">重置密码</button>
                            ${u.role === 'admin' ? `<button class="btn btn-sm btn-danger" onclick="deleteUser(${u.id})">删除</button>` : ''}
                        </td>
                    </tr>
                `).join('');
            }
        })
        .catch(err => {
            console.error('加载用户失败:', err);
            alert('加载用户失败，请刷新页面重试');
        });
}

// 打开新增用户
function openAddUser() {
    document.getElementById('userId').value = '';
    document.getElementById('username').value = '';
    document.getElementById('username').readOnly = false;
    document.getElementById('userName').value = '';
    document.getElementById('password').value = '';
    document.getElementById('password').parentElement.querySelector('.form-text').textContent = '8位以上，包含大小写字母、数字和特殊字符';
    document.getElementById('role').value = 'user';
    document.getElementById('role').disabled = false;
    document.getElementById('userModalTitle').textContent = '新增用户';
    new bootstrap.Modal(document.getElementById('userModal')).show();
}

// 打开编辑用户
function openEditUser(id, username, name, role) {
    document.getElementById('userId').value = id;
    document.getElementById('username').value = username;
    document.getElementById('username').readOnly = true;
    document.getElementById('userName').value = name;
    document.getElementById('password').value = '';
    document.getElementById('password').parentElement.querySelector('.form-text').textContent = '不填则保持不变';
    document.getElementById('role').value = role;
    document.getElementById('role').disabled = true;
    document.getElementById('userModalTitle').textContent = '编辑用户';
    new bootstrap.Modal(document.getElementById('userModal')).show();
}

// 保存用户
document.getElementById('saveUserBtn').onclick = () => {
    const id = document.getElementById('userId').value;
    const username = document.getElementById('username').value.trim();
    const name = document.getElementById('userName').value.trim();
    const password = document.getElementById('password').value;
    const role = document.getElementById('role').value;

    if (!username) {
        alert('请填写用户名');
        return;
    }
    if (!id && !password) {
        alert('请填写密码');
        return;
    }

    const method = id ? 'PUT' : 'POST';
    const body = { username, role };
    if (name) body.name = name;
    if (password) body.password = password;

    fetch('/api/users' + (id ? '/' + id : ''), {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            const modal = bootstrap.Modal.getInstance(document.getElementById('userModal'));
            if (modal) modal.hide();
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            loadUsers();
        }
    });
};

// 重置密码
function openResetPwd(id) {
    document.getElementById('resetUserId').value = id;
    document.getElementById('newPassword').value = '';
    new bootstrap.Modal(document.getElementById('resetPwdModal')).show();
}

document.getElementById('confirmResetBtn').onclick = () => {
    const id = document.getElementById('resetUserId').value;
    const newPassword = document.getElementById('newPassword').value;
    if (!newPassword) {
        alert('请输入新密码');
        return;
    }
    fetch('/api/users/' + id + '/reset-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ new_password: newPassword })
    }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            const modal = bootstrap.Modal.getInstance(document.getElementById('resetPwdModal'));
            if (modal) modal.hide();
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            showToast('密码重置成功', false);
        }
    });
};

// 删除用户
function deleteUser(id) {
    if (!confirm('确定要删除该用户吗？')) return;
    fetch('/api/users/' + id, { method: 'DELETE' }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            loadUsers();
        }
    });
}
</script>
{% endblock %}