<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: Carte Utilisateur - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.1.0
        Description: Affiche une carte utilisateur avec avatar, informations principales,
                     rôles et actions. Utilisable en mode carte standalone ou en grille.
        
        Paramètres:
        - user: UserDTO (requis) - L'utilisateur à afficher
        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
        - showRoles: Boolean (défaut: true) - Afficher les rôles de l'utilisateur
        - showOrganisation: Boolean (défaut: false) - Afficher l'organisation
        - clickable: Boolean (défaut: true) - Rendre la carte cliquable (bouton Voir)
        - outcome: String (optionnel) - Page de destination au clic
        - editOutcome: String (optionnel) - Page d'édition
        - deleteAction: MethodExpression (optionnel) - Action de suppression
        - hasDeleteAction: Boolean (défaut: false) - Si une action delete est fournie
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemples d'utilisation:
        
        1. Carte simple:
        <ui:include src="/templates/components/user-management/user-card.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
        </ui:include>
        
        2. Carte dans une grille:
        <c:forEach var="u" items="#{userBean.users}">
            <div class="col-12 md:col-6 lg:col-4">
                <ui:include src="/templates/components/user-management/user-card.xhtml">
                    <ui:param name="user" value="#{u}" />
                    <ui:param name="showOrganisation" value="true" />
                </ui:include>
            </div>
        </c:forEach>
    -->

    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
    <c:set var="showOrganisation" value="#{empty showOrganisation ? false : showOrganisation}" />
    <c:set var="clickable" value="#{empty clickable ? true : clickable}" />
    <c:set var="hasDeleteAction" value="#{empty hasDeleteAction ? false : hasDeleteAction}" />

    <c:set var="userInitials"
        value="#{user.prenom != null and user.prenom.length() > 0 ? user.prenom.substring(0,1) : 'U'}#{user.nom != null and user.nom.length() > 0 ? user.nom.substring(0,1) : ''}" />

    <p:card styleClass="user-card shadow-1 hover:shadow-3 transition-all transition-duration-200 #{styleClass}"
        rendered="#{not empty user}">
        <f:facet name="header">
            <div class="flex align-items-center gap-3 p-3">
                <!-- Avatar -->
                <p:avatar label="#{userInitials}" size="large" shape="circle"
                    style="background-color: var(--primary-color); color: var(--primary-color-text);" />

                <!-- Nom et Username -->
                <div class="flex flex-column flex-1">
                    <h3 class="m-0 text-900">#{user.prenom} #{user.nom}</h3>
                    <span class="text-color-secondary text-sm">@#{user.username}</span>
                </div>

                <!-- Badge de statut -->
                <p:tag value="#{user.enabled ? 'Actif' : 'Inactif'}" severity="#{user.enabled ? 'success' : 'danger'}"
                    icon="#{user.enabled ? 'pi pi-check' : 'pi pi-times'}" />
            </div>
        </f:facet>

        <div class="user-card-content">
            <!-- Informations de contact -->
            <div class="flex flex-column gap-2 mb-3">
                <!-- Email -->
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope text-color-secondary text-sm" style="width: 1rem;"></i>
                    <span class="text-sm">#{user.email}</span>
                    <c:if test="#{user.emailVerified}">
                        <i class="pi pi-verified text-green-500 text-xs" title="Email vérifié"></i>
                    </c:if>
                </div>

                <!-- Téléphone -->
                <c:if test="#{not empty user.telephone}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-phone text-color-secondary text-sm" style="width: 1rem;"></i>
                        <span class="text-sm">#{user.telephone}</span>
                    </div>
                </c:if>

                <!-- Organisation -->
                <c:if test="#{showOrganisation and not empty user.organisation}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-building text-color-secondary text-sm" style="width: 1rem;"></i>
                        <span class="text-sm">#{user.organisation}</span>
                        <c:if test="#{not empty user.fonction}">
                            <span class="text-color-secondary text-xs">- #{user.fonction}</span>
                        </c:if>
                    </div>
                </c:if>
            </div>

            <!-- Rôles -->
            <c:if test="#{showRoles}">
                <div class="flex flex-column gap-2">
                    <span class="text-600 font-medium text-xs text-uppercase">Rôles</span>
                    <div class="flex flex-wrap gap-1">
                        <c:choose>
                            <c:when test="#{not empty user.realmRoles and not user.realmRoles.isEmpty()}">
                                <c:forEach var="role" items="#{user.realmRoles}" varStatus="status">
                                    <c:if test="#{status.index < 4}">
                                        <p:tag value="#{role}" severity="info" styleClass="text-xs" />
                                    </c:if>
                                </c:forEach>
                                <c:if test="#{user.realmRoles.size() > 4}">
                                    <p:tag value="+#{user.realmRoles.size() - 4}" severity="secondary"
                                        styleClass="text-xs"
                                        title="#{user.realmRoles.size() - 4} rôle(s) supplémentaire(s)" />
                                </c:if>
                            </c:when>
                            <c:otherwise>
                                <span class="text-color-secondary text-xs font-italic">Aucun rôle attribué</span>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </c:if>
        </div>

        <!-- Actions -->
        <f:facet name="footer">
            <c:if test="#{showActions}">
                <div class="flex gap-2 justify-content-end">
                    <ui:include src="/templates/components/user-management/user-actions.xhtml">
                        <ui:param name="user" value="#{user}" />
                        <ui:param name="iconOnly" value="true" />
                        <ui:param name="layout" value="horizontal" />
                        <ui:param name="showView" value="#{clickable}" />
                        <ui:param name="showEdit" value="true" />
                        <ui:param name="showDelete" value="#{hasDeleteAction}" />
                        <ui:param name="showResetPassword" value="true" />
                        <ui:param name="showActivate" value="true" />
                        <ui:param name="showDeactivate" value="true" />
                        <ui:param name="outcome" value="#{outcome}" />
                        <ui:param name="actionBean" value="#{actionBean}" />
                        <ui:param name="editOutcome" value="#{editOutcome}" />
                        <ui:param name="deleteAction" value="#{deleteAction}" />
                    </ui:include>
                </div>
            </c:if>
        </f:facet>
    </p:card>

</ui:composition>