<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:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <!--
        ╔═══════════════════════════════════════════════════════════╗
        ║  UnionFlow - Elite Topbar (Freya Design System)          ║
        ║  Real-time Session Monitor | Modern UI | Professional    ║
        ╚═══════════════════════════════════════════════════════════╝
    -->

    <h:outputStylesheet library="css" name="topbar-elite.css" />

    <div class="layout-topbar unionflow-elite">
        <div class="layout-topbar-wrapper">
            <!-- LEFT SECTION -->
            <div class="layout-topbar-left">
                <a href="#" class="menu-button">
                   <i class="pi pi-bars"/>
                </a>
                <h:link id="logolink" outcome="#{paths.dashboard}" styleClass="layout-topbar-logo" style="display:none"/>
            </div>

            <!-- CENTER - Menu -->
            <ui:include src="/templates/components/layout/menu.xhtml" />

            <!-- RIGHT SECTION -->
            <div class="layout-topbar-right">
                <ul class="layout-topbar-actions">

                    <!-- Org Switcher (visible seulement si l'utilisateur a des organisations) -->
                    <li class="topbar-item org-switcher-item"
                        style="#{empty userSession.mesOrganisations ? 'display:none' : ''}">
                        <a href="#" class="org-switcher-trigger" title="Changer d'organisation">
                            <i class="topbar-icon pi pi-building"/>
                            <span class="org-switcher-label">#{userSession.activeOrganisationNom}</span>
                            <i class="pi pi-angle-down ml-1" style="font-size:0.75rem"/>
                        </a>
                        <ul class="org-switcher-dropdown">
                            <li class="notif-header">
                                <span class="font-semibold">Mes organisations</span>
                            </li>
                            <li class="divider"/>
                            <h:form id="orgSwitcherForm">
                                <ui:repeat value="#{userSession.mesOrganisations}" var="org">
                                    <li class="org-item #{userSession.activeOrganisationId != null and org.organisationId == userSession.activeOrganisationId.toString() ? 'org-item-active' : ''}">
                                        <p:commandLink styleClass="org-item-link"
                                                       action="#{userSession.changerOrganisationActive(org.organisationId)}"
                                                       update="orgSwitcherForm"
                                                       process="@this">
                                            <div class="org-item-content">
                                                <div class="org-item-name">#{org.libelleCourt}</div>
                                                <div class="org-item-meta">
                                                    <span class="org-type-badge">#{org.typeOrganisation}</span>
                                                    <span class="org-role-badge">#{org.statutMembre}</span>
                                                </div>
                                            </div>
                                            <i class="pi pi-check org-check-icon"
                                               style="#{userSession.activeOrganisationId != null and org.organisationId == userSession.activeOrganisationId.toString() ? '' : 'visibility:hidden'}"/>
                                        </p:commandLink>
                                    </li>
                                </ui:repeat>
                            </h:form>
                        </ul>
                    </li>

                    <!-- Search -->
                    <li class="topbar-item search-item">
                        <a href="#" title="Rechercher">
                            <i class="topbar-icon pi pi-search"/>
                        </a>
                        <div class="search-dropdown">
                            <h:form styleClass="search-form-elite">
                                <div class="search-wrapper-elite">
                                    <i class="pi pi-search"/>
                                    <p:inputText placeholder="Rechercher membres, organisations..."
                                                styleClass="search-input"/>
                                    <p:commandButton icon="pi pi-arrow-right"
                                                    styleClass="p-button-rounded p-button-sm"/>
                                </div>
                            </h:form>
                        </div>
                    </li>

                    <!-- Notifications -->
                    <li class="topbar-item notifications-item">
                        <a href="#" title="Notifications">
                            <i class="topbar-icon pi pi-bell"/>
                            <span class="badge-count">3</span>
                        </a>
                        <ul class="notifications-dropdown">
                            <li class="notif-header">
                                <span class="font-semibold">Notifications</span>
                                <span class="count-label">3 nouvelles</span>
                            </li>
                            <li class="divider"/>
                            <li class="notif-item">
                                <i class="pi pi-info-circle text-blue-500"/>
                                <div>
                                    <div class="notif-title">Nouvelle adhésion</div>
                                    <div class="notif-time">Il y a 5 min</div>
                                </div>
                            </li>
                            <li class="notif-item">
                                <i class="pi pi-check-circle text-green-500"/>
                                <div>
                                    <div class="notif-title">Cotisation validée</div>
                                    <div class="notif-time">Il y a 1h</div>
                                </div>
                            </li>
                            <li class="divider"/>
                            <li class="notif-footer">
                                <a href="#" class="text-primary">Voir tout</a>
                            </li>
                        </ul>
                    </li>

                    <!-- User Profile -->
                    <li class="topbar-item user-profile elite-user">
                        <a href="#" class="profile-trigger">
                            <div class="avatar-container">
                                <div class="avatar bg-gradient-primary">
                                    #{userSession.currentUser.initiales}
                                </div>
                                <span class="status-dot online"/>
                            </div>

                            <div class="user-info">
                                <div class="user-header">
                                    <span class="user-name">#{userSession.currentUser.nomComplet}</span>
                                    <span class="role-badge">#{userSession.typeCompte}</span>
                                </div>
                                <div class="session-timer">
                                    <h:panelGroup id="sessionTimerDisplay">
                                        <i class="#{sessionMonitor.timeIndicatorIcon} icon-sm"/>
                                        <span class="#{sessionMonitor.timeIndicatorClass} timer-text">
                                            #{sessionMonitor.formattedRemainingTime}
                                        </span>
                                    </h:panelGroup>
                                </div>
                            </div>

                            <i class="pi pi-angle-down arrow"/>
                        </a>

                        <!-- User Dropdown -->
                        <ul class="user-dropdown elite-dropdown">
                            <!-- Header -->
                            <li class="dropdown-header">
                                <div class="header-content">
                                    <div class="header-avatar">
                                        <div class="avatar-lg bg-gradient-primary">
                                            #{userSession.currentUser.initiales}
                                        </div>
                                        <span class="status-indicator online">
                                            <i class="pi pi-circle-fill"/>
                                        </span>
                                    </div>
                                    <div class="header-info">
                                        <div class="name">#{userSession.currentUser.nomComplet}</div>
                                        <div class="email">#{userSession.currentUser.email}</div>
                                        <span class="role-tag">#{userSession.typeCompte}</span>
                                    </div>
                                </div>
                            </li>

                            <!-- Session Card -->
                            <li class="session-card">
                                <div class="card-content">
                                    <div class="info-row">
                                        <span class="label">
                                            <i class="pi pi-building"/>
                                            Organisation
                                        </span>
                                        <span class="value">#{userSession.activeOrganisationNom}</span>
                                    </div>
                                    <div class="info-row">
                                        <span class="label">
                                            <i class="#{sessionMonitor.timeIndicatorIcon}"/>
                                            Temps restant
                                        </span>
                                        <span class="value #{sessionMonitor.timeIndicatorClass}">
                                            #{sessionMonitor.formattedRemainingTime}
                                        </span>
                                    </div>

                                    <!-- Progress Bar -->
                                    <div class="progress-container">
                                        <div class="progress-bar">
                                            <div class="progress-fill"
                                                 style="width: #{100 - sessionMonitor.sessionProgressPercent}%"/>
                                        </div>
                                        <div class="progress-label">
                                            #{sessionMonitor.remainingMinutes} min
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="divider"/>

                            <!-- Actions -->
                            <li class="menu-section">
                                <div class="section-title">
                                    <i class="pi pi-user"/>
                                    Mon Compte
                                </div>
                                <div class="section-items">
                                    <h:form>
                                        <p:commandLink action="#{navigationBean.goToProfile}"
                                                      styleClass="menu-item">
                                            <i class="pi pi-user-edit"/>
                                            <span>Mon Profil</span>
                                            <i class="pi pi-angle-right arrow-right"/>
                                        </p:commandLink>
                                    </h:form>

                                    <h:form>
                                        <p:commandLink action="#{navigationBean.goToSettings}"
                                                      styleClass="menu-item">
                                            <i class="pi pi-cog"/>
                                            <span>Paramètres</span>
                                            <i class="pi pi-angle-right arrow-right"/>
                                        </p:commandLink>
                                    </h:form>

                                    <a href="/pages/secure/messages.xhtml" class="menu-item">
                                        <i class="pi pi-envelope"/>
                                        <span>Messages</span>
                                        <span class="item-badge">2</span>
                                        <i class="pi pi-angle-right arrow-right"/>
                                    </a>
                                </div>
                            </li>

                            <li class="divider"/>

                            <!-- Preferences -->
                            <li class="menu-section">
                                <div class="section-title">
                                    <i class="pi pi-palette"/>
                                    Préférences
                                </div>
                                <div class="section-items">
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-sun"/>
                                        <span>Thème</span>
                                        <span class="value-badge">Clair</span>
                                    </a>
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-bell"/>
                                        <span>Notifications</span>
                                        <i class="pi pi-angle-right arrow-right"/>
                                    </a>
                                </div>
                            </li>

                            <li class="divider"/>

                            <!-- Support -->
                            <li class="menu-section compact">
                                <div class="section-items">
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-question-circle text-blue-500"/>
                                        <span>Aide</span>
                                    </a>
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-info-circle text-cyan-500"/>
                                        <span>À propos</span>
                                    </a>
                                </div>
                            </li>

                            <li class="divider logout-divider"/>

                            <!-- Logout -->
                            <li class="logout-section">
                                <h:form>
                                    <p:commandLink styleClass="logout-btn"
                                                  onclick="PF('logoutDialog').show(); return false;">
                                        <i class="pi pi-sign-out"/>
                                        <span>Déconnexion</span>
                                        <i class="pi pi-lock ml-auto"/>
                                    </p:commandLink>
                                </h:form>
                            </li>
                        </ul>
                    </li>

                </ul>

                <a href="#" class="layout-rightpanel-button" title="Configuration">
                    <i class="pi pi-arrow-left"/>
                </a>
            </div>
        </div>
    </div>

    <!-- LOGOUT DIALOG -->
    <p:dialog id="logoutDialog"
              widgetVar="logoutDialog"
              header="Confirmation de déconnexion"
              modal="true"
              closable="true"
              styleClass="elite-dialog"
              responsive="true"
              width="450">

        <div class="dialog-content">
            <div class="icon-wrapper">
                <i class="pi pi-sign-out icon-lg"/>
            </div>

            <h3 class="dialog-title">Êtes-vous sûr de vouloir vous déconnecter ?</h3>

            <div class="info-box">
                <div class="info-item">
                    <i class="pi pi-user"/>
                    <span>#{userSession.currentUser.nomComplet}</span>
                </div>
                <div class="info-item">
                    <i class="pi pi-clock"/>
                    <span>Session: #{sessionMonitor.formattedRemainingTime}</span>
                </div>
            </div>

            <p class="warning-text">
                <i class="pi pi-info-circle"/>
                Vous devrez vous reconnecter pour accéder à l'application.
            </p>
        </div>

        <f:facet name="footer">
            <div class="dialog-footer">
                <p:commandButton value="Annuler"
                                icon="pi pi-times"
                                styleClass="p-button-outlined p-button-secondary"
                                onclick="PF('logoutDialog').hide(); return false;"/>

                <h:form>
                    <p:commandButton value="Se déconnecter"
                                    icon="pi pi-sign-out"
                                    styleClass="p-button-danger"
                                    action="#{loginBean.logout}"
                                    onclick="PF('logoutDialog').hide();"/>
                </h:form>
            </div>
        </f:facet>
    </p:dialog>

    <!-- SESSION TIMER AUTO-REFRESH
         Intervalle 60s (au lieu de 5s) pour éviter les conflits avec les
         soumissions de formulaires — un poll trop agressif annule les requêtes
         AJAX concurrentes (erreur 499). 60s suffit pour tracker l'activité.
         async="true" permet au poll de ne pas bloquer la queue AJAX PrimeFaces. -->
    <h:form id="sessionTimerForm">
        <p:poll interval="60"
                listener="#{sessionMonitor.updateActivity}"
                update=":sessionTimerDisplay"
                global="false"
                async="true"
                autoStart="true"/>
    </h:form>

</ui:composition>
