import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavRailComponent } from '../nav-rail/nav-rail.component';
import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
import { HeaderBarComponent } from '../header-bar/header-bar.component';
import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';

/**
 * Layout Shell — wraps the main content area with adaptive navigation.
 * Desktop/Kiosk: Nav Rail (left) + Header + Content
 * Mobile: Header + Content + Bottom Nav
 * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
 */
@Component({
  selector: 'app-layout-shell',
  standalone: true,
  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
  templateUrl: './layout-shell.component.html',
  styleUrl: './layout-shell.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutShellComponent {
  @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;

  /** Open the quick-jump drawer from anywhere in the layout. */
  openQuickJump(): void {
    this.quickJumpDrawer?.open();
  }

  /** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
  @HostListener('document:keydown', ['$event'])
  onGlobalKeydown(event: KeyboardEvent): void {
    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
      event.preventDefault();
      this.quickJumpDrawer?.toggle();
    }
  }
}