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

type EmptyStateSize = 'sm' | 'md' | 'lg';
type EmptyStateVariant = 'default' | 'search' | 'error' | 'loading' | 'success';

@Component({
  selector: 'ui-empty-state',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-empty-state"
      [class]="getComponentClasses()"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel">
      
      @if (icon || variant === 'loading') {
        <div class="ui-empty-state__icon" [attr.aria-hidden]="true">
          @if (variant === 'loading') {
            <div class="ui-empty-state__spinner"></div>
          } @else if (icon) {
            <span [innerHTML]="icon"></span>
          }
        </div>
      }
      
      @if (title) {
        <h3 class="ui-empty-state__title">{{ title }}</h3>
      }
      
      @if (description) {
        <p class="ui-empty-state__description">{{ description }}</p>
      }
      
      <div class="ui-empty-state__content">
        <ng-content></ng-content>
      </div>
      
      @if (actionLabel) {
        <div class="ui-empty-state__actions">
          <button 
            type="button"
            class="ui-empty-state__action"
            (click)="handleAction($event)"
            [disabled]="disabled">
            {{ actionLabel }}
          </button>
        </div>
      }
    </div>
  `,
  styleUrl: './empty-state.component.scss'
})
export class EmptyStateComponent {
  @Input() size: EmptyStateSize = 'md';
  @Input() variant: EmptyStateVariant = 'default';
  @Input() icon = '';
  @Input() title = '';
  @Input() description = '';
  @Input() actionLabel = '';
  @Input() disabled = false;
  @Input() role = 'region';
  @Input() ariaLabel = 'Empty state';
  
  @Output() action = new EventEmitter<MouseEvent>();
  
  getComponentClasses(): string {
    const classes = [
      'ui-empty-state',
      `ui-empty-state--${this.size}`,
      `ui-empty-state--${this.variant}`
    ];
    
    return classes.join(' ');
  }
  
  handleAction(event: MouseEvent): void {
    if (!this.disabled) {
      this.action.emit(event);
    }
  }
}