{% extends "base/layout.html" %}

{% block page_actions %}
<a href="#" class="btn btn-primary" onclick="showCreateRoleModal()">
    <i class="bi bi-plus-circle me-2"></i>Add Role
</a>
{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- Search Form -->
    <div class="search-form">
        <form method="GET" class="row g-3">
            <div class="col-md-8">
                <label for="search" class="form-label">Search Roles</label>
                <input type="text" class="form-control" id="search" name="search" value="{{ search }}"
                    placeholder="Search by role name or description...">
            </div>
            <div class="col-md-2">
                <label for="size" class="form-label">Per Page</label>
                <select class="form-select" name="size" id="size">
                    <option value="10" {% if pagination.size==10 %}selected{% endif %}>10</option>
                    <option value="20" {% if pagination.size==20 %}selected{% endif %}>20</option>
                    <option value="50" {% if pagination.size==50 %}selected{% endif %}>50</option>
                    <option value="100" {% if pagination.size==100 %}selected{% endif %}>100</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search me-1"></i>Search
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Results Info -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="text-muted">
            Showing {{ ((pagination.page - 1) * pagination.size) + 1 }} to
            {{ (pagination.page * pagination.size) if (pagination.page * pagination.size) < pagination.total else
                pagination.total }} of {{ pagination.total }} roles </div>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-secondary" onclick="selectAll()">
                        <i class="bi bi-check-all me-1"></i>Select All
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                        <i class="bi bi-x-square me-1"></i>Clear
                    </button>
                </div>
        </div>

        <!-- Roles Table -->
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" class="form-check-input" id="selectAllCheckbox">
                            </th>
                            <th>Role Name</th>
                            <th>Description</th>
                            <th>Users</th>
                            <th>Status</th>
                            <th>Type</th>
                            <th>Created</th>
                            <th width="150">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for role in roles %}
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input role-checkbox" value="{{ role.id }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center me-2"
                                        style="width: 32px; height: 32px;">
                                        <i class="bi bi-person-badge"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ role.name }}</div>
                                        {% if role.is_system %}
                                        <small class="text-warning">
                                            <i class="bi bi-star-fill me-1"></i>System Role
                                        </small>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="text-truncate-custom">{{ role.description or 'No description provided'
                                    }}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-primary bg-opacity-10 text-primary me-2">
                                        {{ role_user_counts[role.id] if role_user_counts[role.id] else 0 }}
                                    </span>
                                    <span class="small text-muted">assigned</span>
                                </div>
                            </td>
                            <td>
                                {% if role.is_active %}
                                <span class="badge bg-success badge-status">Active</span>
                                {% else %}
                                <span class="badge bg-secondary badge-status">Inactive</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if role.is_system %}
                                <span class="badge bg-warning badge-status">System</span>
                                {% else %}
                                <span class="badge bg-info badge-status">Custom</span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ role.created_at.strftime('%Y-%m-%d') if role.created_at else '-' }}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group-action">
                                    <a href="#" class="btn btn-outline-success btn-action btn-sm" title="Edit Role"
                                        data-action="edit-role" data-role-id="{{ role.id }}"
                                        data-role-name="{{ role.name }}"
                                        data-role-description="{{ role.description or '' }}"
                                        data-role-active="{{ role.is_active|lower }}"
                                        data-role-system="{{ role.is_system|lower }}">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-info btn-action btn-sm"
                                        title="Manage Users" data-action="manage-users" data-role-id="{{ role.id }}"
                                        data-role-name="{{ role.name }}">
                                        <i class="bi bi-people"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-warning btn-action btn-sm"
                                        title="Manage Permissions" data-action="manage-permissions"
                                        data-role-id="{{ role.id }}" data-role-name="{{ role.name }}">
                                        <i class="bi bi-shield-check"></i>
                                    </button>
                                    {% if not role.is_system %}
                                    <button type="button" class="btn btn-outline-danger btn-action btn-sm"
                                        title="Delete Role" data-action="delete-role" data-role-id="{{ role.id }}"
                                        data-role-name="{{ role.name }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-person-badge-fill" style="font-size: 3rem;"></i>
                                <p class="mt-3 mb-0">No roles found</p>
                                {% if search %}
                                <p class="small">Try adjusting your search criteria</p>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <nav aria-label="Role pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page=1&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-left"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page - 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>

                {% for page_num in range(max(1, pagination.page - 2), min(pagination.pages + 1, pagination.page + 3)) %}
                <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                    <a class="page-link"
                        href="?page={{ page_num }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        {{ page_num }}
                    </a>
                </li>
                {% endfor %}

                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page + 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.pages }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete role <strong id="deleteRoleName"></strong>?</p>
                    <p class="text-danger small mb-0">This action cannot be undone and will remove this role from all
                        assigned users.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete Role</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Role Modal -->
    <div class="modal fade" id="createRoleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="createRoleForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="createRoleError"></div>
                        <div class="mb-3">
                            <label for="createRoleName" class="form-label">Role Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createRoleName" name="name" required
                                maxlength="50">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="createRoleDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="createRoleDescription" name="description" rows="3"
                                maxlength="200"></textarea>
                            <div class="form-text">Optional description for this role</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="createRoleActive" name="is_active"
                                    checked>
                                <label class="form-check-label" for="createRoleActive">
                                    Active
                                </label>
                                <div class="form-text">Whether this role is active and can be assigned</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="createRoleSystem" name="is_system">
                                <label class="form-check-label" for="createRoleSystem">
                                    System Role
                                </label>
                                <div class="form-text">System roles have special protections and cannot be deleted</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="createRoleBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2" id="createRoleSpinner"></span>
                            Create Role
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Role Modal -->
    <div class="modal fade" id="editRoleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editRoleForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="editRoleError"></div>
                        <input type="hidden" id="editRoleId" name="id">
                        <div class="mb-3">
                            <label for="editRoleName" class="form-label">Role Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editRoleName" name="name" required
                                maxlength="50">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="editRoleDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="editRoleDescription" name="description" rows="3"
                                maxlength="200"></textarea>
                            <div class="form-text">Optional description for this role</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editRoleActive" name="is_active">
                                <label class="form-check-label" for="editRoleActive">
                                    Active
                                </label>
                                <div class="form-text">Whether this role is active and can be assigned</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editRoleSystem" name="is_system"
                                    disabled>
                                <label class="form-check-label" for="editRoleSystem">
                                    System Role
                                </label>
                                <div class="form-text">System role status cannot be changed after creation</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="editRoleBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2" id="editRoleSpinner"></span>
                            Update Role
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Manage Users Modal -->
    <div class="modal fade" id="manageUsersModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Manage Users - <span id="manageUsersRoleName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Loading State -->
                    <div id="manageUsersLoading" class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 mb-0">Loading users...</p>
                    </div>

                    <!-- Main Content -->
                    <div id="manageUsersContent" class="d-none">
                        <!-- Current Assigned Users -->
                        <div class="mb-4">
                            <h6 class="fw-bold">Currently Assigned Users</h6>
                            <div id="currentUsersList" class="border rounded p-3"
                                style="max-height: 200px; overflow-y: auto;">
                                <!-- Current users will be loaded here -->
                            </div>
                        </div>

                        <!-- Add Users Section -->
                        <div>
                            <h6 class="fw-bold">Add Users to Role</h6>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="userSearchInput"
                                    placeholder="Search users by name, email, or username..." />
                            </div>
                            <div id="availableUsersList" class="border rounded p-3"
                                style="max-height: 250px; overflow-y: auto;">
                                <!-- Available users will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="assignUsersBtn" disabled>
                        <span class="spinner-border spinner-border-sm d-none me-2" id="assignUsersSpinner"></span>
                        Assign Selected Users
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Manage Permissions Modal -->
    <div class="modal fade" id="managePermissionsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Manage Permissions - <span id="managePermissionsRoleName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Loading State -->
                    <div id="managePermissionsLoading" class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 mb-0">Loading permissions...</p>
                    </div>

                    <!-- Main Content -->
                    <div id="managePermissionsContent" class="d-none">
                        <!-- Current Assigned Permissions -->
                        <div class="mb-4">
                            <h6 class="fw-bold">Currently Assigned Permissions</h6>
                            <div id="currentPermissionsList" class="border rounded p-3"
                                style="max-height: 200px; overflow-y: auto;">
                                <!-- Current permissions will be loaded here -->
                            </div>
                        </div>

                        <!-- Add Permissions Section -->
                        <div>
                            <h6 class="fw-bold">Add Permissions to Role</h6>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="permissionSearchInput"
                                    placeholder="Search permissions by name or description..." />
                            </div>
                            <div id="availablePermissionsList" class="border rounded p-3"
                                style="max-height: 250px; overflow-y: auto;">
                                <!-- Available permissions will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="assignPermissionsBtn" disabled>
                        <span class="spinner-border spinner-border-sm d-none me-2" id="assignPermissionsSpinner"></span>
                        Assign Selected Permissions
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Permission Modal -->
    <div class="modal fade" id="createPermissionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Permission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="createPermissionForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="createPermissionError"></div>
                        <div class="mb-3">
                            <label for="createPermissionCode" class="form-label">Permission Code <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createPermissionCode" name="code" required
                                placeholder="e.g., user:read, role:write">
                            <div class="form-text">Unique permission identifier, typically in format 'resource:action'
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionName" class="form-label">Permission Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createPermissionName" name="name" required>
                            <div class="form-text">Human-readable permission name</div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="createPermissionDescription" name="description"
                                rows="3"></textarea>
                            <div class="form-text">Optional description of what this permission allows</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="createPermissionBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2"
                                id="createPermissionSpinner"></span>
                            Create Permission
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Universal Confirmation Modal -->
    <div class="modal fade" id="confirmationModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalTitle">Confirm Action</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 me-3">
                            <div class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center"
                                style="width: 48px; height: 48px;">
                                <i class="bi bi-exclamation-triangle-fill text-warning" style="font-size: 1.5rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-2" id="confirmationModalMessage">Are you sure?</h6>
                            <p class="text-muted mb-0 small" id="confirmationModalDescription">This action cannot be
                                undone.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="confirmationCancelBtn">Cancel</button>
                    <button type="button" class="btn btn-warning" id="confirmationConfirmBtn">
                        <span class="spinner-border spinner-border-sm d-none me-2" id="confirmationSpinner"></span>
                        <span id="confirmationBtnText">Confirm</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let selectedRoleId = null;
    let currentManagingRoleId = null;
    let selectedUserIds = new Set();
    let selectedPermissionIds = new Set();
    let currentAssignedUserIds = new Set();
    let currentAssignedPermissionIds = new Set();

    // Universal confirmation dialog function
    function showConfirmation(options = {}) {
        return new Promise((resolve) => {
            const modal = document.getElementById('confirmationModal');
            const titleElement = document.getElementById('confirmationModalTitle');
            const messageElement = document.getElementById('confirmationModalMessage');
            const descriptionElement = document.getElementById('confirmationModalDescription');
            const confirmBtn = document.getElementById('confirmationConfirmBtn');
            const cancelBtn = document.getElementById('confirmationCancelBtn');
            const btnText = document.getElementById('confirmationBtnText');

            // Set modal content
            titleElement.textContent = options.title || 'Confirm Action';
            messageElement.textContent = options.message || 'Are you sure?';
            descriptionElement.textContent = options.description || 'This action cannot be undone.';
            btnText.textContent = options.confirmText || 'Confirm';

            // Set button style based on action type
            confirmBtn.className = `btn ${options.danger ? 'btn-danger' : 'btn-warning'}`;

            // Show modal
            const bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.show();

            // Handle confirmation
            const handleConfirm = () => {
                cleanup();
                resolve(true);
            };

            // Handle cancellation
            const handleCancel = () => {
                cleanup();
                resolve(false);
            };

            // Cleanup function
            const cleanup = () => {
                confirmBtn.removeEventListener('click', handleConfirm);
                cancelBtn.removeEventListener('click', handleCancel);
                modal.removeEventListener('hidden.bs.modal', handleCancel);
                bootstrapModal.hide();
            };

            // Add event listeners
            confirmBtn.addEventListener('click', handleConfirm);
            cancelBtn.addEventListener('click', handleCancel);
            modal.addEventListener('hidden.bs.modal', handleCancel, { once: true });
        });
    }

    function selectAll() {
        const checkboxes = document.querySelectorAll('.role-checkbox');
        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
        checkboxes.forEach(cb => cb.checked = true);
        selectAllCheckbox.checked = true;
    }

    function clearSelection() {
        const checkboxes = document.querySelectorAll('.role-checkbox');
        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
        checkboxes.forEach(cb => cb.checked = false);
        selectAllCheckbox.checked = false;
    }

    function showCreateRoleModal() {
        // Reset form
        document.getElementById('createRoleForm').reset();
        document.getElementById('createRoleActive').checked = true;
        document.getElementById('createRoleError').classList.add('d-none');

        // Clear any previous validation states
        const inputs = document.querySelectorAll('#createRoleModal input, #createRoleModal textarea');
        inputs.forEach(input => {
            input.classList.remove('is-invalid');
        });

        const modal = new bootstrap.Modal(document.getElementById('createRoleModal'));
        modal.show();
    }

    function confirmDelete(roleId, roleName) {
        selectedRoleId = roleId;
        document.getElementById('deleteRoleName').textContent = roleName;
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }

    async function showManageUsersModal(roleId, roleName) {
        currentManagingRoleId = roleId;
        selectedUserIds.clear();
        currentAssignedUserIds.clear();

        document.getElementById('manageUsersRoleName').textContent = roleName;
        document.getElementById('manageUsersLoading').classList.remove('d-none');
        document.getElementById('manageUsersContent').classList.add('d-none');
        document.getElementById('assignUsersBtn').disabled = true;

        const modal = new bootstrap.Modal(document.getElementById('manageUsersModal'));
        modal.show();

        try {
            await loadCurrentRoleUsers(roleId);
            await loadAvailableUsers();

            document.getElementById('manageUsersLoading').classList.add('d-none');
            document.getElementById('manageUsersContent').classList.remove('d-none');
        } catch (error) {
            console.error('Error loading users:', error);
            showErrorToast('Failed to load users: ' + error.message);
        }
    }

    async function showManagePermissionsModal(roleId, roleName) {
        currentManagingRoleId = roleId;
        selectedPermissionIds.clear();
        currentAssignedPermissionIds.clear();

        document.getElementById('managePermissionsRoleName').textContent = roleName;
        document.getElementById('managePermissionsLoading').classList.remove('d-none');
        document.getElementById('managePermissionsContent').classList.add('d-none');
        document.getElementById('assignPermissionsBtn').disabled = true;

        const modal = new bootstrap.Modal(document.getElementById('managePermissionsModal'));
        modal.show();

        try {
            await loadCurrentRolePermissions(roleId);
            await loadAvailablePermissions();

            document.getElementById('managePermissionsLoading').classList.add('d-none');
            document.getElementById('managePermissionsContent').classList.remove('d-none');
        } catch (error) {
            console.error('Error loading permissions:', error);
            showErrorToast('Failed to load permissions: ' + error.message);
        }
    }

    async function loadCurrentRoleUsers(roleId) {
        const response = await fetch(`{{ api_prefix }}/roles/${roleId}/users`);
        if (!response.ok) throw new Error('Failed to load current users');

        const users = await response.json();
        const container = document.getElementById('currentUsersList');

        currentAssignedUserIds.clear();
        users.forEach(user => currentAssignedUserIds.add(user.id));

        if (users.length === 0) {
            container.innerHTML = '<p class="text-muted mb-0">No users currently assigned to this role</p>';
            return;
        }

        container.innerHTML = users.map(user => `
            <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                <div>
                    <strong>${user.full_name || user.name}</strong>
                    <small class="text-muted d-block">${user.email || ''}</small>
                </div>
                <button type="button" class="btn btn-outline-danger btn-sm" 
                        onclick="removeUserFromRole(${user.id}, '${user.name}')">
                    <i class="bi bi-x"></i>
                </button>
            </div>
        `).join('');
    }

    async function loadAvailableUsers() {
        const response = await fetch('{{ api_prefix }}/users');
        if (!response.ok) throw new Error('Failed to load available users');

        const result = await response.json();
        const users = result.items || result;

        const availableUsers = users.filter(user => !currentAssignedUserIds.has(user.id));

        const container = document.getElementById('availableUsersList');

        if (availableUsers.length === 0) {
            container.innerHTML = '<p class="text-muted mb-0">No additional users available to assign</p>';
            return;
        }

        container.innerHTML = availableUsers.map(user => `
            <div class="form-check py-2 border-bottom">
                <input class="form-check-input user-select-checkbox" type="checkbox" 
                       value="${user.id}" id="user${user.id}"
                       onchange="updateSelectedUsers()">
                <label class="form-check-label w-100" for="user${user.id}">
                    <div class="d-flex justify-content-between">
                        <div>
                            <strong>${user.full_name || user.name}</strong>
                            <small class="text-muted d-block">${user.email || ''}</small>
                        </div>
                        <small class="text-muted">${user.name}</small>
                    </div>
                </label>
            </div>
        `).join('');

        const searchInput = document.getElementById('userSearchInput');
        searchInput.oninput = function () {
            filterUsers(this.value);
        };
    }

    async function loadCurrentRolePermissions(roleId) {
        try {
            const response = await fetch(`{{ api_prefix }}/roles/${roleId}/permissions`);
            if (!response.ok) throw new Error('Failed to load current permissions');

            const permissions = await response.json();
            const container = document.getElementById('currentPermissionsList');

            currentAssignedPermissionIds.clear();
            permissions.forEach(permission => currentAssignedPermissionIds.add(permission.id));

            if (permissions.length === 0) {
                container.innerHTML = '<p class="text-muted mb-0">No permissions currently assigned to this role</p>';
                return;
            }

            container.innerHTML = permissions.map(permission => `
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                    <div>
                        <strong>${permission.name}</strong>
                        <small class="text-muted d-block">${permission.code}</small>
                        ${permission.description ? `<small class="text-muted d-block">${permission.description}</small>` : ''}
                    </div>
                    <button type="button" class="btn btn-outline-danger btn-sm" 
                            onclick="removePermissionFromRole(${permission.id}, '${permission.name}')">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            `).join('');
        } catch (error) {
            const container = document.getElementById('currentPermissionsList');
            container.innerHTML = '<p class="text-muted mb-0">Permission management will be available soon</p>';
        }
    }

    async function loadAvailablePermissions() {
        try {
            const response = await fetch('{{ api_prefix }}/permissions');
            if (!response.ok) throw new Error('Failed to load available permissions');

            const result = await response.json();
            const permissions = result.items || result;

            const availablePermissions = permissions.filter(permission => !currentAssignedPermissionIds.has(permission.id));

            const container = document.getElementById('availablePermissionsList');

            if (availablePermissions.length === 0) {
                container.innerHTML = `
                    <p class="text-muted mb-2">No additional permissions available to assign</p>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="showCreatePermissionModal()">
                        <i class="bi bi-plus"></i> Create New Permission
                    </button>
                `;
                return;
            }

            container.innerHTML = availablePermissions.map(permission => `
                <div class="form-check py-2 border-bottom">
                    <input class="form-check-input permission-select-checkbox" type="checkbox" 
                           value="${permission.id}" id="permission${permission.id}"
                           onchange="updateSelectedPermissions()">
                    <label class="form-check-label w-100" for="permission${permission.id}">
                        <div>
                            <strong>${permission.name}</strong>
                            <small class="text-muted d-block">${permission.code}</small>
                            ${permission.description ? `<small class="text-muted d-block">${permission.description}</small>` : ''}
                        </div>
                    </label>
                </div>
            `).join('') + `
                <div class="pt-2">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="showCreatePermissionModal()">
                        <i class="bi bi-plus"></i> Create New Permission
                    </button>
                </div>
            `;

            const searchInput = document.getElementById('permissionSearchInput');
            searchInput.oninput = function () {
                filterPermissions(this.value);
            };
        } catch (error) {
            const container = document.getElementById('availablePermissionsList');
            container.innerHTML = `
                <p class="text-muted mb-2">Failed to load permissions</p>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="showCreatePermissionModal()">
                    <i class="bi bi-plus"></i> Create New Permission
                </button>
            `;
        }
    }

    function filterUsers(searchTerm) {
        const checkboxes = document.querySelectorAll('#availableUsersList .form-check');
        checkboxes.forEach(checkbox => {
            const label = checkbox.querySelector('label').textContent.toLowerCase();
            if (label.includes(searchTerm.toLowerCase())) {
                checkbox.style.display = 'block';
            } else {
                checkbox.style.display = 'none';
            }
        });
    }

    function filterPermissions(searchTerm) {
        const checkboxes = document.querySelectorAll('#availablePermissionsList .form-check');
        checkboxes.forEach(checkbox => {
            const label = checkbox.querySelector('label').textContent.toLowerCase();
            if (label.includes(searchTerm.toLowerCase())) {
                checkbox.style.display = 'block';
            } else {
                checkbox.style.display = 'none';
            }
        });
    }

    function updateSelectedUsers() {
        selectedUserIds.clear();
        document.querySelectorAll('.user-select-checkbox:checked').forEach(checkbox => {
            selectedUserIds.add(parseInt(checkbox.value));
        });

        document.getElementById('assignUsersBtn').disabled = selectedUserIds.size === 0;
    }

    function updateSelectedPermissions() {
        selectedPermissionIds.clear();
        document.querySelectorAll('.permission-select-checkbox:checked').forEach(checkbox => {
            selectedPermissionIds.add(parseInt(checkbox.value));
        });

        document.getElementById('assignPermissionsBtn').disabled = selectedPermissionIds.size === 0;
    }

    async function removeUserFromRole(userId, userName) {
        if (!(await showConfirmation({
            title: 'Confirm User Removal',
            message: `Are you sure you want to remove ${userName} from this role?`,
            danger: true
        }))) return;

        try {
            const response = await fetch(`{{ api_prefix }}/roles/${currentManagingRoleId}/users/${userId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                await loadCurrentRoleUsers(currentManagingRoleId);
                await loadAvailableUsers();
            } else {
                const error = await response.json();
                showErrorToast('Failed to remove user: ' + (error.detail || 'Unknown error'));
            }
        } catch (error) {
            showErrorToast('Network error: ' + error.message);
        }
    }

    async function removePermissionFromRole(permissionId, permissionName) {
        if (!(await showConfirmation({
            title: 'Confirm Permission Removal',
            message: `Are you sure you want to remove ${permissionName} permission from this role?`,
            danger: true
        }))) return;

        try {
            const response = await fetch(`{{ api_prefix }}/roles/${currentManagingRoleId}/permissions/${permissionId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                await loadCurrentRolePermissions(currentManagingRoleId);
                await loadAvailablePermissions();
            } else {
                const error = await response.json();
                showErrorToast('Failed to remove permission: ' + (error.detail || 'Unknown error'));
            }
        } catch (error) {
            showErrorToast('Network error: ' + error.message);
        }
    }

    function showCreatePermissionModal() {
        document.getElementById('createPermissionForm').reset();
        document.getElementById('createPermissionError').classList.add('d-none');

        const modal = new bootstrap.Modal(document.getElementById('createPermissionModal'));
        modal.show();
    }

    function showEditRoleModal(roleId, roleName, roleDescription, isActive, isSystem) {
        // Reset form and populate with current values
        document.getElementById('editRoleForm').reset();
        document.getElementById('editRoleId').value = roleId;
        document.getElementById('editRoleName').value = roleName;
        document.getElementById('editRoleDescription').value = roleDescription;
        document.getElementById('editRoleActive').checked = isActive;
        document.getElementById('editRoleSystem').checked = isSystem;
        document.getElementById('editRoleError').classList.add('d-none');

        // Clear any previous validation states
        const inputs = document.querySelectorAll('#editRoleModal input, #editRoleModal textarea');
        inputs.forEach(input => {
            input.classList.remove('is-invalid');
        });

        const modal = new bootstrap.Modal(document.getElementById('editRoleModal'));
        modal.show();
    }

    // Create Role Form Submission
    document.getElementById('createRoleForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const submitBtn = document.getElementById('createRoleBtn');
        const spinner = document.getElementById('createRoleSpinner');
        const errorDiv = document.getElementById('createRoleError');

        // Show loading state
        submitBtn.disabled = true;
        spinner.classList.remove('d-none');
        errorDiv.classList.add('d-none');

        try {
            const formData = new FormData(this);
            const roleData = {
                name: formData.get('name'),
                description: formData.get('description') || null,
                is_active: formData.get('is_active') === 'on',
                is_system: formData.get('is_system') === 'on'
            };

            const response = await fetch('{{ api_prefix }}/roles', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(roleData)
            });

            if (response.ok) {
                // Success - close modal and reload page
                const modal = bootstrap.Modal.getInstance(document.getElementById('createRoleModal'));
                modal.hide();
                location.reload();
            } else {
                // Handle error
                const errorData = await response.json();
                errorDiv.textContent = errorData.detail || 'Failed to create role';
                errorDiv.classList.remove('d-none');
            }
        } catch (error) {
            errorDiv.textContent = 'Network error: ' + error.message;
            errorDiv.classList.remove('d-none');
        } finally {
            // Hide loading state
            submitBtn.disabled = false;
            spinner.classList.add('d-none');
        }
    });

    document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
        if (selectedRoleId) {
            deleteRole(selectedRoleId);
        }
    });

    async function deleteRole(roleId) {
        const submitBtn = document.getElementById('confirmDeleteBtn');
        const originalText = submitBtn.textContent;

        // Show loading state
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Deleting...';

        try {
            const response = await fetch(`{{ api_prefix }}/roles/${roleId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                }
            });

            if (response.ok) {
                // Success - close modal and reload page
                const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                modal.hide();
                location.reload();
            } else {
                // Handle error
                const errorData = await response.json();
                showErrorToast('Error deleting role: ' + (errorData.detail || 'Unknown error'));
            }
        } catch (error) {
            showErrorToast('Network error: ' + error.message);
        } finally {
            // Restore button state
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        }
    }

    // Handle select all checkbox
    document.getElementById('selectAllCheckbox').addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('.role-checkbox');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });

    // Assign Users Button Handler
    document.getElementById('assignUsersBtn').addEventListener('click', async function () {
        const btn = this;
        const spinner = document.getElementById('assignUsersSpinner');

        btn.disabled = true;
        spinner.classList.remove('d-none');

        try {
            const response = await fetch(`{{ api_prefix }}/roles/${currentManagingRoleId}/users`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    user_ids: Array.from(selectedUserIds)
                })
            });

            if (response.ok) {
                await loadCurrentRoleUsers(currentManagingRoleId);
                await loadAvailableUsers();
                selectedUserIds.clear();
                document.querySelectorAll('.user-select-checkbox:checked').forEach(cb => cb.checked = false);
                btn.disabled = true;
            } else {
                const error = await response.json();
                showErrorToast('Failed to assign users: ' + (error.detail || 'Unknown error'));
            }
        } catch (error) {
            showErrorToast('Network error: ' + error.message);
        } finally {
            spinner.classList.add('d-none');
        }
    });

    // Assign Permissions Button Handler  
    document.getElementById('assignPermissionsBtn').addEventListener('click', async function () {
        const btn = this;
        const spinner = document.getElementById('assignPermissionsSpinner');

        btn.disabled = true;
        spinner.classList.remove('d-none');

        try {
            const response = await fetch(`{{ api_prefix }}/roles/${currentManagingRoleId}/permissions`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    permission_ids: Array.from(selectedPermissionIds)
                })
            });

            if (response.ok) {
                await loadCurrentRolePermissions(currentManagingRoleId);
                await loadAvailablePermissions();
                selectedPermissionIds.clear();
                document.querySelectorAll('.permission-select-checkbox:checked').forEach(cb => cb.checked = false);
                btn.disabled = true;
            } else {
                const error = await response.json();
                showErrorToast('Failed to assign permissions: ' + (error.detail || 'Unknown error'));
            }
        } catch (error) {
            showErrorToast('Network error: ' + error.message);
        } finally {
            spinner.classList.add('d-none');
        }
    });

    // Create Permission Form Submission
    document.getElementById('createPermissionForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const submitBtn = document.getElementById('createPermissionBtn');
        const spinner = document.getElementById('createPermissionSpinner');
        const errorDiv = document.getElementById('createPermissionError');

        // Show loading state
        submitBtn.disabled = true;
        spinner.classList.remove('d-none');
        errorDiv.classList.add('d-none');

        try {
            const formData = new FormData(this);
            const permissionData = {
                code: formData.get('code'),
                name: formData.get('name'),
                description: formData.get('description') || null
            };

            const response = await fetch('{{ api_prefix }}/permissions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(permissionData)
            });

            if (response.ok) {
                // Success - close modal and reload available permissions if manage modal is open
                const modal = bootstrap.Modal.getInstance(document.getElementById('createPermissionModal'));
                modal.hide();

                // If manage permissions modal is open, reload the permissions list
                if (currentManagingRoleId) {
                    await loadAvailablePermissions();
                }
            } else {
                // Handle error
                const errorData = await response.json();
                errorDiv.textContent = errorData.detail || 'Failed to create permission';
                errorDiv.classList.remove('d-none');
            }
        } catch (error) {
            errorDiv.textContent = 'Network error: ' + error.message;
            errorDiv.classList.remove('d-none');
        } finally {
            // Hide loading state
            submitBtn.disabled = false;
            spinner.classList.add('d-none');
        }
    });

    // Edit Role Form Submission
    document.getElementById('editRoleForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const submitBtn = document.getElementById('editRoleBtn');
        const spinner = document.getElementById('editRoleSpinner');
        const errorDiv = document.getElementById('editRoleError');
        const roleId = document.getElementById('editRoleId').value;

        // Show loading state
        submitBtn.disabled = true;
        spinner.classList.remove('d-none');
        errorDiv.classList.add('d-none');

        try {
            const formData = new FormData(this);
            const roleData = {
                name: formData.get('name'),
                description: formData.get('description') || null,
                is_active: formData.get('is_active') === 'on'
            };

            const response = await fetch(`{{ api_prefix }}/roles/${roleId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(roleData)
            });

            if (response.ok) {
                // Success - close modal and reload page
                const modal = bootstrap.Modal.getInstance(document.getElementById('editRoleModal'));
                modal.hide();
                location.reload();
            } else {
                // Handle error
                const errorData = await response.json();
                errorDiv.textContent = errorData.detail || 'Failed to update role';
                errorDiv.classList.remove('d-none');
            }
        } catch (error) {
            errorDiv.textContent = 'Network error: ' + error.message;
            errorDiv.classList.remove('d-none');
        } finally {
            // Hide loading state
            submitBtn.disabled = false;
            spinner.classList.add('d-none');
        }
    });

    // Event delegation for action buttons
    document.addEventListener('DOMContentLoaded', function () {
        // Add event delegation for all action buttons
        document.addEventListener('click', function (e) {
            const button = e.target.closest('[data-action]');
            if (!button) return;

            e.preventDefault();
            const action = button.dataset.action;
            const roleId = button.dataset.roleId;
            const roleName = button.dataset.roleName;

            switch (action) {
                case 'edit-role':
                    const roleDescription = button.dataset.roleDescription;
                    const roleActive = button.dataset.roleActive === 'true';
                    const roleSystem = button.dataset.roleSystem === 'true';
                    showEditRoleModal(roleId, roleName, roleDescription, roleActive, roleSystem);
                    break;

                case 'manage-users':
                    showManageUsersModal(roleId, roleName);
                    break;

                case 'manage-permissions':
                    showManagePermissionsModal(roleId, roleName);
                    break;

                case 'delete-role':
                    confirmDelete(roleId, roleName);
                    break;
            }
        });
    });
</script>
{% endblock %}