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

type BentoGridItemSpan = 1 | 2 | 3 | 4 | 'full' | "1" | "2" | "3" | "4";
type BentoGridItemRowSpan = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4";
type BentoGridItemFeatured = 'sm' | 'md' | 'lg' | 'xl';
type BentoGridItemVariant = 'default' | 'primary' | 'secondary' | 'elevated';

@Component({
  selector: 'ui-bento-grid-item',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-bento-grid-item"
      [class]="getComponentClasses()"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel"
      [attr.tabindex]="interactive ? tabIndex : -1"
      (click)="handleClick($event)"
      (keydown)="handleKeydown($event)">
      
      @if (header) {
        <div class="ui-bento-grid-item__header">
          {{ header }}
        </div>
      }
      
      <div class="ui-bento-grid-item__content">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styleUrl: './bento-grid.component.scss'
})
export class BentoGridItemComponent {
  @Input() colSpan: BentoGridItemSpan = 1;
  @Input() rowSpan: BentoGridItemRowSpan = 1;
  @Input() featured?: BentoGridItemFeatured;
  @Input() variant: BentoGridItemVariant = 'default';
  @Input() interactive = false;
  @Input() header?: string;
  @Input() role = 'gridcell';
  @Input() ariaLabel?: string;
  @Input() tabIndex = 0;
  
  @Output() clicked = new EventEmitter<MouseEvent>();
  
  getComponentClasses(): string {
    const classes = [
      'ui-bento-grid-item',
      `ui-bento-grid-item--span-${this.colSpan}`,
      `ui-bento-grid-item--row-span-${this.rowSpan}`
    ];
    
    if (this.featured) {
      classes.push(`ui-bento-grid-item--featured-${this.featured}`);
    }
    
    if (this.variant !== 'default') {
      classes.push(`ui-bento-grid-item--${this.variant}`);
    }
    
    if (this.interactive) {
      classes.push('ui-bento-grid-item--interactive');
    }
    
    return classes.join(' ');
  }
  
  handleClick(event: MouseEvent): void {
    if (this.interactive) {
      this.clicked.emit(event);
    }
  }
  
  handleKeydown(event: KeyboardEvent): void {
    if (this.interactive && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault();
      this.handleClick(event as any);
    }
  }
}