import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, signal, ViewChild } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
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';
import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
import { AgentCardData } from '../../models/agent.model';

/**
 * 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).
 * CUB-26: Hosts the Agent Session Drawer for quick-jump navigation.
 */
@Component({
  selector: 'app-layout-shell',
  standalone: true,
  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent, AgentSessionDrawerComponent],
  templateUrl: './layout-shell.component.html',
  styleUrl: './layout-shell.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutShellComponent implements OnDestroy {
  @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;

  /** Whether the viewport is mobile-sized. */
  readonly isMobile = signal(false);

  private readonly breakpointSub: Subscription;

  constructor(
    private readonly breakpointObserver: BreakpointObserver,
    private readonly router: Router,
  ) {
    this.breakpointSub = this.breakpointObserver
      .observe([Breakpoints.Handset, Breakpoints.Small])
      .subscribe((result) => {
        this.isMobile.set(result.matches);
      });
  }

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

  /** Open the session drawer for a specific agent. */
  openSessionDrawer(agent: AgentCardData): void {
    this.sessionDrawer?.open(agent);
  }

  /** Open the session log page directly (long-press bypass). */
  openSessionLog(sessionKey: string): void {
    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
  }

  /** Handle "Open Full Session" action from session drawer. */
  onOpenSession(sessionKey: string): void {
    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
  }

  /** Handle "Pin to Dashboard" action from session drawer. */
  onPinToDashboard(sessionKey: string): void {
    // TODO: Implement pin-to-dashboard logic
    console.log('[LayoutShell] Pin to dashboard:', sessionKey);
  }

  /** 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();
    }
  }

  ngOnDestroy(): void {
    this.breakpointSub.unsubscribe();
  }
}