<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant interne: Contenu Attribution de Rôles - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Contenu de l'attribution de rôles, séparé du wrapper form.
                     NE PAS inclure directement - utiliser role-assignment.xhtml.
        
        Paramètres hérités de role-assignment.xhtml
    -->

    <p:messages id="roleAssignmentMessages" showDetail="true" closable="true" styleClass="mb-3" />

    <p:panel styleClass="w-full">
        <f:facet name="header">
            <div class="flex align-items-center gap-2">
                <i class="pi pi-shield text-primary"></i>
                <span class="font-semibold">Attribution de rôles</span>
                <c:if test="#{not empty user.username}">
                    <span class="text-color-secondary">- #{user.username}</span>
                </c:if>
            </div>
        </f:facet>

        <!-- Section: Rôles actuels de l'utilisateur -->
        <h4 class="text-primary mt-0 mb-3">
            <i class="pi pi-user-edit mr-2"></i>Rôles actuels
        </h4>
        <div class="flex flex-wrap gap-2 mb-4">
            <c:choose>
                <c:when test="#{not empty userRoles and not userRoles.isEmpty()}">
                    <c:forEach var="userRole" items="#{userRoles}">
                        <div class="flex align-items-center surface-100 border-round-lg px-3 py-2 gap-2">
                            <i class="pi pi-shield text-primary text-sm"></i>
                            <span class="font-medium text-sm">#{userRole.name}</span>
                            <c:if test="#{not empty userRole.typeRole}">
                                <p:tag value="#{userRole.typeRole == 'REALM_ROLE' ? 'Realm' : 'Client'}"
                                    severity="#{userRole.typeRole == 'REALM_ROLE' ? 'success' : 'info'}"
                                    styleClass="text-xs" />
                            </c:if>
                            <p:commandButton icon="pi pi-times"
                                styleClass="p-button-text p-button-sm p-button-danger p-button-rounded"
                                action="#{roleGestionBean.revokeRoleFromParams}" update="#{update}"
                                title="Révoquer ce rôle" style="width: 1.5rem; height: 1.5rem;">
                                <f:param name="userId" value="#{user.id}" />
                                <f:param name="roleName" value="#{userRole.name}" />
                                <p:confirm header="Révoquer le rôle"
                                    message="Voulez-vous révoquer le rôle '#{userRole.name}' de #{user.username} ?"
                                    icon="pi pi-exclamation-triangle" />
                            </p:commandButton>
                        </div>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    <div class="text-color-secondary font-italic p-3 surface-100 border-round w-full text-center">
                        <i class="pi pi-info-circle mr-2"></i>
                        Aucun rôle attribué à cet utilisateur
                    </div>
                </c:otherwise>
            </c:choose>
        </div>

        <p:separator />

        <!-- Section: Rôles disponibles -->
        <h4 class="text-primary mt-3 mb-3">
            <i class="pi pi-list mr-2"></i>Rôles disponibles
        </h4>

        <!-- Recherche de rôles -->
        <div class="mb-3">
            <div class="p-inputgroup" style="max-width: 400px;">
                <span class="p-inputgroup-addon">
                    <i class="pi pi-search"></i>
                </span>
                <p:inputText id="roleSearchInput" value="#{roleGestionBean.roleSearchText}"
                    placeholder="Filtrer les rôles..." styleClass="w-full">
                    <p:ajax event="keyup" delay="300" update="realmRolesPanel clientRolesPanel" />
                </p:inputText>
            </div>
        </div>

        <!-- Rôles Realm -->
        <c:if test="#{showRealmRoles}">
            <p:panel id="realmRolesPanel" header="Rôles Realm" styleClass="mb-3" toggleable="true">
                <div class="flex flex-wrap gap-2">
                    <c:forEach var="role" items="#{availableRoles}">
                        <c:if test="#{role.typeRole == 'REALM_ROLE'}">
                            <!-- Vérifier si déjà assigné -->
                            <c:set var="isAssigned" value="false" />
                            <c:forEach var="ur" items="#{userRoles}">
                                <c:if test="#{ur.id == role.id or ur.name == role.name}">
                                    <c:set var="isAssigned" value="true" />
                                </c:if>
                            </c:forEach>

                            <div class="flex align-items-center border-1 border-round-lg px-3 py-2 gap-2 
                                        #{isAssigned ? 'surface-200 border-green-300' : 'surface-50 border-300 hover:surface-100'} 
                                        transition-all transition-duration-200">
                                <c:choose>
                                    <c:when test="#{isAssigned}">
                                        <i class="pi pi-check-circle text-green-500"></i>
                                        <span class="font-medium text-sm text-green-700">#{role.name}</span>
                                    </c:when>
                                    <c:otherwise>
                                        <i class="pi pi-shield text-400"></i>
                                        <span class="font-medium text-sm text-700">#{role.name}</span>
                                        <p:commandButton icon="pi pi-plus"
                                            styleClass="p-button-text p-button-sm p-button-success p-button-rounded"
                                            action="#{roleGestionBean.assignRoleFromParams}" update="#{update}"
                                            title="Attribuer ce rôle" style="width: 1.5rem; height: 1.5rem;">
                                            <f:param name="userId" value="#{user.id}" />
                                            <f:param name="roleName" value="#{role.name}" />
                                        </p:commandButton>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </p:panel>
        </c:if>

        <!-- Rôles Client -->
        <c:if test="#{showClientRoles}">
            <p:panel id="clientRolesPanel" header="Rôles Client" styleClass="mb-3" toggleable="true">
                <div class="flex flex-wrap gap-2">
                    <c:forEach var="role" items="#{availableRoles}">
                        <c:if test="#{role.typeRole == 'CLIENT_ROLE'}">
                            <c:set var="isAssigned" value="false" />
                            <c:forEach var="ur" items="#{userRoles}">
                                <c:if test="#{ur.id == role.id or ur.name == role.name}">
                                    <c:set var="isAssigned" value="true" />
                                </c:if>
                            </c:forEach>

                            <div class="flex align-items-center border-1 border-round-lg px-3 py-2 gap-2 
                                        #{isAssigned ? 'surface-200 border-green-300' : 'surface-50 border-300 hover:surface-100'} 
                                        transition-all transition-duration-200">
                                <c:choose>
                                    <c:when test="#{isAssigned}">
                                        <i class="pi pi-check-circle text-green-500"></i>
                                        <span class="font-medium text-sm text-green-700">#{role.name}</span>
                                    </c:when>
                                    <c:otherwise>
                                        <i class="pi pi-shield text-400"></i>
                                        <span class="font-medium text-sm text-700">#{role.name}</span>
                                        <p:commandButton icon="pi pi-plus"
                                            styleClass="p-button-text p-button-sm p-button-success p-button-rounded"
                                            action="#{roleGestionBean.assignRoleFromParams}" update="#{update}"
                                            title="Attribuer ce rôle" style="width: 1.5rem; height: 1.5rem;">
                                            <f:param name="userId" value="#{user.id}" />
                                            <f:param name="roleName" value="#{role.name}" />
                                        </p:commandButton>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </p:panel>
        </c:if>

    </p:panel>

</ui:composition>