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

type SidebarPosition = 'left' | 'right';
type SidebarWidth = 'sm' | 'md' | 'lg' | 'xl';
type SidebarVariant = 'default' | 'bordered' | 'elevated';
type CollapseMode = 'hidden' | 'collapsed' | 'overlay';

@Component({
  selector: 'ui-sidebar-layout',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-sidebar-layout"
      [class.ui-sidebar-layout--position-right]="position === 'right'"
      [class.ui-sidebar-layout--collapsed]="collapsed"
      [class.ui-sidebar-layout--overlay]="collapseMode === 'overlay'"
      [class.ui-sidebar-layout--hidden]="collapseMode === 'hidden' && collapsed"
      [class.ui-sidebar-layout--bordered]="variant === 'bordered'"
      [class.ui-sidebar-layout--elevated]="variant === 'elevated'"
      [attr.role]="role">
      
      <aside 
        class="ui-sidebar-layout__sidebar"
        [class.ui-sidebar-layout__sidebar--sm]="sidebarWidth === 'sm'"
        [class.ui-sidebar-layout__sidebar--md]="sidebarWidth === 'md'"
        [class.ui-sidebar-layout__sidebar--lg]="sidebarWidth === 'lg'"
        [class.ui-sidebar-layout__sidebar--xl]="sidebarWidth === 'xl'"
        [class.ui-sidebar-layout__sidebar--collapsed]="collapsed"
        [attr.aria-hidden]="collapsed && collapseMode === 'hidden'"
        [attr.aria-expanded]="!collapsed"
        role="complementary">
        
        <ng-content select="[slot='sidebar']"></ng-content>
      </aside>
      
      @if (collapseMode === 'overlay' && !collapsed) {
        <div 
          class="ui-sidebar-layout__backdrop"
          (click)="handleBackdropClick()"
          role="presentation"
          aria-hidden="true">
        </div>
      }
      
      <main 
        class="ui-sidebar-layout__content"
        [attr.aria-label]="contentLabel"
        role="main">
        
        <ng-content></ng-content>
      </main>
    </div>
  `,
  styleUrl: './sidebar-layout.component.scss'
})
export class SidebarLayoutComponent {
  @Input() position: SidebarPosition = 'left';
  @Input() sidebarWidth: SidebarWidth = 'md';
  @Input() variant: SidebarVariant = 'default';
  @Input() collapsed = false;
  @Input() collapseMode: CollapseMode = 'collapsed';
  @Input() role = 'application';
  @Input() contentLabel = 'Main content';
  @Input() enableBackdropClose = true;
  
  handleBackdropClick(): void {
    if (this.enableBackdropClose && this.collapseMode === 'overlay') {
      // In a real implementation, this would emit an event
      // For demo purposes, we'll just log
      console.log('Backdrop clicked - sidebar should close');
    }
  }
}