<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: Formulaire Utilisateur (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Formulaire complet pour créer/modifier un utilisateur
        
        Paramètres:
        - user: UserDTO (requis) - L'utilisateur à éditer (peut être null pour création)
        - formId: String (défaut: "userForm") - ID du formulaire
        - mode: String (défaut: "create") - Mode: "create" ou "edit"
        - showRealmSelector: Boolean (défaut: false) - Afficher le sélecteur de realm
        - showPasswordFields: Boolean (défaut: true) - Afficher les champs mot de passe
        - readonly: Boolean (défaut: false) - Mode lecture seule
        - submitAction: String (optionnel) - Action à exécuter à la soumission
        - submitOutcome: String (optionnel) - Page de redirection après soumission
        - update: String (optionnel) - Composants à mettre à jour après soumission
        
        Exemples d'utilisation:
        
        1. Formulaire de création:
        <ui:include src="/templates/components/user-management/user-form.xhtml">
            <ui:param name="user" value="#{userBean.newUser}" />
            <ui:param name="mode" value="create" />
            <ui:param name="submitAction" value="#{userBean.createUser}" />
        </ui:include>
        
        2. Formulaire d'édition:
        <ui:include src="/templates/components/user-management/user-form.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
            <ui:param name="mode" value="edit" />
            <ui:param name="showPasswordFields" value="false" />
            <ui:param name="submitAction" value="#{userBean.updateUser}" />
        </ui:include>
        
        3. Formulaire en lecture seule:
        <ui:include src="/templates/components/user-management/user-form.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
            <ui:param name="readonly" value="true" />
        </ui:include>
    -->
    
    <c:set var="formId" value="#{empty formId ? 'userForm' : formId}" />
    <c:set var="mode" value="#{empty mode ? 'create' : mode}" />
    <c:set var="showRealmSelector" value="#{empty showRealmSelector ? false : showRealmSelector}" />
    <c:set var="showPasswordFields" value="#{empty showPasswordFields ? true : showPasswordFields}" />
    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
    
    <h:form id="#{formId}">
        <p:panel header="#{mode == 'create' ? 'Nouvel Utilisateur' : 'Modifier Utilisateur'}" 
                 styleClass="w-full">
            
            <!-- Informations de base -->
            <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
                
                <!-- Username -->
                <p:outputLabel for="username" value="Nom d'utilisateur *" />
                <p:inputText id="username" 
                           value="#{user.username}" 
                           required="true"
                           readonly="#{readonly or mode == 'edit'}"
                           placeholder="jdupont"
                           styleClass="w-full">
                    <f:validateLength minimum="3" maximum="100" />
                    <f:validateRegex pattern="^[a-zA-Z0-9._-]+$" />
                </p:inputText>
                
                <!-- Email -->
                <p:outputLabel for="email" value="Email *" />
                <p:inputText id="email" 
                           value="#{user.email}" 
                           required="true"
                           readonly="#{readonly}"
                           placeholder="jean.dupont@lions.dev"
                           styleClass="w-full">
                    <f:validateLength minimum="5" maximum="255" />
                </p:inputText>
                
                <!-- Prénom -->
                <p:outputLabel for="prenom" value="Prénom *" />
                <p:inputText id="prenom" 
                           value="#{user.prenom}" 
                           required="true"
                           readonly="#{readonly}"
                           placeholder="Jean"
                           styleClass="w-full">
                    <f:validateLength minimum="2" maximum="100" />
                </p:inputText>
                
                <!-- Nom -->
                <p:outputLabel for="nom" value="Nom *" />
                <p:inputText id="nom" 
                           value="#{user.nom}" 
                           required="true"
                           readonly="#{readonly}"
                           placeholder="Dupont"
                           styleClass="w-full">
                    <f:validateLength minimum="2" maximum="100" />
                </p:inputText>
                
                <!-- Téléphone -->
                <p:outputLabel for="telephone" value="Téléphone" />
                <p:inputText id="telephone" 
                           value="#{user.telephone}" 
                           readonly="#{readonly}"
                           placeholder="+225 07 12 34 56 78"
                           styleClass="w-full" />
                
                <!-- Organisation -->
                <p:outputLabel for="organisation" value="Organisation" />
                <p:inputText id="organisation" 
                           value="#{user.organisation}" 
                           readonly="#{readonly}"
                           placeholder="Lions Dev"
                           styleClass="w-full" />
                
                <!-- Département -->
                <p:outputLabel for="departement" value="Département" />
                <p:inputText id="departement" 
                           value="#{user.departement}" 
                           readonly="#{readonly}"
                           placeholder="IT"
                           styleClass="w-full" />
                
                <!-- Fonction -->
                <p:outputLabel for="fonction" value="Fonction" />
                <p:inputText id="fonction" 
                           value="#{user.fonction}" 
                           readonly="#{readonly}"
                           placeholder="Développeur Senior"
                           styleClass="w-full" />
                
                <!-- Ville -->
                <p:outputLabel for="ville" value="Ville" />
                <p:inputText id="ville" 
                           value="#{user.ville}" 
                           readonly="#{readonly}"
                           placeholder="Abidjan"
                           styleClass="w-full" />
                
                <!-- Pays -->
                <p:outputLabel for="pays" value="Pays" />
                <p:inputText id="pays" 
                           value="#{user.pays}" 
                           readonly="#{readonly}"
                           placeholder="Côte d'Ivoire"
                           styleClass="w-full" />
                
                <!-- Statut -->
                <p:outputLabel for="statut" value="Statut" />
                <p:selectOneMenu id="statut" 
                               value="#{user.statut}" 
                               readonly="#{readonly}"
                               styleClass="w-full">
                    <f:selectItem itemLabel="Sélectionner..." itemValue="" />
                    <f:selectItems value="#{userBean.statutOptions}" />
                </p:selectOneMenu>
                
                <!-- Enabled -->
                <p:outputLabel for="enabled" value="Compte activé" />
                <p:selectBooleanCheckbox id="enabled" 
                                        value="#{user.enabled}" 
                                        readonly="#{readonly}" />
                
                <!-- Email vérifié -->
                <p:outputLabel for="emailVerified" value="Email vérifié" />
                <p:selectBooleanCheckbox id="emailVerified" 
                                        value="#{user.emailVerified}" 
                                        readonly="#{readonly}" />
                
                <!-- Realm (si affiché) -->
                <c:if test="#{showRealmSelector}">
                    <p:outputLabel for="realmName" value="Realm *" />
                    <p:selectOneMenu id="realmName" 
                                   value="#{user.realmName}" 
                                   required="#{showRealmSelector}"
                                   readonly="#{readonly}"
                                   styleClass="w-full">
                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
                        <f:selectItems value="#{userBean.availableRealms}" />
                    </p:selectOneMenu>
                </c:if>
                
            </p:panelGrid>
            
            <!-- Champs mot de passe (si affichés) -->
            <c:if test="#{showPasswordFields and mode == 'create'}">
                <p:separator />
                <h3>Mot de passe</h3>
                <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
                    <p:outputLabel for="password" value="Mot de passe *" />
                    <p:password id="password" 
                              value="#{userBean.password}" 
                              required="true"
                              feedback="true"
                              placeholder="Minimum 8 caractères"
                              styleClass="w-full">
                        <f:validateLength minimum="8" maximum="100" />
                    </p:password>
                    
                    <p:outputLabel for="passwordConfirm" value="Confirmer le mot de passe *" />
                    <p:password id="passwordConfirm" 
                              value="#{userBean.passwordConfirm}" 
                              required="true"
                              placeholder="Répétez le mot de passe"
                              styleClass="w-full" />
                </p:panelGrid>
            </c:if>
            
            <!-- Boutons d'action -->
            <f:facet name="footer">
                <div class="flex gap-2 justify-content-end">
                    <c:if test="#{not readonly}">
                        <p:commandButton 
                            value="#{mode == 'create' ? 'Créer' : 'Modifier'}"
                            icon="pi pi-check"
                            styleClass="p-button-success"
                            action="#{not empty submitAction ? submitAction : null}"
                            outcome="#{not empty submitOutcome ? submitOutcome : null}"
                            update="#{not empty update ? update : '@form'}"
                            process="@form" />
                    </c:if>
                    <p:commandButton 
                        value="Annuler"
                        icon="pi pi-times"
                        styleClass="p-button-secondary"
                        outcome="#{not empty cancelOutcome ? cancelOutcome : '/pages/user-manager/users/list'}"
                        immediate="true" />
                </div>
            </f:facet>
        </p:panel>
    </h:form>
    
</ui:composition>

