{% extends "base.html" %}

{% block title %}用户管理{% endblock %}

{% block content %}
<div class="container">
    <div class="header-section">
        <h1>用户管理</h1>
        <a href="{{ url_for('register') }}" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> 注册新用户
        </a>
    </div>

    <div class="users-table">
        <table class="table">
            <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>权限级别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.user_id }}</td>
                    <td>{{ user.username }}</td>
                    <td>
                        <span class="permission-badge {% if user.premission == 0 %}admin{% else %}user{% endif %}">
                            {% if user.premission == 0 %}管理员{% else %}普通用户{% endif %}
                        </span>
                    </td>
                    <td class="actions">
                        {% if user.username != 'admin' %}
                        <!-- 修改密码按钮 -->
                        <button class="btn btn-sm btn-warning" onclick="showPasswordModal('{{ user.username }}')">
                            <i class="fas fa-key"></i> 修改密码
                        </button>
                        
                        <!-- 修改权限按钮 -->
                        <button class="btn btn-sm btn-info" onclick="showPermissionModal('{{ user.username }}', {{ user.premission }})">
                            <i class="fas fa-user-cog"></i> 修改权限
                        </button>
                        
                        <!-- 删除用户按钮 -->
                        <button class="btn btn-sm btn-danger" onclick="confirmDelete('{{ user.username }}')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                        {% else %}
                        <span class="text-muted">系统管理员</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 修改密码模态框 -->
<div id="passwordModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('passwordModal')">&times;</span>
        <h2>修改用户密码</h2>
        <form id="passwordForm" method="POST">
            <div class="form-group">
                <label for="new_password">新密码:</label>
                <input type="password" id="new_password" name="new_password" required minlength="6">
            </div>
            <div class="form-group">
                <label for="confirm_password">确认密码:</label>
                <input type="password" id="confirm_password" name="confirm_password" required minlength="6">
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">确认修改</button>
                <button type="button" class="btn btn-secondary" onclick="closeModal('passwordModal')">取消</button>
            </div>
        </form>
    </div>
</div>

<!-- 修改权限模态框 -->
<div id="permissionModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('permissionModal')">&times;</span>
        <h2>修改用户权限</h2>
        <form id="permissionForm" method="POST">
            <div class="form-group">
                <label for="permission">权限级别:</label>
                <select id="permission" name="permission" required>
                    <option value="0">管理员</option>
                    <option value="1">普通用户</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">确认修改</button>
                <button type="button" class="btn btn-secondary" onclick="closeModal('permissionModal')">取消</button>
            </div>
        </form>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('deleteModal')">&times;</span>
        <h2>确认删除</h2>
        <p>确定要删除用户 <strong id="deleteUsername"></strong> 吗？此操作不可撤销。</p>
        <div class="form-actions">
            <form id="deleteForm" method="POST">
                <button type="submit" class="btn btn-danger">确认删除</button>
                <button type="button" class="btn btn-secondary" onclick="closeModal('deleteModal')">取消</button>
            </form>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.header-section h1 {
    color: #333;
    margin: 0;
}

.users-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.permission-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.permission-badge.admin {
    background-color: #dc3545;
    color: white;
}

.permission-badge.user {
    background-color: #28a745;
    color: white;
}

.actions {
    white-space: nowrap;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}

.close:hover {
    color: #000;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.text-muted {
    color: #6c757d;
    font-style: italic;
}
</style>

<script>
function showPasswordModal(username) {
    document.getElementById('passwordForm').action = `/change_password/${username}`;
    document.getElementById('passwordModal').style.display = 'block';
}

function showPermissionModal(username, currentPermission) {
    document.getElementById('permissionForm').action = `/change_permission/${username}`;
    document.getElementById('permission').value = currentPermission;
    document.getElementById('permissionModal').style.display = 'block';
}

function confirmDelete(username) {
    document.getElementById('deleteUsername').textContent = username;
    document.getElementById('deleteForm').action = `/delete_user/${username}`;
    document.getElementById('deleteModal').style.display = 'block';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
    // 清空表单
    const forms = document.querySelectorAll(`#${modalId} form`);
    forms.forEach(form => form.reset());
}

// 点击模态框外部关闭
window.onclick = function(event) {
    const modals = document.querySelectorAll('.modal');
    modals.forEach(modal => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
}

// 密码确认验证
document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const password = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password !== confirmPassword) {
        e.preventDefault();
        alert('两次输入的密码不一致！');
        return false;
    }
    
    if (password.length < 6) {
        e.preventDefault();
        alert('密码长度至少6位！');
        return false;
    }
});
</script>
{% endblock %}