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

type SpinnerSize = 'sm' | 'md' | 'lg';
type SpinnerVariant = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
type SpinnerType = 'spin' | 'dots' | 'pulse' | 'bars';
type SpinnerSpeed = 'slow' | 'normal' | 'fast';

@Component({
  selector: 'ui-loading-spinner',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-loading-spinner"
      [class]="getComponentClasses()"
      [attr.aria-label]="ariaLabel || defaultAriaLabel"
      [attr.aria-busy]="!disabled"
      [attr.role]="role"
      [tabindex]="disabled ? -1 : tabIndex"
      (click)="handleClick($event)"
      (keydown)="handleKeydown($event)">
      
      <!-- Screen reader text -->
      <span class="ui-loading-spinner__sr-only">
        {{ srText || defaultSrText }}
      </span>
      
      <!-- Spinner variants -->
      @switch (type) {
        @case ('spin') {
          <div class="ui-loading-spinner__spin"></div>
        }
        
        @case ('dots') {
          <div class="ui-loading-spinner__dots">
            <div class="ui-loading-spinner__dot"></div>
            <div class="ui-loading-spinner__dot"></div>
            <div class="ui-loading-spinner__dot"></div>
          </div>
        }
        
        @case ('pulse') {
          <div class="ui-loading-spinner__pulse"></div>
        }
        
        @case ('bars') {
          <div class="ui-loading-spinner__bars">
            <div class="ui-loading-spinner__bar"></div>
            <div class="ui-loading-spinner__bar"></div>
            <div class="ui-loading-spinner__bar"></div>
          </div>
        }
      }
      
      <!-- Optional label -->
      @if (label && showLabel) {
        <span class="ui-loading-spinner__label">{{ label }}</span>
      }
    </div>
  `,
  styleUrl: './loading-spinner.component.scss'
})
export class LoadingSpinnerComponent {
  @Input() size: SpinnerSize = 'md';
  @Input() variant: SpinnerVariant = 'primary';
  @Input() type: SpinnerType = 'spin';
  @Input() speed: SpinnerSpeed = 'normal';
  @Input() disabled = false;
  @Input() label = '';
  @Input() showLabel = false;
  @Input() role = 'status';
  @Input() tabIndex = 0;
  @Input() ariaLabel = '';
  @Input() srText = '';
  
  @Output() clicked = new EventEmitter<MouseEvent>();
  
  getComponentClasses(): string {
    const classes = [
      'ui-loading-spinner',
      `ui-loading-spinner--${this.size}`,
      `ui-loading-spinner--${this.variant}`,
      `ui-loading-spinner--${this.type}`
    ];
    
    if (this.speed !== 'normal') {
      classes.push(`ui-loading-spinner--${this.speed}`);
    }
    
    if (this.disabled) {
      classes.push('ui-loading-spinner--disabled');
    }
    
    return classes.join(' ');
  }
  
  get defaultAriaLabel(): string {
    if (this.ariaLabel) return this.ariaLabel;
    return this.label ? `Loading: ${this.label}` : 'Loading';
  }
  
  get defaultSrText(): string {
    if (this.srText) return this.srText;
    return this.label ? `Loading ${this.label}...` : 'Loading...';
  }
  
  handleClick(event: MouseEvent): void {
    if (!this.disabled) {
      this.clicked.emit(event);
    }
  }
  
  handleKeydown(event: KeyboardEvent): void {
    // Allow keyboard interaction if the spinner is interactive
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.handleClick(event as any);
    }
  }
}