{% extends "base.html" %}

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

{% block sidebar_nav %}
<a class="nav-link" href="/">
    <i class="bi bi-people"></i> 学员管理
</a>
<a class="nav-link" href="/settings">
    <i class="bi bi-gear"></i> 问题配置
</a>
<a class="nav-link" href="/api-settings">
    <i class="bi bi-key"></i> API设置
</a>
<a class="nav-link" href="/classes">
    <i class="bi bi-collection"></i> 班级管理
</a>
<a class="nav-link active" href="/users">
    <i class="bi bi-person-badge"></i> 用户管理
</a>
<a class="nav-link" href="/templates" id="templatesNav" style="display:none;">
    <i class="bi bi-file-earmark-text"></i> 模板管理
</a>
<hr>
<a class="nav-link" href="#" onclick="showChangePasswordModal()">
    <i class="bi bi-key"></i> 修改密码
</a>
<a class="nav-link" href="#" onclick="logout()">
    <i class="bi bi-box-arrow-right"></i> 退出登录
</a>
{% 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" data-bs-toggle="modal" data-bs-target="#userModal">
        <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>
                </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" 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': '普通用户' };

// 检查登录状态
fetch('/api/check-login').then(r => r.json()).then(data => {
    if (!data.logged_in || data.role !== 'admin') {
        window.location.href = '/login';
        return;
    }
    const userDisplay = data.username + ' (' + ROLE_LABELS[data.role] + ')';
    document.getElementById('currentUserDisplay').textContent = userDisplay;
    const mobileDisplay = document.getElementById('mobileUserDisplay');
    if (mobileDisplay) mobileDisplay.textContent = userDisplay;

    document.getElementById('templatesNav').style.display = '';
    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="5" class="text-center text-muted">暂无用户</td></tr>';
            } else {
                tbody.innerHTML = users.map(u => `
                    <tr>
                        <td>${u.id}</td>
                        <td>${u.username}</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-warning me-1" onclick="openResetPwd(${u.id})">重置密码</button>
                            <button class="btn btn-sm btn-danger" onclick="deleteUser(${u.id})">删除</button>
                        </td>
                    </tr>
                `).join('');
            }
        })
        .catch(err => {
            console.error('加载用户失败:', err);
            alert('加载用户失败，请刷新页面重试');
        });
}

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

    if (!username || !password) {
        alert('请填写完整');
        return;
    }

    const method = id ? 'PUT' : 'POST';
    fetch('/api/users' + (id ? '/' + id : ''), {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password, role })
    }).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 %}