<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:lum="http://xmlns.jcp.org/jsf/composite/components">

    <!--
        Composant réutilisable: Tableau Utilisateurs (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Tableau de données pour afficher une liste d'utilisateurs
        
        Paramètres:
        - users: List&lt;UserDTO&gt; (requis) - Liste des utilisateurs
        - var: String (défaut: "user") - Nom de la variable pour itération
        - tableId: String (défaut: "userTable") - ID du tableau
        - paginator: Boolean (défaut: true) - Activer la pagination
        - rows: Number (défaut: 20) - Nombre de lignes par page
        - showActions: Boolean (défaut: true) - Afficher la colonne actions
        - showRoles: Boolean (défaut: true) - Afficher la colonne rôles
        - showEmail: Boolean (défaut: true) - Afficher la colonne email
        - showStatus: Boolean (défaut: true) - Afficher la colonne statut
        - showSelection: Boolean (défaut: false) - Activer la sélection
        - selection: UserDTO (optionnel) - Utilisateur sélectionné
        - selectionMode: String (défaut: "single") - Mode: "single" ou "multiple"
        - totalRecords: Long (optionnel) - Nombre total d'enregistrements pour l'affichage
        - hasOnPageChange: Boolean (défaut: false) - Indique si un gestionnaire de pagination est fourni
        - onPageChange: MethodExpression (optionnel) - Méthode à appeler lors du changement de page (requis si hasOnPageChange=true)
        - lazy: Boolean (défaut: false) - Activer le chargement paresseux
        - update: String (optionnel) - Composants à mettre à jour
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemples d'utilisation:
        
        1. Tableau simple:
        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
            <ui:param name="users" value="#{userBean.users}" />
        </ui:include>
        
        2. Tableau avec sélection:
        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
            <ui:param name="users" value="#{userBean.users}" />
            <ui:param name="showSelection" value="true" />
            <ui:param name="selection" value="#{userBean.selectedUser}" />
        </ui:include>
    -->
    
    <c:set var="varName" value="#{empty var ? 'user' : var}" />
    <c:set var="tableId" value="#{empty tableId ? 'userTable' : tableId}" />
    <c:set var="paginator" value="#{empty paginator ? true : paginator}" />
    <c:set var="rows" value="#{empty rows ? 20 : rows}" />
    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
    <c:set var="showEmail" value="#{empty showEmail ? true : showEmail}" />
    <c:set var="showStatus" value="#{empty showStatus ? true : showStatus}" />
    <c:set var="showSelection" value="#{empty showSelection ? false : showSelection}" />
    <c:set var="selectionMode" value="#{empty selectionMode ? 'single' : selectionMode}" />
    <c:set var="hasOnPageChange" value="#{empty hasOnPageChange ? false : hasOnPageChange}" />
    
    <p:dataTable
        id="#{tableId}"
        value="#{users}"
        var="user"
        rowKey="#{user.id}"
        paginator="#{paginator}"
        rows="#{rows}"
        rowCount="#{not empty totalRecords ? totalRecords : (users != null ? users.size() : 0)}"
        selection="#{selection}"
        selectionMode="#{selectionMode}"
        styleClass="p-datatable-sm p-datatable-gridlines p-datatable-striped w-full #{styleClass}"
        rowStyleClass="p-datatable-row"
        widgetVar="#{tableId}Widget"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,20,50,100"
        currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}"
        emptyMessage="Aucun utilisateur trouvé"
        reflow="true"
        responsiveLayout="scroll"
        lazy="#{not empty lazy and lazy}">
        
        <f:facet name="header">
            <div class="flex align-items-center justify-content-between">
                <span class="text-900 font-semibold text-xl">Utilisateurs</span>
                <c:if test="#{not empty totalRecords}">
                    <span class="text-600 text-sm">Total: #{totalRecords}</span>
                </c:if>
            </div>
        </f:facet>
        
        <!-- Gestionnaire d'événements pour la pagination -->
        <c:if test="#{hasOnPageChange}">
            <p:ajax event="page" listener="#{onPageChange}" update="#{not empty update ? update : tableId}" />
        </c:if>
        
        <!-- Colonne de sélection -->
        <c:if test="#{showSelection}">
            <p:column selectionMode="#{selectionMode}" style="width: 50px" />
        </c:if>
        
        <!-- Colonne Username -->
        <p:column headerText="Nom d'utilisateur" sortBy="#{user.username}" style="width: 200px">
            <div class="flex align-items-center py-2">
                <div class="border-circle overflow-hidden mr-2 flex-shrink-0" style="width: 36px; height: 36px;">
                    <div class="bg-primary text-white flex align-items-center justify-content-center w-full h-full">
                        <span style="font-size: 0.875rem; font-weight: bold;">
                            #{user.prenom != null ? user.prenom.substring(0,1) : 'U'}#{user.nom != null ? user.nom.substring(0,1) : ''}
                        </span>
                    </div>
                </div>
                <span class="font-semibold text-900">#{user.username}</span>
            </div>
        </p:column>
        
        <!-- Colonne Nom complet -->
        <p:column headerText="Nom complet" sortBy="#{user.nom}" style="width: 220px">
            <div class="flex flex-column py-2">
                <span class="font-medium text-900">#{user.prenom} #{user.nom}</span>
                <c:if test="#{not empty user.fonction}">
                    <small class="text-600 text-xs mt-1">#{user.fonction}</small>
                </c:if>
            </div>
        </p:column>
        
        <!-- Colonne Email -->
        <c:if test="#{showEmail}">
            <p:column headerText="Email" sortBy="#{user.email}" style="width: 250px">
                <div class="flex align-items-center py-2">
                    <i class="pi pi-envelope text-500 mr-2"></i>
                    <span class="text-900">#{user.email}</span>
                    <c:if test="#{user.emailVerified}">
                        <i class="pi pi-check-circle text-green-500 ml-2" title="Email vérifié"></i>
                    </c:if>
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Statut -->
        <c:if test="#{showStatus}">
            <p:column headerText="Statut" sortBy="#{user.statut}" style="width: 130px">
                <div class="flex align-items-center py-2">
                    <p:tag 
                        value="#{user.statut != null ? user.statut : 'INCONNU'}" 
                        severity="#{user.enabled ? 'success' : 'danger'}" />
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Rôles -->
        <c:if test="#{showRoles}">
            <p:column headerText="Rôles" style="width: 200px">
                <div class="flex flex-wrap gap-1 py-2 align-items-center">
                    <c:choose>
                        <c:when test="#{user.realmRoles != null and !user.realmRoles.isEmpty()}">
                            <c:forEach var="role" items="#{user.realmRoles}" varStatus="status">
                                <c:if test="#{status.index &lt; 3}">
                                    <p:tag value="#{role}" severity="info" styleClass="text-xs" />
                                </c:if>
                            </c:forEach>
                            <c:if test="#{user.realmRoles.size() &gt; 3}">
                                <p:tag value="+#{user.realmRoles.size() - 3}" severity="secondary" styleClass="text-xs" />
                            </c:if>
                        </c:when>
                        <c:otherwise>
                            <span class="text-500 text-xs">Aucun rôle</span>
                        </c:otherwise>
                    </c:choose>
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Actions -->
        <c:if test="#{showActions}">
            <p:column headerText="Actions" style="width: 100px" exportable="false">
                <div class="flex justify-content-center align-items-center" style="min-height: 3rem;">
                    <lum:user-action-dropdown 
                        userId="#{user.id}"
                        userEnabled="#{user.enabled}"
                        update="#{not empty update ? update : tableId}"
                        activateAction="#{activateAction}"
                        deactivateAction="#{deactivateAction}"
                        deleteAction="#{deleteAction}" />
                </div>
            </p:column>
        </c:if>
    </p:dataTable>
    
</ui:composition>