<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 réutilisable: Gestion des rôles utilisateur
        
        Paramètres:
        - user: UserDTO (requis)
        - realm: String (requis)
        - roleBean: RoleGestionBean (requis)
    -->

    <c:set var="userRoles" value="#{user.realmRoles}" />
    <c:set var="availableRoles" value="#{roleBean.realmRoles}" />

    <p:panel header="Gestion des Rôles" styleClass="w-full">
        <p:messages id="roleMessages" showDetail="true" closable="true" styleClass="mb-3" />

        <div class="grid">
            <div class="col-12 md:col-6">
                <!-- Rôles assignés -->
                <h4 class="text-primary mt-0 mb-3">
                    <i class="pi pi-check-circle mr-2"></i>Rôles Assignés
                </h4>

                <p:dataTable value="#{userRoles}" var="roleName" emptyMessage="Aucun rôle assigné"
                    styleClass="border-1 surface-border border-round" size="small">
                    <p:column headerText="Nom du rôle">
                        <span class="font-medium">#{roleName}</span>
                    </p:column>
                    <p:column style="width: 4rem; text-align: center">
                        <p:commandButton icon="pi pi-trash" styleClass="p-button-rounded p-button-danger p-button-text"
                            action="#{roleBean.revokeRoleFromUser(user.id, roleName)}" process="@this" update="@form"
                            title="Révoquer ce rôle">
                            <p:confirm header="Confirmation" message="Révoquer le rôle '#{roleName}' ?"
                                icon="pi pi-exclamation-triangle" />
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
            </div>

            <div class="col-12 md:col-6">
                <!-- Ajouter un rôle -->
                <h4 class="text-primary mt-0 mb-3">
                    <i class="pi pi-plus-circle mr-2"></i>Ajouter un Rôle
                </h4>

                <div class="card bg-bluegray-50 border-none p-4">
                    <div class="field">
                        <p:outputLabel for="rolesPicklist" value="Rôles disponibles"
                            styleClass="font-medium mb-2 block" />
                        <p:selectOneMenu id="rolesPicklist" value="#{roleBean.selectedRoleName}" filter="true"
                            filterMatchMode="contains" styleClass="w-full">
                            <f:selectItem itemLabel="Sélectionner un rôle..." itemValue="#{null}"
                                noSelectionOption="true" />
                            <f:selectItems value="#{availableRoles}" var="role" itemLabel="#{role.name}"
                                itemValue="#{role.name}" itemDisabled="#{userRoles.contains(role.name)}" />
                        </p:selectOneMenu>
                    </div>

                    <p:commandButton value="Attribuer le rôle" icon="pi pi-check"
                        actionListener="#{roleBean.assignRoleToUser(user.id, roleBean.selectedRoleName)}" update="@form"
                        process="@parent" styleClass="w-full mt-2" />
                </div>

                <div class="mt-4 surface-card p-3 border-round shadow-1">
                    <div class="flex align-items-center mb-2">
                        <i class="pi pi-info-circle text-blue-500 mr-2 text-xl"></i>
                        <span class="font-bold text-900">Information</span>
                    </div>
                    <p class="text-sm text-700 m-0 line-height-3">
                        Les rôles définissent les permissions de l'utilisateur dans l'application.
                        Certains rôles peuvent donner accès à des fonctionnalités administratives sensibles.
                    </p>
                </div>
            </div>
        </div>
    </p:panel>

</ui:composition>