<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">

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

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

    <div class="layout-topbar lions-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="/pages/user-manager/dashboard" styleClass="layout-topbar-logo">
                    <p:graphicImage
                        name="images/#{guestPreferences.lightLogo ? 'logo-freya-white.svg' : 'logo-freya.svg'}"
                        library="freya-layout" alt="Lions User Manager" title="Retour au tableau de bord" />
                </h:link>
                <span class="app-version">v2.0</span>
            </div>

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

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

                    <!-- Quick Actions -->
                    <li class="topbar-item">
                        <a href="#" title="Actions rapides">
                            <i class="topbar-icon pi pi-bolt" />
                        </a>
                    </li>

                    <!-- Notifications -->
                    <li class="topbar-item notifications-item">
                        <a href="#" title="Notifications">
                            <i class="topbar-icon pi pi-bell" />
                            <span class="badge-count">5</span>
                        </a>
                        <ul class="notifications-dropdown">
                            <li class="notif-header">
                                <span class="font-semibold">Notifications</span>
                                <span class="count-label">5 nouvelles</span>
                            </li>
                            <li class="divider" />
                            <li class="notif-item">
                                <i class="pi pi-user-plus text-blue-500" />
                                <div>
                                    <div class="notif-title">Nouvel utilisateur</div>
                                    <div class="notif-time">Il y a 2 min</div>
                                </div>
                            </li>
                            <li class="notif-item">
                                <i class="pi pi-check-circle text-green-500" />
                                <div>
                                    <div class="notif-title">Rôle assigné</div>
                                    <div class="notif-time">Il y a 15 min</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">
                                    #{userSessionBean.initials}
                                </div>
                                <span class="status-dot online" />
                            </div>

                            <div class="user-info">
                                <div class="user-header">
                                    <span class="user-name">#{userSessionBean.fullName}</span>
                                    <span class="role-badge">#{userSessionBean.primaryRole}</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">
                                            #{userSessionBean.initials}
                                        </div>
                                        <span class="status-indicator online">
                                            <i class="pi pi-circle-fill" />
                                        </span>
                                    </div>
                                    <div class="header-info">
                                        <div class="name">#{userSessionBean.fullName}</div>
                                        <div class="email">#{userSessionBean.email}</div>
                                        <span class="role-tag">#{userSessionBean.primaryRole}</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-server" />
                                            Système
                                        </span>
                                        <span class="value">Lions Platform</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:link outcome="/pages/user-manager/users/profile" styleClass="menu-item">
                                        <i class="pi pi-user-edit" />
                                        <span>Mon Profil</span>
                                        <i class="pi pi-angle-right arrow-right" />
                                    </h:link>

                                    <h:link outcome="/pages/user-manager/settings" styleClass="menu-item">
                                        <i class="pi pi-cog" />
                                        <span>Paramètres</span>
                                        <i class="pi pi-angle-right arrow-right" />
                                    </h:link>

                                    <a href="#" class="menu-item">
                                        <i class="pi pi-shield" />
                                        <span>Sécurité</span>
                                        <i class="pi pi-angle-right arrow-right" />
                                    </a>
                                </div>
                            </li>

                            <li class="divider" />

                            <!-- System -->
                            <li class="menu-section">
                                <div class="section-title">
                                    <i class="pi pi-cog" />
                                    Système
                                </div>
                                <div class="section-items">
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-users" />
                                        <span>Utilisateurs</span>
                                        <span class="item-badge">12</span>
                                        <i class="pi pi-angle-right arrow-right" />
                                    </a>
                                    <a href="#" class="menu-item">
                                        <i class="pi pi-key" />
                                        <span>Rôles &amp; Permissions</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>Documentation</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>#{userSessionBean.fullName}</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="#{userSessionBean.logout}" onclick="PF('logoutDialog').hide();" />
                </h:form>
            </div>
        </f:facet>
    </p:dialog>

    <!-- SESSION TIMER AUTO-REFRESH -->
    <h:form id="sessionTimerForm">
        <p:poll interval="5" listener="#{sessionMonitor.updateActivity}" update=":sessionTimerDisplay" global="false"
            autoStart="true" />
    </h:form>

</ui:composition>