import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

type PanePosition = 'left' | 'right';
type PaneSize = 'sm' | 'md' | 'lg' | 'xl';
type PaneVariant = 'default' | 'bordered' | 'elevated' | 'subtle';

@Component({
  selector: 'ui-supporting-pane-layout',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-supporting-pane-layout"
      [class.ui-supporting-pane-layout--position-right]="position === 'right'"
      [class.ui-supporting-pane-layout--collapsed]="collapsed"
      [class.ui-supporting-pane-layout--sticky-pane]="stickyPane"
      [class.ui-supporting-pane-layout--always-visible]="alwaysVisible"
      [class.ui-supporting-pane-layout--bordered]="variant === 'bordered'"
      [class.ui-supporting-pane-layout--elevated]="variant === 'elevated'"
      [class.ui-supporting-pane-layout--subtle]="variant === 'subtle'"
      [class.ui-supporting-pane-layout--sm]="paneSize === 'sm'"
      [class.ui-supporting-pane-layout--md]="paneSize === 'md'"
      [class.ui-supporting-pane-layout--lg]="paneSize === 'lg'"
      [class.ui-supporting-pane-layout--xl]="paneSize === 'xl'"
      [attr.role]="role">
      
      <!-- Main Content -->
      <main 
        class="ui-supporting-pane-layout__content"
        [attr.aria-label]="contentLabel"
        role="main">
        
        <ng-content></ng-content>
      </main>
      
      <!-- Supporting Pane -->
      <aside 
        class="ui-supporting-pane-layout__pane"
        [class.ui-supporting-pane-layout__pane--collapsed]="collapsed"
        [attr.aria-hidden]="collapsed"
        [attr.aria-expanded]="!collapsed"
        [attr.aria-label]="paneLabel"
        role="complementary">
        
        <!-- Pane Header (optional) -->
        @if (showPaneHeader) {
          <header class="ui-supporting-pane-layout__pane-header">
            @if (!collapsed) {
              <ng-content select="[slot='pane-header']"></ng-content>
            }
            
            @if (collapsible) {
              <button
                class="ui-supporting-pane-layout__pane-toggle"
                type="button"
                [attr.aria-label]="collapsed ? expandAriaLabel : collapseAriaLabel"
                [attr.aria-expanded]="!collapsed"
                (click)="handleTogglePane()"
                (keydown)="handleToggleKeydown($event)">
                
                <fa-icon 
                  [icon]="position === 'right' ? faChevronRight : faChevronLeft"
                  class="fa-icon"
                  aria-hidden="true">
                </fa-icon>
              </button>
            }
          </header>
        }
        
        <!-- Pane Content -->
        <div class="ui-supporting-pane-layout__pane-content">
          <ng-content select="[slot='supporting-pane']"></ng-content>
        </div>
        
        <!-- Pane Footer (optional) -->
        @if (showPaneFooter && !collapsed) {
          <footer class="ui-supporting-pane-layout__pane-footer">
            <ng-content select="[slot='pane-footer']"></ng-content>
          </footer>
        }
      </aside>
    </div>
  `,
  styleUrl: './supporting-pane-layout.component.scss'
})
export class SupportingPaneLayoutComponent {
  @Input() position: PanePosition = 'right';
  @Input() paneSize: PaneSize = 'md';
  @Input() variant: PaneVariant = 'default';
  @Input() collapsed = false;
  @Input() collapsible = true;
  @Input() stickyPane = false;
  @Input() alwaysVisible = false;
  @Input() showPaneHeader = true;
  @Input() showPaneFooter = false;
  @Input() role = 'application';
  @Input() contentLabel = 'Main content';
  @Input() paneLabel = 'Supporting information';
  @Input() collapseAriaLabel = 'Collapse supporting pane';
  @Input() expandAriaLabel = 'Expand supporting pane';
  
  @Output() paneToggled = new EventEmitter<boolean>();
  @Output() paneCollapsed = new EventEmitter<void>();
  @Output() paneExpanded = new EventEmitter<void>();
  
  // FontAwesome icons
  faChevronLeft = faChevronLeft;
  faChevronRight = faChevronRight;
  
  handleTogglePane(): void {
    if (!this.collapsible) return;
    
    const newCollapsedState = !this.collapsed;
    this.collapsed = newCollapsedState;
    
    // Emit events
    this.paneToggled.emit(newCollapsedState);
    
    if (newCollapsedState) {
      this.paneCollapsed.emit();
    } else {
      this.paneExpanded.emit();
    }
  }
  
  handleToggleKeydown(event: KeyboardEvent): void {
    // Support Enter and Space keys for accessibility
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.handleTogglePane();
    }
  }
  
  /**
   * Programmatically collapse the pane
   */
  collapsePane(): void {
    if (!this.collapsed && this.collapsible) {
      this.handleTogglePane();
    }
  }
  
  /**
   * Programmatically expand the pane
   */
  expandPane(): void {
    if (this.collapsed && this.collapsible) {
      this.handleTogglePane();
    }
  }
  
  /**
   * Get current pane state
   */
  isPaneCollapsed(): boolean {
    return this.collapsed;
  }
}