import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatChipsModule } from '@angular/material/chips';
import { MatBadgeModule } from '@angular/material/badge';
import { NAV_DESTINATIONS } from '../../models/nav.model';

/**
 * Adaptive Navigation Component — switches between desktop sidebar
 * and mobile header layouts using CSS media queries.
 *
 * Desktop (≥768px): 72px sidebar with full navigation items.
 * Mobile (<768px):  56px compact header with hamburger menu.
 *
 * The LIVE status indicator is visible in both layouts.
 * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
 */
@Component({
  selector: 'app-adaptive-navigation',
  standalone: true,
  imports: [
    RouterLink,
    RouterLinkActive,
    MatIconModule,
    MatButtonModule,
    MatChipsModule,
    MatBadgeModule,
  ],
  templateUrl: './adaptive-navigation.component.html',
  styleUrl: './adaptive-navigation.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AdaptiveNavigationComponent {
  /** Navigation destinations shared with other nav components */
  protected readonly destinations = NAV_DESTINATIONS;

  /** Whether the mobile drawer is open */
  protected readonly mobileMenuOpen = signal(false);

  /** Live connection status */
  protected readonly isConnected = signal(true);

  /** Toggle mobile menu */
  toggleMobileMenu(): void {
    this.mobileMenuOpen.update((v) => !v);
  }

  /** Close mobile menu (e.g. on nav) */
  closeMobileMenu(): void {
    this.mobileMenuOpen.set(false);
  }
}