<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"
    xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions">

    <!--
        Composant réutilisable: Carte Rôle - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Affiche une carte rôle avec icône, type, description et actions.
                     Prend en charge les différents types de rôles (Realm, Client, Composite).
        
        Paramètres:
        - role: RoleDTO (requis) - Le rôle à afficher
        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
        - showDescription: Boolean (défaut: true) - Afficher la description
        - showCompositeInfo: Boolean (défaut: true) - Afficher les infos de rôle composite
        - clickable: Boolean (défaut: true) - Rendre le titre cliquable
        - outcome: String (optionnel) - Page de destination au clic
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        - editOutcome: String (optionnel) - Page d'édition
        - deleteAction: MethodExpression (optionnel) - Action de suppression
        
        Exemples d'utilisation:
        
        1. Carte simple:
        <ui:include src="/templates/components/role-management/role-card.xhtml">
            <ui:param name="role" value="#{roleBean.selectedRole}" />
        </ui:include>
        
        2. Carte pour liste:
        <div class="col-12 md:col-6 lg:col-4">
            <ui:include src="/templates/components/role-management/role-card.xhtml">
                <ui:param name="role" value="#{r}" />
                <ui:param name="deleteAction" value="#{roleBean.deleteRole(r.id)}" />
            </ui:include>
        </div>
    -->

    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showDescription" value="#{empty showDescription ? true : showDescription}" />
    <c:set var="showCompositeInfo" value="#{empty showCompositeInfo ? true : showCompositeInfo}" />
    <c:set var="clickable" value="#{empty clickable ? false : clickable}" />
    <c:set var="showEdit" value="#{empty showEdit ? false : showEdit}" />
    <c:set var="editOutcome" value="#{empty editOutcome ? '/pages/user-manager/roles/edit' : editOutcome}" />

    <!-- Détermination des styles selon le type de rôle -->
    <c:set var="icon" value="pi-shield" />
    <c:set var="severity" value="info" />
    <c:set var="typeLabel" value="Rôle" />

    <c:choose>
        <c:when test="#{role.typeRole == 'REALM_ROLE'}">
            <c:set var="severity" value="success" />
            <c:set var="typeLabel" value="Realm" />
            <c:set var="iconColor" value="text-green-500" />
            <c:set var="bgColor" value="bg-green-100" />
        </c:when>
        <c:when test="#{role.typeRole == 'CLIENT_ROLE'}">
            <c:set var="severity" value="info" />
            <c:set var="typeLabel" value="Client" />
            <c:set var="iconColor" value="text-blue-500" />
            <c:set var="bgColor" value="bg-blue-100" />
        </c:when>
        <c:when test="#{role.typeRole == 'COMPOSITE_ROLE'}">
            <c:set var="severity" value="warning" />
            <c:set var="typeLabel" value="Composite" />
            <c:set var="iconColor" value="text-orange-500" />
            <c:set var="bgColor" value="bg-orange-100" />
            <c:set var="icon" value="pi-sitemap" />
        </c:when>
        <c:otherwise>
            <c:set var="severity" value="secondary" />
            <c:set var="iconColor" value="text-gray-500" />
            <c:set var="bgColor" value="surface-100" />
        </c:otherwise>
    </c:choose>

    <p:card styleClass="role-card shadow-1 hover:shadow-3 transition-all transition-duration-200 #{styleClass}"
        rendered="#{not empty role}">

        <f:facet name="header">
            <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
                <div class="flex align-items-center gap-3">
                    <div class="flex align-items-center justify-content-center border-circle #{bgColor}"
                        style="width: 2.5rem; height: 2.5rem;">
                        <i class="pi #{icon} #{iconColor} text-lg"></i>
                    </div>
                    <div class="flex flex-column">
                        <c:choose>
                            <c:when test="#{clickable}">
                                <h:link outcome="#{not empty outcome ? outcome : '/pages/user-manager/roles/details'}"
                                    styleClass="text-900 font-semibold text-lg no-underline hover:text-primary transition-colors transition-duration-200">
                                    <f:param name="roleId" value="#{role.id}" />
                                    #{role.name}
                                </h:link>
                            </c:when>
                            <c:otherwise>
                                <span class="text-900 font-semibold text-lg">#{role.name}</span>
                            </c:otherwise>
                        </c:choose>
                        <span class="text-color-secondary text-xs">#{typeLabel}</span>
                    </div>
                </div>

                <c:if test="#{role.composite}">
                    <i class="pi pi-sitemap text-orange-500" title="Rôle Composite"></i>
                </c:if>
            </div>
        </f:facet>

        <div class="role-card-content pt-3">
            <!-- Description -->
            <c:if test="#{showDescription}">
                <div class="mb-3" style="min-height: 3rem;">
                    <c:choose>
                        <c:when test="#{not empty role.description}">
                            <p class="text-color-secondary text-sm m-0 line-height-3 text-overflow-ellipsis overflow-hidden"
                                style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                                #{role.description}
                            </p>
                        </c:when>
                        <c:otherwise>
                            <span class="text-color-secondary text-sm font-italic opacity-60">Aucune description</span>
                        </c:otherwise>
                    </c:choose>
                </div>
            </c:if>

            <!-- Informations contextuelles -->
            <div class="flex flex-column gap-2">
                <c:if test="#{not empty role.realmName}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-globe text-color-secondary text-xs"></i>
                        <span class="text-sm">#{role.realmName}</span>
                    </div>
                </c:if>

                <c:if test="#{not empty role.clientId}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-desktop text-color-secondary text-xs"></i>
                        <span class="text-sm">Client: #{role.clientId}</span>
                    </div>
                </c:if>
            </div>
        </div>

        <!-- Actions -->
        <f:facet name="footer">
            <c:if test="#{showActions}">
                <div class="flex gap-2 justify-content-end pt-2 border-top-1 surface-border">
                    <c:if test="#{showEdit}">
                        <p:commandButton icon="pi pi-pencil" title="Modifier"
                            styleClass="p-button-text p-button-sm p-button-warning p-button-rounded"
                            outcome="#{editOutcome}">
                            <f:param name="roleId" value="#{role.id}" />
                        </p:commandButton>
                    </c:if>

                    <c:if test="#{not empty deleteBean and not empty deleteMethod}">
                        <p:commandButton icon="pi pi-trash" title="Supprimer"
                            styleClass="p-button-text p-button-sm p-button-danger p-button-rounded"
                            action="#{deleteBean[deleteMethod](role.name)}" update="@form :growlMessages">
                            <p:confirm header="Confirmation" message="Supprimer le rôle #{role.name} ?"
                                icon="pi pi-exclamation-triangle" />
                        </p:commandButton>
                    </c:if>
                </div>
            </c:if>
        </f:facet>
    </p:card>

</ui:composition>