import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

type DashboardVariant = 'default' | 'bordered' | 'elevated';
type SidebarWidth = 'sm' | 'md' | 'lg';
type HeaderHeight = 'sm' | 'md' | 'lg';
type FooterVariant = 'minimal' | 'standard' | 'detailed';

@Component({
  selector: 'ui-dashboard-shell',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-dashboard-shell"
      [class.ui-dashboard-shell--sidebar-collapsed]="sidebarCollapsed"
      [class.ui-dashboard-shell--mobile-menu-open]="mobileMenuOpen"
      [class.ui-dashboard-shell--bordered]="variant === 'bordered'"
      [class.ui-dashboard-shell--elevated]="variant === 'elevated'"
      [class.ui-dashboard-shell--no-footer]="!showFooter"
      [attr.role]="role">
      
      <!-- Mobile Backdrop -->
      @if (mobileMenuOpen) {
        <div 
          class="ui-dashboard-shell__mobile-backdrop"
          (click)="handleMobileBackdropClick()"
          role="presentation"
          aria-hidden="true">
        </div>
      }
      
      <!-- Header -->
      <header 
        class="ui-dashboard-shell__header"
        [class.ui-dashboard-shell__header--sm]="headerHeight === 'sm'"
        [class.ui-dashboard-shell__header--md]="headerHeight === 'md'"
        [class.ui-dashboard-shell__header--lg]="headerHeight === 'lg'"
        role="banner">
        
        <!-- Mobile Menu Toggle -->
        <button
          class="ui-dashboard-shell__mobile-toggle"
          (click)="handleMobileToggle()"
          [attr.aria-expanded]="mobileMenuOpen"
          [attr.aria-label]="mobileMenuOpen ? 'Close menu' : 'Open menu'"
          type="button">
          <span class="ui-dashboard-shell__mobile-toggle-icon" aria-hidden="true">
            @if (mobileMenuOpen) {
              ✕
            } @else {
              ☰
            }
          </span>
        </button>
        
        <!-- Header Content -->
        <div class="ui-dashboard-shell__header-content">
          <ng-content select="[slot='header']"></ng-content>
        </div>
        
        <!-- Header Actions (Theme Switcher, Notifications, etc.) -->
        <div class="ui-dashboard-shell__header-actions">
          <ng-content select="[slot='header-actions']"></ng-content>
        </div>
      </header>
      
      <!-- Main Container -->
      <div class="ui-dashboard-shell__container">
        
        <!-- Sidebar -->
        <aside 
          class="ui-dashboard-shell__sidebar"
          [class.ui-dashboard-shell__sidebar--sm]="sidebarWidth === 'sm'"
          [class.ui-dashboard-shell__sidebar--md]="sidebarWidth === 'md'"
          [class.ui-dashboard-shell__sidebar--lg]="sidebarWidth === 'lg'"
          [class.ui-dashboard-shell__sidebar--collapsed]="sidebarCollapsed"
          [attr.aria-hidden]="sidebarCollapsed && !mobileMenuOpen"
          [attr.aria-expanded]="!sidebarCollapsed || mobileMenuOpen"
          role="navigation"
          [attr.aria-label]="sidebarLabel">
          
          <ng-content select="[slot='sidebar']"></ng-content>
        </aside>
        
        <!-- Main Content Area -->
        <main 
          class="ui-dashboard-shell__main"
          role="main"
          [attr.aria-label]="mainContentLabel">
          
          <!-- Breadcrumbs Area -->
          @if (showBreadcrumbs) {
            <nav 
              class="ui-dashboard-shell__breadcrumbs"
              [attr.aria-label]="breadcrumbsLabel"
              role="navigation">
              <ng-content select="[slot='breadcrumbs']"></ng-content>
            </nav>
          }
          
          <!-- Notifications Area -->
          @if (showNotifications) {
            <div 
              class="ui-dashboard-shell__notifications"
              [attr.aria-live]="notificationsLive ? 'polite' : null"
              role="status">
              <ng-content select="[slot='notifications']"></ng-content>
            </div>
          }
          
          <!-- Main Content -->
          <div 
            class="ui-dashboard-shell__content"
            [attr.aria-label]="contentLabel">
            <ng-content></ng-content>
          </div>
        </main>
      </div>
      
      <!-- Footer -->
      @if (showFooter) {
        <footer 
          class="ui-dashboard-shell__footer"
          [class.ui-dashboard-shell__footer--minimal]="footerVariant === 'minimal'"
          [class.ui-dashboard-shell__footer--standard]="footerVariant === 'standard'"
          [class.ui-dashboard-shell__footer--detailed]="footerVariant === 'detailed'"
          role="contentinfo"
          [attr.aria-label]="footerLabel">
          
          <ng-content select="[slot='footer']"></ng-content>
        </footer>
      }
    </div>
  `,
  styleUrl: './dashboard-shell.component.scss'
})
export class DashboardShellComponent {
  @Input() variant: DashboardVariant = 'default';
  @Input() sidebarWidth: SidebarWidth = 'md';
  @Input() headerHeight: HeaderHeight = 'md';
  @Input() footerVariant: FooterVariant = 'standard';
  @Input() sidebarCollapsed = false;
  @Input() mobileMenuOpen = false;
  @Input() showFooter = true;
  @Input() showBreadcrumbs = true;
  @Input() showNotifications = true;
  @Input() notificationsLive = true;
  @Input() enableMobileBackdropClose = true;
  @Input() role = 'application';
  
  // ARIA Labels
  @Input() sidebarLabel = 'Main navigation';
  @Input() mainContentLabel = 'Main content';
  @Input() breadcrumbsLabel = 'Breadcrumb navigation';
  @Input() contentLabel = 'Page content';
  @Input() footerLabel = 'Site footer';
  
  // Events
  @Output() sidebarToggled = new EventEmitter<boolean>();
  @Output() mobileMenuToggled = new EventEmitter<boolean>();
  @Output() mobileBackdropClicked = new EventEmitter<void>();
  
  handleMobileToggle(): void {
    const newState = !this.mobileMenuOpen;
    this.mobileMenuToggled.emit(newState);
  }
  
  handleMobileBackdropClick(): void {
    if (this.enableMobileBackdropClose) {
      this.mobileBackdropClicked.emit();
    }
  }
  
  handleSidebarToggle(): void {
    const newState = !this.sidebarCollapsed;
    this.sidebarToggled.emit(newState);
  }
}