<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: Tableau de Données Utilisateurs - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Tableau de données PrimeFaces pour afficher et gérer une liste
                     d'utilisateurs avec colonnes configurables, tri, pagination,
                     sélection et actions.
        
        Paramètres:
        - users: List<UserDTO> (requis) - Liste des utilisateurs
        - var: String (défaut: "user") - Nom de la variable pour itération
        - tableId: String (défaut: "userTable") - ID unique 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) sélectionné(s)
        - selectionMode: String (défaut: "single") - "single" ou "multiple"
        - totalRecords: Long (optionnel) - Nombre total d'enregistrements
        - hasOnPageChange: Boolean (défaut: false) - Si un listener de pagination est fourni
        - onPageChange: MethodExpression (optionnel) - Listener de changement de page
        - lazy: Boolean (défaut: false) - Chargement paresseux
        - activateAction: MethodExpression (optionnel) - Action pour activer un utilisateur
        - deactivateAction: MethodExpression (optionnel) - Action pour désactiver un utilisateur
        - deleteAction: MethodExpression (optionnel) - Action pour supprimer un utilisateur
        - update: String (optionnel) - Composants à mettre à jour après action
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        - headerTitle: String (défaut: "Utilisateurs") - Titre du tableau
        - emptyMessage: String (défaut: "Aucun utilisateur trouvé") - Message quand vide
        
        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 complet avec actions:
        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
            <ui:param name="users" value="#{userBean.users}" />
            <ui:param name="totalRecords" value="#{userBean.totalUsers}" />
            <ui:param name="activateAction" value="#{userBean.activateUser}" />
            <ui:param name="deactivateAction" value="#{userBean.deactivateUser}" />
            <ui:param name="deleteAction" value="#{userBean.deleteUser}" />
            <ui:param name="update" value="@form" />
        </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}" />
    <c:set var="headerTitle" value="#{empty headerTitle ? 'Utilisateurs' : headerTitle}" />
    <c:set var="emptyMessage" value="#{empty emptyMessage ? 'Aucun utilisateur trouvé' : emptyMessage}" />

    <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="#{showSelection ? selectionMode : ''}"
        styleClass="p-datatable-sm p-datatable-gridlines p-datatable-striped w-full #{styleClass}"
        widgetVar="#{tableId}Widget"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,20,50,100"
        currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}"
        emptyMessage="#{emptyMessage}" reflow="true" responsiveLayout="scroll" lazy="#{not empty lazy and lazy}"
        sortMode="multiple" resizableColumns="true" scrollable="true">

        <f:facet name="header">
            <div class="flex align-items-center justify-content-between flex-wrap gap-2">
                <span class="text-900 font-semibold text-xl">
                    <i class="pi pi-users mr-2"></i>#{headerTitle}
                </span>
                <div class="flex align-items-center gap-2">
                    <c:if test="#{not empty totalRecords}">
                        <p:tag value="#{totalRecords} résultats" severity="info" styleClass="text-xs" />
                    </c:if>
                </div>
            </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" exportable="false" />
        </c:if>

        <!-- Colonne Username avec avatar -->
        <p:column headerText="Nom d'utilisateur" sortBy="#{user.username}" filterBy="#{user.username}"
            filterMatchMode="contains" style="min-width: 200px">
            <div class="flex align-items-center gap-2 py-1">
                <div class="border-circle overflow-hidden flex-shrink-0 flex align-items-center justify-content-center"
                    style="width: 32px; height: 32px; background-color: var(--primary-color); color: var(--primary-color-text);">
                    <span style="font-size: 0.75rem; font-weight: 600;">
                        #{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) : ''}
                    </span>
                </div>
                <span class="font-semibold text-900">#{user.username}</span>
            </div>
        </p:column>

        <!-- Colonne Nom complet -->
        <p:column headerText="Nom complet" sortBy="#{user.nom}" filterBy="#{user.nom}" filterMatchMode="contains"
            style="min-width: 200px">
            <div class="flex flex-column py-1">
                <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}" filterBy="#{user.email}" filterMatchMode="contains"
                style="min-width: 250px">
                <div class="flex align-items-center gap-2 py-1">
                    <i class="pi pi-envelope text-400 text-sm"></i>
                    <span class="text-900 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>
            </p:column>
        </c:if>

        <!-- Colonne Statut -->
        <c:if test="#{showStatus}">
            <p:column headerText="Statut" sortBy="#{user.enabled}" style="width: 120px" exportable="true">
                <div class="flex align-items-center justify-content-center py-1">
                    <p:tag value="#{user.enabled ? 'Actif' : 'Inactif'}"
                        severity="#{user.enabled ? 'success' : 'danger'}"
                        icon="#{user.enabled ? 'pi pi-check' : 'pi pi-times'}" />
                </div>
            </p:column>
        </c:if>

        <!-- Colonne Rôles -->
        <c:if test="#{showRoles}">
            <p:column headerText="Rôles" style="min-width: 180px" exportable="false">
                <div class="flex flex-wrap gap-1 py-1 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"
                                    title="#{user.realmRoles.size() - 3} rôle(s) supplémentaire(s)" />
                            </c:if>
                        </c:when>
                        <c:otherwise>
                            <span class="text-400 text-xs font-italic">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: 80px" exportable="false">
                <div class="flex justify-content-center align-items-center" style="min-height: 2.5rem;">
                    <ui:include src="/templates/components/user-management/user-actions.xhtml">
                        <ui:param name="user" value="#{user}" />
                        <ui:param name="layout" value="dropdown" />
                        <ui:param name="update" value="#{not empty update ? update : tableId}" />
                        <ui:param name="actionBean" value="#{actionBean}" />
                        <ui:param name="activateAction" value="#{activateAction}" />
                        <ui:param name="deactivateAction" value="#{deactivateAction}" />
                        <ui:param name="deleteAction" value="#{deleteAction}" />
                    </ui:include>
                </div>
            </p:column>
        </c:if>
    </p:dataTable>

</ui:composition>