import { Component, DestroyRef, inject, computed, OnInit } from '@angular/core';
import { CommonModule, UpperCasePipe } from '@angular/common';
import { RouterLink, RouterLinkActive, Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

import { AuthService } from '../services/auth.service';
import { StationConfigService } from '../services/station-config.service';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [CommonModule, UpperCasePipe, RouterLink, RouterLinkActive],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.scss',
})
export class NavbarComponent implements OnInit {
  private auth = inject(AuthService);
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);
  private stationConfigService = inject(StationConfigService);

  readonly config = computed(() => this.stationConfigService.config());

  menuOpen = false;

  isLoggedIn = false;
  isAdmin = false;
  displayName = '';

  ngOnInit(): void {
    // Subscribe to auth state — drives all three properties from a single source.
    // isLoggedIn and isAdmin are derived from the user object, not from separate
    // checks (localStorage vs BehaviorSubject), eliminating a race condition where
    // the token exists but the /me call hasn't returned yet.
    this.auth.authState$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
      this.isLoggedIn = !!user;
      this.isAdmin = user?.is_admin ?? false;
      this.displayName = user?.display_name ?? '';
    });
  }

  toggleMenu(): void {
    this.menuOpen = !this.menuOpen;
  }

  closeMenu(): void {
    this.menuOpen = false;
  }

  onLogout(): void {
    this.auth.logout();
    this.router.navigate(['/']);
  }
}