<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: Champ de Formulaire Utilisateur - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: Champ de formulaire générique avec label, input, message de validation
                     et texte d'aide. Supporte plusieurs types d'inputs PrimeFaces.
                     Conforme au pattern WOU/DRY.
        
        Paramètres:
        - id: String (requis) - ID unique du champ
        - label: String (requis) - Label du champ
        - value: Object (requis) - Valeur liée au champ (expression EL)
        - type: String (défaut: "text") - Type: "text", "email", "password", "number", "textarea", 
                                           "select", "checkbox", "calendar", "switch"
        - required: Boolean (défaut: false) - Champ requis
        - readonly: Boolean (défaut: false) - Mode lecture seule
        - disabled: Boolean (défaut: false) - Champ désactivé
        - placeholder: String (optionnel) - Placeholder
        - helpText: String (optionnel) - Texte d'aide sous le champ
        - styleClass: String (optionnel) - Classes CSS sur l'input
        - wrapperClass: String (optionnel) - Classes CSS sur le wrapper div.field
        - selectItems: List (optionnel) - Items pour select
        - rows: Number (défaut: 3) - Nombre de lignes pour textarea
        - minLength: Number (optionnel) - Longueur min pour validation
        - maxLength: Number (optionnel) - Longueur max pour validation
        - pattern: String (optionnel) - Pattern regex pour validation
        - showMessage: Boolean (défaut: true) - Afficher les messages de validation
        - colSize: String (optionnel) - Taille de colonne pour layout en grille
        
        Exemples d'utilisation:
        
        1. Champ texte requis:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="username" />
            <ui:param name="label" value="Nom d'utilisateur" />
            <ui:param name="value" value="#{user.username}" />
            <ui:param name="required" value="true" />
            <ui:param name="minLength" value="3" />
        </ui:include>
        
        2. Champ email:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="email" />
            <ui:param name="label" value="Email" />
            <ui:param name="value" value="#{user.email}" />
            <ui:param name="type" value="email" />
            <ui:param name="required" value="true" />
            <ui:param name="helpText" value="Doit être une adresse email valide" />
        </ui:include>
        
        3. Champ select:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="statut" />
            <ui:param name="label" value="Statut" />
            <ui:param name="value" value="#{user.statut}" />
            <ui:param name="type" value="select" />
            <ui:param name="selectItems" value="#{bean.statutOptions}" />
        </ui:include>
        
        4. Toggle switch:
        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
            <ui:param name="id" value="enabled" />
            <ui:param name="label" value="Compte activé" />
            <ui:param name="value" value="#{user.enabled}" />
            <ui:param name="type" value="switch" />
        </ui:include>
    -->

    <c:set var="type" value="#{empty type ? 'text' : type}" />
    <c:set var="required" value="#{empty required ? false : required}" />
    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
    <c:set var="disabled" value="#{empty disabled ? false : disabled}" />
    <c:set var="rows" value="#{empty rows ? 3 : rows}" />
    <c:set var="showMessage" value="#{empty showMessage ? true : showMessage}" />

    <div class="field #{wrapperClass}">
        <!-- Label avec indicateur requis -->
        <c:if test="#{type != 'checkbox' and type != 'switch'}">
            <p:outputLabel for="#{id}" value="#{label}" styleClass="font-medium" />
            <c:if test="#{required}">
                <span class="text-red-500 ml-1" title="Champ obligatoire">*</span>
            </c:if>
        </c:if>

        <c:choose>
            <!-- Champ texte ou email -->
            <c:when test="#{type == 'text' or type == 'email'}">
                <p:inputText id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" placeholder="#{placeholder}" type="#{type == 'email' ? 'email' : 'text'}"
                    styleClass="w-full #{styleClass}">
                    <c:if test="#{not empty minLength}">
                        <f:validateLength minimum="#{minLength}" />
                    </c:if>
                    <c:if test="#{not empty maxLength}">
                        <f:validateLength maximum="#{maxLength}" />
                    </c:if>
                    <c:if test="#{not empty pattern}">
                        <f:validateRegex pattern="#{pattern}" />
                    </c:if>
                </p:inputText>
            </c:when>

            <!-- Champ mot de passe -->
            <c:when test="#{type == 'password'}">
                <p:password id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" placeholder="#{placeholder}"
                    feedback="#{not empty feedback ? feedback : false}" toggleMask="true"
                    styleClass="w-full #{styleClass}">
                    <c:if test="#{not empty minLength}">
                        <f:validateLength minimum="#{minLength}" />
                    </c:if>
                    <c:if test="#{not empty maxLength}">
                        <f:validateLength maximum="#{maxLength}" />
                    </c:if>
                </p:password>
            </c:when>

            <!-- Champ nombre -->
            <c:when test="#{type == 'number'}">
                <p:inputNumber id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" placeholder="#{placeholder}" styleClass="w-full #{styleClass}" />
            </c:when>

            <!-- Champ textarea -->
            <c:when test="#{type == 'textarea'}">
                <p:inputTextarea id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" placeholder="#{placeholder}" rows="#{rows}" autoResize="true"
                    styleClass="w-full #{styleClass}">
                    <c:if test="#{not empty maxLength}">
                        <f:validateLength maximum="#{maxLength}" />
                    </c:if>
                </p:inputTextarea>
            </c:when>

            <!-- Champ select -->
            <c:when test="#{type == 'select'}">
                <p:selectOneMenu id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" styleClass="w-full #{styleClass}">
                    <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                    <f:selectItems value="#{selectItems}" />
                </p:selectOneMenu>
            </c:when>

            <!-- Champ checkbox -->
            <c:when test="#{type == 'checkbox'}">
                <div class="flex align-items-center gap-2">
                    <p:selectBooleanCheckbox id="#{id}" value="#{value}" readonly="#{readonly}"
                        disabled="#{disabled}" />
                    <p:outputLabel for="#{id}" value="#{label}" styleClass="font-medium" />
                </div>
            </c:when>

            <!-- Toggle switch -->
            <c:when test="#{type == 'switch'}">
                <div class="flex align-items-center gap-2">
                    <p:toggleSwitch id="#{id}" value="#{value}" readonly="#{readonly}" disabled="#{disabled}" />
                    <p:outputLabel for="#{id}" value="#{label}" styleClass="font-medium" />
                </div>
            </c:when>

            <!-- Champ calendar -->
            <c:when test="#{type == 'calendar'}">
                <p:datePicker id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" pattern="dd/MM/yyyy" showIcon="true" styleClass="w-full #{styleClass}" />
            </c:when>

            <!-- Par défaut: champ texte -->
            <c:otherwise>
                <p:inputText id="#{id}" value="#{value}" required="#{required}" readonly="#{readonly}"
                    disabled="#{disabled}" placeholder="#{placeholder}" styleClass="w-full #{styleClass}" />
            </c:otherwise>
        </c:choose>

        <!-- Message de validation -->
        <c:if test="#{showMessage}">
            <p:message for="#{id}" display="text" styleClass="mt-1" />
        </c:if>

        <!-- Texte d'aide -->
        <c:if test="#{not empty helpText}">
            <small class="text-color-secondary block mt-1">#{helpText}</small>
        </c:if>
    </div>

</ui:composition>