{% extends "base.html" %}

{% block title %}Users{% endblock %}

{% block content %}
<div x-data="usersData()" x-init="loadUsers()">
    <div class="px-4 sm:px-0 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Users</h1>
            <p class="mt-2 text-sm text-gray-700">Manage user accounts and permissions</p>
        </div>
        <div class="flex space-x-3">
            <button @click="showCreateModal = true"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                <i class="fas fa-plus mr-2"></i>Create User
            </button>
            <a href="/admin/users/api"
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                <i class="fas fa-code mr-2"></i>View API
            </a>
        </div>
    </div>

    <!-- Users Table -->
    <div class="mt-6 bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <div class="text-sm text-gray-500">
                    Total: <span class="font-medium text-gray-900" x-text="pagination.total"></span> users
                </div>
                <div class="flex items-center space-x-2">
                    <button @click="prevPage" :disabled="pagination.page === 1"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Previous
                    </button>
                    <span class="text-sm text-gray-600">
                        Page <span x-text="pagination.page"></span> of <span x-text="pagination.total_pages"></span>
                    </span>
                    <button @click="nextPage" :disabled="pagination.page >= pagination.total_pages"
                        class="px-3 py-1 text-sm bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50">
                        Next
                    </button>
                </div>
            </div>
        </div>

        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                <template x-for="user in users" :key="user.id">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-10 w-10 flex-shrink-0">
                                    <div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-medium">
                                        <span x-text="user.email.charAt(0).toUpperCase()"></span>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900" x-text="user.name || 'No name'"></div>
                                    <div class="text-sm text-gray-500" x-text="user.id"></div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900" x-text="user.email"></div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span :class="user.role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800'"
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" x-text="user.role">
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span :class="user.verified ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'"
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                                <span x-text="user.verified ? 'Verified' : 'Unverified'"></span>
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span x-text="new Date(user.created).toLocaleDateString()"></span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button @click="openEditModal(user)"
                                class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button @click="confirmToggleRole(user)"
                                class="text-indigo-600 hover:text-indigo-900 mr-3"
                                x-text="user.role === 'admin' ? 'Demote' : 'Promote'">
                            </button>
                            <button @click="confirmDeleteUser(user)" class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </td>
                    </tr>
                </template>
                <tr x-show="users.length === 0">
                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                        No users found
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Edit User Modal -->
    <div x-show="showEditModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showEditModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showEditModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form @submit.prevent="updateUser">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                                    Edit User
                                </h3>

                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Name</label>
                                        <input type="text" x-model="editUser.name"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Email *</label>
                                        <input type="email" x-model="editUser.email" required
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Role</label>
                                        <select x-model="editUser.role"
                                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option value="user">User</option>
                                            <option value="admin">Admin</option>
                                        </select>
                                    </div>

                                    <div class="border-t border-gray-200 pt-4">
                                        <label class="flex items-center">
                                            <input type="checkbox" x-model="editUser.verified"
                                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                            <span class="ml-2 text-sm text-gray-700">Email Verified</span>
                                        </label>
                                    </div>

                                    <div class="border-t border-gray-200 pt-4">
                                        <label class="flex items-center mb-2">
                                            <input type="checkbox" x-model="changePassword"
                                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                            <span class="ml-2 text-sm font-medium text-gray-700">Change Password</span>
                                        </label>

                                        <div x-show="changePassword" class="space-y-3 mt-3">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700">New Password</label>
                                                <input type="password" x-model="editUser.new_password" minlength="8"
                                                       :required="changePassword"
                                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                                <p class="mt-1 text-xs text-gray-500">At least 8 characters</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit"
                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                            Update User
                        </button>
                        <button type="button" @click="showEditModal = false"
                                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Create User Modal -->
    <div x-show="showCreateModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showCreateModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showCreateModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form @submit.prevent="createUser">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                                    Create New User
                                </h3>

                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Name</label>
                                        <input type="text" x-model="newUser.name"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Email *</label>
                                        <input type="email" x-model="newUser.email" required
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Password *</label>
                                        <input type="password" x-model="newUser.password" required minlength="8"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                        <p class="mt-1 text-xs text-gray-500">At least 8 characters with a letter and number</p>
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Confirm Password *</label>
                                        <input type="password" x-model="newUser.password_confirm" required minlength="8"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Role</label>
                                        <select x-model="newUser.role"
                                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option value="user">User</option>
                                            <option value="admin">Admin</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit"
                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                            Create User
                        </button>
                        <button type="button" @click="showCreateModal = false"
                                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Role Toggle Confirmation Modal -->
    <div x-show="showRoleModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showRoleModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showRoleModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-user-shield text-indigo-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Change User Role
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500" x-text="`Change ${roleTarget?.email}'s role to ${roleTarget?.role === 'admin' ? 'user' : 'admin'}?`"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="toggleRole()"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Confirm
                    </button>
                    <button type="button" @click="showRoleModal = false"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal"
         x-cloak
         class="fixed z-10 inset-0 overflow-y-auto"
         @keydown.escape.window="showDeleteModal = false">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showDeleteModal = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exclamation-triangle text-red-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Delete User
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500" x-text="`Are you sure you want to delete ${deleteTarget?.email}? This action cannot be undone.`"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="deleteUser()"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Delete
                    </button>
                    <button type="button" @click="showDeleteModal = false"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function usersData() {
        return {
            users: [],
            pagination: {
                page: 1,
                per_page: 20,
                total: 0,
                total_pages: 0
            },
            showCreateModal: false,
            showEditModal: false,
            showRoleModal: false,
            showDeleteModal: false,
            changePassword: false,
            roleTarget: null,
            deleteTarget: null,
            newUser: {
                name: '',
                email: '',
                password: '',
                password_confirm: '',
                role: 'user'
            },
            editUser: {
                id: '',
                name: '',
                email: '',
                role: 'user',
                verified: false,
                new_password: ''
            },

            async loadUsers() {
                try {
                    const data = await apiRequest(`/admin/users?page=${this.pagination.page}&per_page=${this.pagination.per_page}`);
                    this.users = data.items;
                    this.pagination = {
                        page: data.page,
                        per_page: data.per_page,
                        total: data.total,
                        total_pages: data.total_pages
                    };
                } catch (error) {
                    console.error('Failed to load users:', error);
                }
            },

            openEditModal(user) {
                this.editUser = {
                    id: user.id,
                    name: user.name || '',
                    email: user.email,
                    role: user.role,
                    verified: user.verified,
                    new_password: ''
                };
                this.changePassword = false;
                this.showEditModal = true;
            },

            async updateUser() {
                try {
                    showToast('Updating user...', 'info');

                    // Build update payload
                    const payload = {
                        name: this.editUser.name,
                        email: this.editUser.email,
                        role: this.editUser.role,
                        verified: this.editUser.verified
                    };

                    // Add password if changing
                    if (this.changePassword && this.editUser.new_password) {
                        payload.password = this.editUser.new_password;
                    }

                    await apiRequest(`/admin/users/${this.editUser.id}`, {
                        method: 'PATCH',
                        body: JSON.stringify(payload)
                    });

                    showToast('User updated successfully', 'success');
                    this.showEditModal = false;
                    await this.loadUsers();
                } catch (error) {
                    console.error('Failed to update user:', error);
                    showToast(error.message || 'Failed to update user', 'error');
                }
            },

            confirmToggleRole(user) {
                this.roleTarget = user;
                this.showRoleModal = true;
            },

            async toggleRole() {
                if (!this.roleTarget) return;

                const newRole = this.roleTarget.role === 'admin' ? 'user' : 'admin';

                try {
                    await apiRequest(`/admin/users/${this.roleTarget.id}/role?role=${newRole}`, {
                        method: 'PATCH'
                    });
                    showToast(`User role updated to ${newRole}`, 'success');
                    this.showRoleModal = false;
                    this.roleTarget = null;
                    await this.loadUsers();
                } catch (error) {
                    console.error('Failed to update role:', error);
                    showToast(error.message || 'Failed to update role', 'error');
                }
            },

            confirmDeleteUser(user) {
                this.deleteTarget = user;
                this.showDeleteModal = true;
            },

            async deleteUser() {
                if (!this.deleteTarget) return;

                try {
                    await apiRequest(`/admin/users/${this.deleteTarget.id}`, {
                        method: 'DELETE'
                    });
                    showToast('User deleted successfully', 'success');
                    this.showDeleteModal = false;
                    this.deleteTarget = null;
                    await this.loadUsers();
                } catch (error) {
                    console.error('Failed to delete user:', error);
                    showToast(error.message || 'Failed to delete user', 'error');
                }
            },

            async createUser() {
                // Validate passwords match
                if (this.newUser.password !== this.newUser.password_confirm) {
                    showToast('Passwords do not match', 'error');
                    return;
                }

                try {
                    await apiRequest(`/admin/users?role=${this.newUser.role}`, {
                        method: 'POST',
                        body: JSON.stringify({
                            name: this.newUser.name,
                            email: this.newUser.email,
                            password: this.newUser.password,
                            password_confirm: this.newUser.password_confirm
                        })
                    });
                    showToast('User created successfully', 'success');
                    this.showCreateModal = false;
                    // Reset form
                    this.newUser = {
                        name: '',
                        email: '',
                        password: '',
                        password_confirm: '',
                        role: 'user'
                    };
                    await this.loadUsers();
                } catch (error) {
                    console.error('Failed to create user:', error);
                    showToast(error.message || 'Failed to create user', 'error');
                }
            },

            async nextPage() {
                if (this.pagination.page < this.pagination.total_pages) {
                    this.pagination.page++;
                    await this.loadUsers();
                }
            },

            async prevPage() {
                if (this.pagination.page > 1) {
                    this.pagination.page--;
                    await this.loadUsers();
                }
            }
        };
    }
</script>
{% endblock %}