<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: Barre de Recherche Utilisateur (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Barre de recherche avancée pour utilisateurs
        
        Paramètres:
        - searchCriteria: UserSearchCriteriaDTO (requis) - Critères de recherche
        - searchAction: String (requis) - Action à exécuter lors de la recherche
        - update: String (défaut: "@form") - Composants à mettre à jour
        - showAdvanced: Boolean (défaut: false) - Afficher les options avancées
        - showRealmFilter: Boolean (défaut: true) - Afficher le filtre realm
        - showStatusFilter: Boolean (défaut: true) - Afficher le filtre statut
        - showRoleFilter: Boolean (défaut: true) - Afficher le filtre rôle
        - formId: String (défaut: "searchForm") - ID du formulaire
        
        Exemples d'utilisation:
        
        1. Recherche simple:
        <ui:include src="/templates/components/user-management/user-search-bar.xhtml">
            <ui:param name="searchCriteria" value="#{userBean.searchCriteria}" />
            <ui:param name="searchAction" value="#{userBean.search}" />
            <ui:param name="update" value="userTable" />
        </ui:include>
        
        2. Recherche avec options avancées:
        <ui:include src="/templates/components/user-management/user-search-bar.xhtml">
            <ui:param name="searchCriteria" value="#{userBean.searchCriteria}" />
            <ui:param name="searchAction" value="#{userBean.search}" />
            <ui:param name="showAdvanced" value="true" />
            <ui:param name="update" value="userTable" />
        </ui:include>
    -->
    
    <c:set var="formId" value="#{empty formId ? 'searchForm' : formId}" />
    <c:set var="update" value="#{empty update ? '@form' : update}" />
    <c:set var="showAdvanced" value="#{empty showAdvanced ? false : showAdvanced}" />
    <c:set var="showRealmFilter" value="#{empty showRealmFilter ? true : showRealmFilter}" />
    <c:set var="showStatusFilter" value="#{empty showStatusFilter ? true : showStatusFilter}" />
    <c:set var="showRoleFilter" value="#{empty showRoleFilter ? true : showRoleFilter}" />
    
    <h:form id="#{formId}">
        <p:panel styleClass="w-full mb-3">
            <f:facet name="header">
                <div class="flex align-items-center justify-content-between">
                    <span>Recherche d'utilisateurs</span>
                    <p:commandButton 
                        icon="pi pi-filter"
                        styleClass="p-button-text p-button-sm"
                        onclick="PF('advancedSearchDialog').toggle()"
                        rendered="#{showAdvanced}"
                        title="Options avancées" />
                </div>
            </f:facet>
            
            <!-- Recherche rapide -->
            <div class="flex gap-2 align-items-end">
                <div class="flex-1">
                    <p:outputLabel for="searchText" value="Rechercher" />
                    <p:inputText id="searchText" 
                               value="#{searchCriteria.searchText}" 
                               placeholder="Nom, prénom, email, username..."
                               styleClass="w-full">
                        <p:ajax event="keyup" 
                              delay="500"
                              listener="#{searchAction}"
                              update="#{update}" />
                    </p:inputText>
                </div>
                
                <!-- Filtre Realm -->
                <c:if test="#{showRealmFilter}">
                    <div style="width: 200px;">
                        <p:outputLabel for="realmFilter" value="Realm" />
                        <p:selectOneMenu id="realmFilter" 
                                       value="#{searchCriteria.realmName}" 
                                       styleClass="w-full">
                            <f:selectItem itemLabel="Tous les realms" itemValue="" />
                            <f:selectItems value="#{userBean.availableRealms}" />
                        </p:selectOneMenu>
                    </div>
                </c:if>
                
                <!-- Filtre Statut -->
                <c:if test="#{showStatusFilter}">
                    <div style="width: 180px;">
                        <p:outputLabel for="statusFilter" value="Statut" />
                        <p:selectOneMenu id="statusFilter" 
                                       value="#{searchCriteria.statut}" 
                                       styleClass="w-full">
                            <f:selectItem itemLabel="Tous les statuts" itemValue="" />
                            <f:selectItems value="#{userBean.statutOptions}" />
                        </p:selectOneMenu>
                    </div>
                </c:if>
                
                <!-- Bouton Rechercher -->
                <div>
                    <p:commandButton 
                        value="Rechercher"
                        icon="pi pi-search"
                        styleClass="p-button-primary"
                        action="#{searchAction}"
                        update="#{update}"
                        process="@form" />
                </div>
                
                <!-- Bouton Réinitialiser -->
                <div>
                    <p:commandButton 
                        value="Réinitialiser"
                        icon="pi pi-refresh"
                        styleClass="p-button-secondary"
                        action="#{userBean.resetSearch}"
                        update="#{update}"
                        process="@form" />
                </div>
            </div>
        </p:panel>
        
        <!-- Options avancées (Dialog) -->
        <c:if test="#{showAdvanced}">
            <p:dialog id="advancedSearchDialog" 
                    header="Options de recherche avancées" 
                    widgetVar="advancedSearchDialog"
                    modal="true"
                    resizable="false"
                    styleClass="w-full md:w-6">
                
                <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
                    <!-- Email -->
                    <p:outputLabel for="emailFilter" value="Email" />
                    <p:inputText id="emailFilter" 
                               value="#{searchCriteria.email}" 
                               placeholder="email@example.com"
                               styleClass="w-full" />
                    
                    <!-- Téléphone -->
                    <p:outputLabel for="phoneFilter" value="Téléphone" />
                    <p:inputText id="phoneFilter" 
                               value="#{searchCriteria.telephone}" 
                               placeholder="+225 07 12 34 56 78"
                               styleClass="w-full" />
                    
                    <!-- Organisation -->
                    <p:outputLabel for="orgFilter" value="Organisation" />
                    <p:inputText id="orgFilter" 
                               value="#{searchCriteria.organisation}" 
                               placeholder="Nom de l'organisation"
                               styleClass="w-full" />
                    
                    <!-- Ville -->
                    <p:outputLabel for="cityFilter" value="Ville" />
                    <p:inputText id="cityFilter" 
                               value="#{searchCriteria.ville}" 
                               placeholder="Nom de la ville"
                               styleClass="w-full" />
                    
                    <!-- Rôle (si affiché) -->
                    <c:if test="#{showRoleFilter}">
                        <p:outputLabel for="roleFilter" value="Rôle" />
                        <p:selectOneMenu id="roleFilter" 
                                       value="#{searchCriteria.roleName}" 
                                       styleClass="w-full">
                            <f:selectItem itemLabel="Tous les rôles" itemValue="" />
                            <f:selectItems value="#{userBean.availableRoles}" />
                        </p:selectOneMenu>
                    </c:if>
                    
                    <!-- Date de création (début) -->
                    <p:outputLabel for="dateDebut" value="Date de création (début)" />
                    <p:calendar id="dateDebut" 
                              value="#{searchCriteria.dateCreationDebut}" 
                              pattern="dd/MM/yyyy"
                              styleClass="w-full" />
                    
                    <!-- Date de création (fin) -->
                    <p:outputLabel for="dateFin" value="Date de création (fin)" />
                    <p:calendar id="dateFin" 
                              value="#{searchCriteria.dateCreationFin}" 
                              pattern="dd/MM/yyyy"
                              styleClass="w-full" />
                    
                    <!-- Enabled -->
                    <p:outputLabel for="enabledFilter" value="Compte activé" />
                    <p:selectOneMenu id="enabledFilter" 
                                   value="#{searchCriteria.enabled}" 
                                   styleClass="w-full">
                        <f:selectItem itemLabel="Tous" itemValue="" />
                        <f:selectItem itemLabel="Activé" itemValue="true" />
                        <f:selectItem itemLabel="Désactivé" itemValue="false" />
                    </p:selectOneMenu>
                </p:panelGrid>
                
                <f:facet name="footer">
                    <div class="flex gap-2 justify-content-end">
                        <p:commandButton 
                            value="Appliquer"
                            icon="pi pi-check"
                            styleClass="p-button-primary"
                            action="#{searchAction}"
                            update="#{update}"
                            onclick="PF('advancedSearchDialog').hide()"
                            process="@form" />
                        <p:commandButton 
                            value="Annuler"
                            icon="pi pi-times"
                            styleClass="p-button-secondary"
                            onclick="PF('advancedSearchDialog').hide()" />
                    </div>
                </f:facet>
            </p:dialog>
        </c:if>
    </h:form>
    
</ui:composition>

