{% extends "base.html" %}

{% block title %}用户管理 - PT Manager{% endblock %}

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

{% block content %}
<div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold">用户列表</h2>
        <button onclick="showAddUserModal()"
            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
            添加用户
        </button>
    </div>

    {% if users %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for user in users %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ user.username }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if user.role == 'admin' %}bg-purple-100 text-purple-800
                            {% else %}bg-green-100 text-green-800{% endif %}">
                            {{ user.role }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ user.created_at }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        {% if user.id != session.user_id %}
                        <button onclick="deleteUser({{ user.id }})"
                            class="text-red-600 hover:text-red-900">
                            删除
                        </button>
                        {% else %}
                        <span class="text-gray-400">当前用户</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-users text-gray-400 text-4xl mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-1">暂无用户</h3>
        <p class="text-gray-500">系统中还没有其他用户</p>
    </div>
    {% endif %}
</div>

<!-- 添加用户模态框 -->
<div id="add-user-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/3 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加用户</h3>
                <button onclick="closeAddUserModal()" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="add-user-form">
                <div class="mb-4">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <input type="text" id="username" name="username" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-4">
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-1">角色</label>
                    <select id="role" name="role"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="user">普通用户</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeAddUserModal()"
                        class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                        取消
                    </button>
                    <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        添加
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function showAddUserModal() {
        document.getElementById('add-user-modal').classList.remove('hidden');
    }
    
    function closeAddUserModal() {
        document.getElementById('add-user-modal').classList.add('hidden');
    }
    
    function deleteUser(userId) {
        if (confirm('确定要删除这个用户吗？')) {
            fetch(`/user/delete/${userId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('用户已删除');
                    location.reload();
                } else {
                    alert('删除失败: ' + data.error);
                }
            })
            .catch(error => {
                alert('删除失败: ' + error.message);
            });
        }
    }
    
    document.getElementById('add-user-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch('/user/add', {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`用户添加成功！\n用户名: ${data.username}\n临时密码: ${data.password}`);
                closeAddUserModal();
                location.reload();
            } else {
                alert('添加失败: ' + data.error);
            }
        })
        .catch(error => {
            alert('添加失败: ' + error.message);
        });
    });
</script>
{% endblock %}