<!-- Shared Layout: Sidebar + Main Content -->
<div class="app-layout" [class.sidebar-open]="mobileSidebarOpen">

  <!-- Mobile Top Bar -->
  <header class="mobile-header">
    <button class="mobile-menu-btn" (click)="toggleMobileSidebar()">
      <span class="material-symbols-rounded">menu</span>
    </button>
    <span class="mobile-logo">
      <span class="material-symbols-rounded filled">quiz</span>
      QuizMaster
    </span>
    <div class="mobile-actions">
      <button class="icon-btn" (click)="toggleThemeMenu()">
        <span class="material-symbols-rounded">
          {{ themeService.currentTheme() === 'light' ? 'light_mode' : themeService.currentTheme() === 'dark' ? 'dark_mode' : 'water' }}
        </span>
      </button>
    </div>
  </header>

  <!-- Sidebar Overlay (mobile) -->
  <div class="sidebar-overlay" (click)="toggleMobileSidebar()"></div>

  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-inner">
      <!-- Logo -->
      <div class="sidebar-header">
        <div class="logo">
          <span class="material-symbols-rounded filled logo-icon">quiz</span>
          <span class="logo-text">QuizMaster</span>
        </div>
        <span class="badge" [ngClass]="roleBadge().class">{{ roleBadge().label }}</span>
      </div>

      <!-- Navigation -->
      <nav class="sidebar-nav">
        @for (item of navItems(); track item.route) {
          @if (item.route === '/admin/users' || item.route === '/hr/candidates') {
            <a class="nav-item" (click)="handleNavClick(item, $event)" href="javascript:void(0)"
               [class.active]="router.url.includes('/admin/users') || router.url.includes('/hr/candidates') || router.url.includes('manage-groups')">
              <span class="material-symbols-rounded nav-icon">{{ item.icon }}</span>
              <span class="nav-label">{{ item.label }}</span>
            </a>
          } @else {
            <a [routerLink]="item.route"
               routerLinkActive="active"
               [routerLinkActiveOptions]="{exact: item.route.includes('dashboard')}"
               class="nav-item"
               (click)="mobileSidebarOpen = false">
              <span class="material-symbols-rounded nav-icon">{{ item.icon }}</span>
              <span class="nav-label">{{ item.label }}</span>
            </a>
          }
        }
      </nav>

      <!-- Theme Switcher -->
      <div class="sidebar-section">
        <div class="section-label">Theme</div>
        <div class="theme-switcher">
          @for (t of themes; track t.id) {
            <button
              class="theme-btn"
              [class.active]="themeService.currentTheme() === t.id"
              (click)="setTheme(t.id)"
              [title]="t.label">
              <span class="material-symbols-rounded">{{ t.icon }}</span>
            </button>
          }
        </div>
      </div>

      <!-- User Footer -->
      <div class="sidebar-footer">
        <div class="user-card">
          <div class="user-avatar">{{ userInitial() }}</div>
          <div class="user-info">
            <span class="user-name">{{ authService.currentUser()?.name }}</span>
            <span class="user-email">{{ authService.currentUser()?.email }}</span>
          </div>
        </div>
        <button class="logout-btn" (click)="logout()">
          <span class="material-symbols-rounded">logout</span>
          <span>Sign Out</span>
        </button>
      </div>
    </div>
  </aside>

  <!-- Main Content Area -->
  <main class="main-content">
    <router-outlet />
  </main>
</div>

<!-- Manage Users Glassy Popup -->
@if (uiService.showManageUsersPopup()) {
  <div class="glassy-overlay" (click)="closeManageUsersPopup()">
    <div class="glassy-modal animate-fade-in" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>Manage Users & Groups</h2>
        <button class="close-btn" (click)="closeManageUsersPopup()">
          <span class="material-symbols-rounded">close</span>
        </button>
      </div>
      
      <div class="modal-options">
        <a [routerLink]="getUsersRoute()" class="glassy-option" (click)="closeManageUsersPopup()">
          <div class="option-icon-wrapper">
            <span class="material-symbols-rounded block-icon">people</span>
          </div>
          <div class="option-text">
            <h3>Student Users</h3>
            <p>Review and manage candidate profiles and test histories</p>
          </div>
          <span class="material-symbols-rounded arrow-icon">arrow_forward</span>
        </a>
        
        <a [routerLink]="getManageGroupsRoute()" class="glassy-option" (click)="closeManageUsersPopup()">
          <div class="option-icon-wrapper">
            <span class="material-symbols-rounded block-icon">group_add</span>
          </div>
          <div class="option-text">
            <h3>Manage Groups</h3>
            <p>Create and structure student categorization effectively</p>
          </div>
          <span class="material-symbols-rounded arrow-icon">arrow_forward</span>
        </a>
        
        @if (authService.getUserRole() === 'admin') {
          <a routerLink="/admin/hr-users" class="glassy-option" (click)="closeManageUsersPopup()">
            <div class="option-icon-wrapper">
              <span class="material-symbols-rounded block-icon">assignment_ind</span>
            </div>
            <div class="option-text">
              <h3>HR Users</h3>
              <p>Manage HR staff platform access</p>
            </div>
            <span class="material-symbols-rounded arrow-icon">arrow_forward</span>
          </a>
        }
      </div>
    </div>
  </div>
}
