<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: Contenu Barre de Recherche Utilisateur - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Barre de recherche avec filtres rapides et options avancées.
                     Utilisé dans user-search-bar.xhtml, ne pas inclure directement.
        
        Paramètres hérités de user-search-bar.xhtml:
        - searchCriteria, searchAction, update
        - showRealmFilter, showStatusFilter, showRoleFilter, showAdvanced
    -->

    <p:panel styleClass="w-full mb-3">
        <f:facet name="header">
            <div class="flex align-items-center justify-content-between">
                <span class="flex align-items-center gap-2">
                    <i class="pi pi-search"></i>
                    Recherche d'utilisateurs
                </span>
                <c:if test="#{showAdvanced}">
                    <p:commandButton icon="pi pi-filter" styleClass="p-button-text p-button-sm p-button-rounded"
                        onclick="PF('advancedSearchDialog').toggle()" title="Options avancées" type="button" />
                </c:if>
            </div>
        </f:facet>

        <!-- Recherche rapide -->
        <div class="flex gap-2 align-items-end flex-wrap">
            <div class="flex-1" style="min-width: 250px;">
                <p:outputLabel for="searchText" value="Rechercher" styleClass="font-medium" />
                <div class="p-inputgroup mt-1">
                    <span class="p-inputgroup-addon">
                        <i class="pi pi-search"></i>
                    </span>
                    <p:inputText id="searchText" value="#{searchCriteria.searchTerm}"
                        placeholder="Nom, prénom, email, username..." styleClass="w-full">
                        <p:ajax event="keyup" delay="500" listener="#{searchAction}" update="#{update}" />
                    </p:inputText>
                </div>
            </div>

            <!-- Filtre Realm -->
            <c:if test="#{showRealmFilter}">
                <div style="min-width: 180px;">
                    <p:outputLabel for="realmFilter" value="Realm" styleClass="font-medium" />
                    <p:selectOneMenu id="realmFilter" value="#{searchCriteria.realmName}" styleClass="w-full mt-1">
                        <f:selectItem itemLabel="Tous les realms" itemValue="" />
                        <f:selectItems value="#{userBean.availableRealms}" />
                        <p:ajax event="change" listener="#{searchAction}" update="#{update}" />
                    </p:selectOneMenu>
                </div>
            </c:if>

            <!-- Filtre Statut -->
            <c:if test="#{showStatusFilter}">
                <div style="min-width: 150px;">
                    <p:outputLabel for="statusFilter" value="Statut" styleClass="font-medium" />
                    <p:selectOneMenu id="statusFilter" value="#{searchCriteria.statut}" styleClass="w-full mt-1">
                        <f:selectItem itemLabel="Tous les statuts" itemValue="" />
                        <f:selectItems value="#{userBean.statutOptions}" />
                        <p:ajax event="change" listener="#{searchAction}" update="#{update}" />
                    </p:selectOneMenu>
                </div>
            </c:if>

            <!-- Boutons -->
            <div class="flex gap-2 align-items-end">
                <p:commandButton value="Rechercher" icon="pi pi-search" styleClass="p-button-primary"
                    action="#{searchAction}" update="#{update}" process="@form" />

                <p:commandButton icon="pi pi-refresh" title="Réinitialiser"
                    styleClass="p-button-secondary p-button-outlined p-button-rounded" 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" draggable="true" responsive="true" styleClass="w-11 md:w-6"
            closeOnEscape="true">

            <div class="grid">
                <!-- Email -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="emailFilter" value="Email" styleClass="font-medium" />
                        <p:inputText id="emailFilter" value="#{searchCriteria.email}" placeholder="email@example.com"
                            styleClass="w-full" />
                    </div>
                </div>

                <!-- Téléphone -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="phoneFilter" value="Téléphone" styleClass="font-medium" />
                        <p:inputText id="phoneFilter" value="#{searchCriteria.telephone}"
                            placeholder="+225 07 12 34 56 78" styleClass="w-full" />
                    </div>
                </div>

                <!-- Organisation -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="orgFilter" value="Organisation" styleClass="font-medium" />
                        <p:inputText id="orgFilter" value="#{searchCriteria.organisation}"
                            placeholder="Nom de l'organisation" styleClass="w-full" />
                    </div>
                </div>

                <!-- Ville -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="cityFilter" value="Ville" styleClass="font-medium" />
                        <p:inputText id="cityFilter" value="#{searchCriteria.ville}" placeholder="Nom de la ville"
                            styleClass="w-full" />
                    </div>
                </div>

                <!-- Rôle -->
                <c:if test="#{showRoleFilter}">
                    <div class="col-12 md:col-6">
                        <div class="field">
                            <p:outputLabel for="roleFilter" value="Rôle Realm" styleClass="font-medium" />
                            <p:selectCheckboxMenu id="roleFilter" value="#{searchCriteria.realmRoles}"
                                label="Sélectionner des rôles" multiple="true" filter="true" filterMatchMode="contains"
                                styleClass="w-full">
                                <f:selectItems value="#{userBean.availableRoles}" />
                            </p:selectCheckboxMenu>
                        </div>
                    </div>
                </c:if>

                <!-- Enabled -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="enabledFilter" value="Compte activé" styleClass="font-medium" />
                        <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>
                    </div>
                </div>

                <!-- Date de création (début) -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="dateDebut" value="Date de création (début)" styleClass="font-medium" />
                        <p:datePicker id="dateDebut" value="#{searchCriteria.dateCreationMin}" pattern="dd/MM/yyyy"
                            showIcon="true" styleClass="w-full" />
                    </div>
                </div>

                <!-- Date de création (fin) -->
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="dateFin" value="Date de création (fin)" styleClass="font-medium" />
                        <p:datePicker id="dateFin" value="#{searchCriteria.dateCreationMax}" pattern="dd/MM/yyyy"
                            showIcon="true" styleClass="w-full" />
                    </div>
                </div>
            </div>

            <f:facet name="footer">
                <div class="flex gap-2 justify-content-end">
                    <p:commandButton value="Appliquer les filtres" icon="pi pi-check" styleClass="p-button-primary"
                        action="#{searchAction}" update="#{update}" oncomplete="PF('advancedSearchDialog').hide()"
                        process="@form" />
                    <p:commandButton value="Annuler" icon="pi pi-times"
                        styleClass="p-button-secondary p-button-outlined" onclick="PF('advancedSearchDialog').hide()"
                        type="button" />
                </div>
            </f:facet>
        </p:dialog>
    </c:if>

</ui:composition>