<header class="topbar fixed top-0 end-0 h-16 bg-white/95 backdrop-blur-sm border-b border-surface-border
               flex items-center justify-between px-4 z-[1001] shadow-[0_1px_4px_rgba(0,0,0,0.06)]
               transition-[inset-inline-start] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
        [style.inset-inline-start.px]="sidebarWidth()">

  <!-- Start: Logo + Navigation -->
  <div class="flex items-center gap-0.5">
    @if (logoDataUrl(); as logo) {
      <img [src]="logo" alt="Logo" class="h-8 w-8 object-contain rounded me-2" />
    }

    <!-- Dashboard -->
    <a routerLink="/dashboard"
       class="topbar-nav-btn"
       [class.active]="isActiveRoute('/dashboard')"
       [pTooltip]="'NAV.DASHBOARD' | translate"
       tooltipPosition="bottom">
      <i class="pi pi-th-large"></i>
      <span class="btn-label">{{ 'NAV.DASHBOARD' | translate }}</span>
    </a>

    <!-- Module Dropdowns (mega-menu) -->
    @if (themeService.showMegaMenu()) {
    @for (mod of filteredModules(); track mod.id) {
      <div class="topbar-module"
           (mouseenter)="onModuleEnter(mod.id)"
           (mouseleave)="onModuleLeave()">
        <button class="topbar-nav-btn"
                [class.active]="isInModule(mod) || openModule() === mod.id"
                (click)="openModule() === mod.id ? closeMegaMenu() : onModuleEnter(mod.id)">
          <i [class]="mod.icon"></i>
          <span class="btn-label">{{ mod.label | translate }}</span>
          <i class="pi pi-chevron-down chevron-icon" [class.open]="openModule() === mod.id"></i>
        </button>

        @if (openModule() === mod.id) {
          <!-- Backdrop -->
          <div class="mega-backdrop" (click)="closeMegaMenu()"></div>
          <!-- Mega-menu panel -->
          <div class="mega-panel"
               [style.inset-inline-start.px]="-(sidebarWidth())"
               (mouseenter)="onMenuEnter()"
               (mouseleave)="onMenuLeave()">
            <div class="mega-grid">
              @for (group of getModuleGroups(mod.id); track group.label) {
                <div class="mega-group">
                  <div class="mega-group-title">
                    {{ group.label | translate }}
                  </div>
                  @for (item of group.items; track item.route) {
                    <a class="mega-item"
                       [class.active]="isActiveRoute(item.route)"
                       (click)="navigateTo(item.route)">
                      <i [class]="item.icon"></i>
                      <span>{{ item.label | translate }}</span>
                    </a>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    }
    }
  </div>

  <!-- End: Actions -->
  <div class="flex items-center gap-2">
    <!-- Notifications -->
    <button
      class="topbar-action-btn"
      (click)="notPanel.toggle($event); loadNotifications()"
      [pTooltip]="'TOPBAR.NOTIFICATIONS' | translate"
      tooltipPosition="bottom"
    >
      <i class="pi pi-bell text-[1.1rem]" pBadge [value]="unreadCount() + ''" [severity]="unreadCount() > 0 ? 'danger' : 'secondary'"></i>
    </button>

    <p-popover #notPanel>
      <div class="min-w-[320px] max-h-[400px] overflow-y-auto">
        <div class="flex items-center justify-between p-3 pb-2">
          <h4 class="m-0 text-base text-text-primary font-bold">{{ 'TOPBAR.NOTIFICATIONS' | translate }}</h4>
          @if (unreadCount() > 0) {
            <button class="text-xs text-accent bg-transparent border-0 cursor-pointer font-semibold hover:underline" (click)="markAllRead()">
              {{ 'TOPBAR.MARK_ALL_READ' | translate }}
            </button>
          }
        </div>
        @if (notifications().length === 0) {
          <p class="text-center text-text-muted py-6 text-sm">{{ 'TOPBAR.NO_NOTIFICATIONS' | translate }}</p>
        } @else {
          @for (n of notifications(); track n.id) {
            <div
              class="px-3 py-2.5 border-b border-surface-border cursor-pointer hover:bg-surface-hover transition-colors"
              [class.bg-accent/5]="!n.read_at"
              (click)="markRead(n)"
            >
              <p class="m-0 text-sm text-text-primary" [class.font-bold]="!n.read_at">{{ n.data.message }}</p>
              <small class="text-text-muted text-xs">{{ n.created_at | date:'short' }}</small>
            </div>
          }
        }
      </div>
    </p-popover>

    <!-- Module nav toggle -->
    <button
      class="topbar-action-btn"
      (click)="themeService.toggleModuleNav()"
      [pTooltip]="(themeService.showModuleNav() ? 'NAV.HIDE_NAV' : 'NAV.SHOW_NAV') | translate"
      tooltipPosition="bottom"
    >
      <i class="pi" [class.pi-objects-column]="!themeService.showModuleNav()" [class.pi-eye-slash]="themeService.showModuleNav()" style="font-size:1rem;"></i>
    </button>

    <!-- Language toggle -->
    <button
      class="topbar-action-btn px-3 font-bold text-[0.8rem]"
      (click)="toggleLang()"
      [pTooltip]="'TOPBAR.LANGUAGE' | translate"
      tooltipPosition="bottom"
    >
      {{ langService.currentLang() === 'ar' ? 'EN' : 'عربي' }}
    </button>

    <!-- Divider -->
    <div class="w-px h-8 bg-surface-border mx-0.5"></div>

    <!-- Profile -->
    <div class="flex items-center gap-2 cursor-pointer py-1.5 px-2 rounded-xl ms-0.5
                hover:bg-surface-hover transition-colors duration-200"
         (click)="profilePanel.toggle($event)">
      <div class="w-[34px] h-[34px] rounded-full bg-gradient-to-br from-accent to-accent-dark
                  flex items-center justify-center shadow-sm shadow-accent/25
                  ring-2 ring-accent/20">
        <i class="pi pi-user text-brand text-[0.8rem] font-bold"></i>
      </div>
      @if (user$ | async; as user) {
        <span class="font-bold text-[0.85rem] text-text-primary hidden lg:inline">{{ user.name }}</span>
      }
      <i class="pi pi-chevron-down text-[0.55rem] text-text-muted"></i>
    </div>

    <p-popover #profilePanel>
      <div class="min-w-[250px]">
        @if (user$ | async; as user) {
          <div class="flex items-center gap-3 p-4 bg-brand/[0.03] rounded-xl m-2 mb-0">
            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent-dark
                        flex items-center justify-center shadow-sm shadow-accent/25">
              <i class="pi pi-user text-brand text-[1.1rem] font-bold"></i>
            </div>
            <div class="flex flex-col">
              <strong class="text-sm text-text-primary font-bold">{{ user.name }}</strong>
              <small class="text-text-muted text-xs">{{ user.email }}</small>
            </div>
          </div>
          <hr class="border-0 border-t border-surface-border my-2 mx-2" />
        }
        <a class="flex items-center gap-3 py-2.5 px-4 mx-1 rounded-xl text-text-secondary no-underline
                  cursor-pointer text-[0.88rem] hover:bg-accent/8 hover:text-accent transition-all duration-200 font-medium"
           routerLink="/profile">
          <i class="pi pi-user text-base w-5 text-center"></i>
          <span>{{ 'TOPBAR.PROFILE' | translate }}</span>
        </a>
        @if (showSettings()) {
          <a class="flex items-center gap-3 py-2.5 px-4 mx-1 rounded-xl text-text-secondary no-underline
                    cursor-pointer text-[0.88rem] hover:bg-accent/8 hover:text-accent transition-all duration-200 font-medium"
             routerLink="/core/settings">
            <i class="pi pi-cog text-base w-5 text-center"></i>
            <span>{{ 'NAV.SETTINGS' | translate }}</span>
          </a>
        }
        <a class="flex items-center gap-3 py-2.5 px-4 mx-1 rounded-xl text-text-secondary no-underline
                  cursor-pointer text-[0.88rem] hover:bg-accent/8 hover:text-accent transition-all duration-200 font-medium"
           routerLink="/core/theme">
          <i class="pi pi-palette text-base w-5 text-center"></i>
          <span>{{ 'THEME.TITLE' | translate }}</span>
        </a>
        <hr class="border-0 border-t border-surface-border my-2 mx-2" />
        <a class="flex items-center gap-3 py-2.5 px-4 mx-1 mb-1 rounded-xl text-danger no-underline
                  cursor-pointer text-[0.88rem] hover:bg-red-50 hover:text-red-700 transition-all duration-200 font-medium"
           (click)="logout()">
          <i class="pi pi-sign-out text-base w-5 text-center"></i>
          <span>{{ 'AUTH.LOGOUT' | translate }}</span>
        </a>
      </div>
    </p-popover>
  </div>
</header>
