<nav class="navbar">
  <div class="container-fluid">
    <span class="navbar-brand">NowChess</span>
    <div class="ms-auto">
      <div class="d-flex align-items-center gap-2">
        <!-- Challenge Notification Badge -->
        <div class="notification-container">
          <button type="button" class="notification-badge" (click)="toggleNotificationMenu()"
            [class.has-notifications]="incomingChallenges.length > 0" title="View challenges">
            🔔
            <span *ngIf="incomingChallenges.length > 0" class="badge">
              {{ incomingChallenges.length }}
            </span>
          </button>

          <!-- Notification Menu Dropdown -->
          @if (showNotificationMenu && incomingChallenges.length > 0) {
          <div class="notification-menu" (click)="$event.stopPropagation()">
            <div class="notification-menu-header">
              Challenges
              <button type="button" class="close-btn" (click)="closeNotificationMenu()">×</button>
            </div>
            <div class="notification-list">
              <div *ngFor="let challenge of incomingChallenges" class="notification-item">
                {{ challenge.challenger.name }}
              </div>
            </div>
            <div class="notification-menu-footer">
              <button type="button" class="view-all-btn" (click)="goToChallenges()">
                View All Challenges →
              </button>
            </div>
          </div>
          }
        </div>

        <button type="button" class="app-btn" (click)="toggleTheme()">
          {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
        </button>
        @if (currentUser; as user) {
        <div class="d-flex align-items-center gap-2 user-section">
          <button type="button" class="me-btn" (click)="goToProfile()">
            👤 {{ user.username }}
          </button>
          <button type="button" class="app-btn" (click)="goToChallenges()">
            Challenges
          </button>
          <button type="button" class="app-btn" (click)="logout()">Logout</button>
        </div>
        } @else {
        <button type="button" class="app-btn" (click)="openLoginDialog()">
          Login
        </button>
        <button type="button" class="app-btn" (click)="openRegisterDialog()">
          Register
        </button>
        }
      </div>
    </div>
  </div>
</nav>

<!-- Challenge Notification Popup -->
@if (displayedChallenge) {
<app-challenge-notification [challenge]="displayedChallenge" (accept)="onChallengeAccepted($event)"
  (decline)="onChallengeDeclined($event)" (close)="onNotificationClose()" />
}

@if (showLoginDialog) {
<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
}

@if (showRegisterDialog) {
<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
}