<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 du formulaire Utilisateur - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Corps du formulaire utilisateur (création/édition) avec validation
                     et messages d'erreur. Doit être contenu dans un h:form ou utilisé
                     via user-form.xhtml qui gère automatiquement le wrapper <h:form>.
        
        Paramètres hérités de user-form.xhtml:
        - user: UserDTO (requis)
        - mode: String ("create" | "edit")
        - showRealmSelector: Boolean
        - showPasswordFields: Boolean
        - readonly: Boolean
        - hasSubmitAction: Boolean
        - submitAction: MethodExpression
        - submitOutcome: String
        - update: String
        - cancelOutcome: String
    -->

    <p:messages id="formMessages" showDetail="true" closable="true" styleClass="mb-3" />

    <p:panel header="#{mode == 'create' ? 'Nouvel Utilisateur' : 'Modifier Utilisateur'}" styleClass="w-full">

        <!-- Section: Identité -->
        <h4 class="text-primary mt-0 mb-3">
            <i class="pi pi-id-card mr-2"></i>Identité
        </h4>

        <div class="grid">
            <!-- Username -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="username" value="Nom d'utilisateur" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <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>
                    <p:message for="username" display="text" styleClass="mt-1" />
                </div>
            </div>

            <!-- Email -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="email" value="Email" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <p:inputText id="email" value="#{user.email}" required="true" readonly="#{readonly}"
                        placeholder="jean.dupont@lions.dev" type="email" styleClass="w-full">
                        <f:validateLength minimum="5" maximum="255" />
                    </p:inputText>
                    <p:message for="email" display="text" styleClass="mt-1" />
                </div>
            </div>

            <!-- Prénom -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="prenom" value="Prénom" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <p:inputText id="prenom" value="#{user.prenom}" required="true" readonly="#{readonly}"
                        placeholder="Jean" styleClass="w-full">
                        <f:validateLength minimum="2" maximum="100" />
                    </p:inputText>
                    <p:message for="prenom" display="text" styleClass="mt-1" />
                </div>
            </div>

            <!-- Nom -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="nom" value="Nom" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <p:inputText id="nom" value="#{user.nom}" required="true" readonly="#{readonly}"
                        placeholder="Dupont" styleClass="w-full">
                        <f:validateLength minimum="2" maximum="100" />
                    </p:inputText>
                    <p:message for="nom" display="text" styleClass="mt-1" />
                </div>
            </div>
        </div>

        <p:separator />

        <!-- Section: Coordonnées -->
        <h4 class="text-primary mt-2 mb-3">
            <i class="pi pi-map-marker mr-2"></i>Coordonnées
        </h4>

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

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

            <!-- Pays -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="pays" value="Pays" styleClass="font-medium" />
                    <p:inputText id="pays" value="#{user.pays}" readonly="#{readonly}" placeholder="Côte d'Ivoire"
                        styleClass="w-full" />
                </div>
            </div>
        </div>

        <p:separator />

        <!-- Section: Organisation -->
        <h4 class="text-primary mt-2 mb-3">
            <i class="pi pi-building mr-2"></i>Organisation
        </h4>

        <div class="grid">
            <!-- Organisation -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="organisation" value="Organisation" styleClass="font-medium" />
                    <p:inputText id="organisation" value="#{user.organisation}" readonly="#{readonly}"
                        placeholder="Lions Dev" styleClass="w-full" />
                </div>
            </div>

            <!-- Département -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="departement" value="Département" styleClass="font-medium" />
                    <p:inputText id="departement" value="#{user.departement}" readonly="#{readonly}" placeholder="IT"
                        styleClass="w-full" />
                </div>
            </div>

            <!-- Fonction -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="fonction" value="Fonction" styleClass="font-medium" />
                    <p:inputText id="fonction" value="#{user.fonction}" readonly="#{readonly}"
                        placeholder="Développeur Senior" styleClass="w-full" />
                </div>
            </div>
        </div>

        <p:separator />

        <!-- Section: Statut et Paramètres -->
        <h4 class="text-primary mt-2 mb-3">
            <i class="pi pi-cog mr-2"></i>Statut et Paramètres
        </h4>

        <div class="grid">
            <!-- Statut -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="statut" value="Statut" styleClass="font-medium" />
                    <p:selectOneMenu id="statut" value="#{user.statut}" readonly="#{readonly}" styleClass="w-full">
                        <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                        <f:selectItems value="#{userBean.statutOptions}" />
                    </p:selectOneMenu>
                </div>
            </div>

            <!-- Realm (si affiché) -->
            <c:if test="#{showRealmSelector}">
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="realmName" value="Realm" styleClass="font-medium" />
                        <span class="text-red-500 ml-1">*</span>
                        <p:selectOneMenu id="realmName" value="#{user.realmName}" required="#{showRealmSelector}"
                            readonly="#{readonly}" styleClass="w-full">
                            <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                            <f:selectItems value="#{userBean.availableRealms}" />
                        </p:selectOneMenu>
                        <p:message for="realmName" display="text" styleClass="mt-1" />
                    </div>
                </div>
            </c:if>

            <!-- Enabled -->
            <div class="col-12 md:col-3">
                <div class="field">
                    <div class="flex align-items-center gap-2 mt-4">
                        <p:selectBooleanCheckbox id="enabled" value="#{user.enabled}" readonly="#{readonly}" />
                        <p:outputLabel for="enabled" value="Compte activé" styleClass="font-medium" />
                    </div>
                </div>
            </div>

            <!-- Email vérifié -->
            <div class="col-12 md:col-3">
                <div class="field">
                    <div class="flex align-items-center gap-2 mt-4">
                        <p:selectBooleanCheckbox id="emailVerified" value="#{user.emailVerified}"
                            readonly="#{readonly}" />
                        <p:outputLabel for="emailVerified" value="Email vérifié" styleClass="font-medium" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Champs mot de passe (mode création uniquement) -->
        <c:if test="#{showPasswordFields and mode == 'create'}">
            <p:separator />

            <h4 class="text-primary mt-2 mb-3">
                <i class="pi pi-lock mr-2"></i>Mot de passe
            </h4>

            <div class="grid">
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="password" value="Mot de passe" styleClass="font-medium" />
                        <span class="text-red-500 ml-1">*</span>
                        <p:password id="password" value="#{userBean.password}" required="true" feedback="true"
                            toggleMask="true" placeholder="Minimum 8 caractères" styleClass="w-full">
                            <f:validateLength minimum="8" maximum="100" />
                        </p:password>
                        <p:message for="password" display="text" styleClass="mt-1" />
                    </div>
                </div>

                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="passwordConfirm" value="Confirmer le mot de passe"
                            styleClass="font-medium" />
                        <span class="text-red-500 ml-1">*</span>
                        <p:password id="passwordConfirm" value="#{userBean.passwordConfirm}" required="true"
                            toggleMask="true" placeholder="Répétez le mot de passe" styleClass="w-full" />
                        <p:message for="passwordConfirm" display="text" styleClass="mt-1" />
                    </div>
                </div>
            </div>
        </c:if>

        <!-- Boutons d'action -->
        <f:facet name="footer">
            <div class="flex gap-2 justify-content-end">
                <c:if test="#{not readonly}">
                    <c:choose>
                        <c:when test="#{hasSubmitAction == true}">
                            <p:commandButton value="#{mode == 'create' ? 'Créer' : 'Enregistrer'}" icon="pi pi-check"
                                styleClass="p-button-success" action="#{submitAction}"
                                update="#{not empty update ? update : '@form'}" process="@form" validateClient="true" />
                        </c:when>
                        <c:when test="#{not empty submitOutcome}">
                            <p:commandButton value="#{mode == 'create' ? 'Créer' : 'Enregistrer'}" icon="pi pi-check"
                                styleClass="p-button-success" outcome="#{submitOutcome}" />
                        </c:when>
                        <c:otherwise>
                            <p:commandButton value="#{mode == 'create' ? 'Créer' : 'Enregistrer'}" icon="pi pi-check"
                                styleClass="p-button-success" action="#{submitAction}"
                                update="#{not empty update ? update : '@form'}" process="@form" validateClient="true" />
                        </c:otherwise>
                    </c:choose>
                </c:if>
                <p:commandButton value="Annuler" icon="pi pi-times" styleClass="p-button-secondary p-button-outlined"
                    outcome="#{not empty cancelOutcome ? cancelOutcome : '/pages/user-manager/users/list'}"
                    immediate="true" />
            </div>
        </f:facet>
    </p:panel>

</ui:composition>