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

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

    <p:panel header="#{mode == 'create' ? 'Nouveau Rôle' : 'Modifier Rôle'}" styleClass="w-full">

        <!-- Section: Informations du rôle -->
        <h4 class="text-primary mt-0 mb-3">
            <i class="pi pi-shield mr-2"></i>Informations du rôle
        </h4>

        <div class="grid">
            <!-- Nom du rôle -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="roleName" value="Nom du rôle" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <p:inputText id="roleName" value="#{role.name}" required="true" readonly="#{readonly}"
                        placeholder="ADMIN, USER, MODERATOR..." styleClass="w-full">
                        <f:validateLength minimum="2" maximum="100" />
                        <f:validateRegex pattern="^[A-Z][A-Z0-9_]*$" />
                    </p:inputText>
                    <p:message for="roleName" display="text" styleClass="mt-1" />
                    <small class="text-color-secondary block mt-1">
                        Lettres majuscules, chiffres et underscores uniquement (ex: ADMIN_USER)
                    </small>
                </div>
            </div>

            <!-- Type de rôle -->
            <div class="col-12 md:col-6">
                <div class="field">
                    <p:outputLabel for="typeRole" value="Type de rôle" styleClass="font-medium" />
                    <span class="text-red-500 ml-1">*</span>
                    <p:selectOneMenu id="typeRole" value="#{role.typeRole}" required="true"
                        readonly="#{readonly or mode == 'edit'}" styleClass="w-full">
                        <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                        <f:selectItem itemLabel="Rôle Realm" itemValue="REALM_ROLE" />
                        <f:selectItem itemLabel="Rôle Client" itemValue="CLIENT_ROLE" />
                        <f:selectItem itemLabel="Rôle Composite" itemValue="COMPOSITE_ROLE" />
                    </p:selectOneMenu>
                    <p:message for="typeRole" display="text" styleClass="mt-1" />
                </div>
            </div>

            <!-- Description -->
            <div class="col-12">
                <div class="field">
                    <p:outputLabel for="description" value="Description" styleClass="font-medium" />
                    <p:inputTextarea id="description" value="#{role.description}" readonly="#{readonly}"
                        placeholder="Description du rôle..." rows="3" autoResize="true" styleClass="w-full" />
                </div>
            </div>
        </div>

        <p:separator />

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

        <div class="grid">
            <!-- Realm -->
            <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="#{role.realmName}" required="#{showRealmSelector}"
                            readonly="#{readonly}" styleClass="w-full">
                            <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                            <f:selectItems value="#{roleBean.availableRealms}" />
                        </p:selectOneMenu>
                        <p:message for="realmName" display="text" styleClass="mt-1" />
                    </div>
                </div>
            </c:if>

            <!-- Client -->
            <c:if test="#{showClientSelector}">
                <div class="col-12 md:col-6">
                    <div class="field">
                        <p:outputLabel for="clientId" value="Client" styleClass="font-medium" />
                        <span class="text-red-500 ml-1">*</span>
                        <p:selectOneMenu id="clientId" value="#{role.clientId}" required="#{showClientSelector}"
                            readonly="#{readonly}" styleClass="w-full">
                            <f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
                            <f:selectItems value="#{roleBean.availableClients}" />
                        </p:selectOneMenu>
                        <p:message for="clientId" display="text" styleClass="mt-1" />
                    </div>
                </div>
            </c:if>

            <!-- Rôle composite -->
            <c:if test="#{showCompositeOptions}">
                <div class="col-12 md:col-6">
                    <div class="field">
                        <div class="flex align-items-center gap-2 mt-3">
                            <p:selectBooleanCheckbox id="composite" value="#{role.composite}" readonly="#{readonly}" />
                            <p:outputLabel for="composite" value="Rôle composite" styleClass="font-medium" />
                        </div>
                        <small class="text-color-secondary block mt-1">
                            Un rôle composite regroupe plusieurs sous-rôles
                        </small>
                    </div>
                </div>
            </c:if>
        </div>

        <!-- 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 le rôle' : '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 le rôle' : 'Enregistrer'}"
                                icon="pi pi-check" styleClass="p-button-success" outcome="#{submitOutcome}" />
                        </c:when>
                        <c:otherwise>
                            <p:commandButton value="#{mode == 'create' ? 'Créer le rôle' : '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/roles/list'}"
                    immediate="true" />
            </div>
        </f:facet>
    </p:panel>

</ui:composition>