import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContainerComponent } from 'ui-essentials';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { FeatureGridConfig, FeatureItem, FeatureLink } from '../../interfaces/feature.interfaces';

@Component({
  selector: 'ui-lp-feature-grid',
  standalone: true,
  imports: [CommonModule, ContainerComponent, FaIconComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-feature-grid"
      [class]="getComponentClasses()"
      [attr.aria-label]="'Features section'">
      
      <ui-container [size]="'xl'" [padding]="'lg'">
        @if (config().title || config().subtitle) {
          <div class="ui-lp-feature-grid__header">
            @if (config().title) {
              <h2 class="ui-lp-feature-grid__title">{{ config().title }}</h2>
            }
            @if (config().subtitle) {
              <p class="ui-lp-feature-grid__subtitle">{{ config().subtitle }}</p>
            }
          </div>
        }
        
        <div 
          class="ui-lp-feature-grid__items"
          [class.ui-lp-feature-grid__items--auto]="config().columns === 'auto'"
          [class.ui-lp-feature-grid__items--2]="config().columns === 2"
          [class.ui-lp-feature-grid__items--3]="config().columns === 3"
          [class.ui-lp-feature-grid__items--4]="config().columns === 4">
          
          @for (feature of config().features; track feature.id; let index = $index) {
            <div 
              class="ui-lp-feature-grid__item"
              [attr.data-animation-delay]="index * 100"
              (click)="handleFeatureClick(feature)">
              
              @if (config().showIcons && feature.icon) {
                <div class="ui-lp-feature-grid__icon">
                  @if (feature.iconType === 'fa') {
                    <fa-icon [icon]="getIconDefinition(feature.icon)"></fa-icon>
                  } @else {
                    <i [class]="feature.icon" aria-hidden="true"></i>
                  }
                </div>
              }
              
              @if (feature.image) {
                <div class="ui-lp-feature-grid__image">
                  <img 
                    [src]="feature.image" 
                    [alt]="feature.title"
                    loading="lazy">
                </div>
              }
              
              <div class="ui-lp-feature-grid__content">
                <h3 class="ui-lp-feature-grid__item-title">{{ feature.title }}</h3>
                <p class="ui-lp-feature-grid__description">{{ feature.description }}</p>
                
                @if (feature.link) {
                  <a 
                    class="ui-lp-feature-grid__link"
                    [href]="feature.link.url"
                    [target]="feature.link.target || '_self'"
                    (click)="handleLinkClick($event, feature.link)">
                    {{ feature.link.text }}
                    <fa-icon [icon]="faArrowRight" class="ui-lp-feature-grid__link-icon"></fa-icon>
                  </a>
                }
              </div>
            </div>
          }
        </div>
      </ui-container>
    </section>
  `,
  styleUrl: './feature-grid.component.scss'
})
export class FeatureGridComponent {
  config = signal<FeatureGridConfig>({
    features: [],
    layout: 'grid',
    columns: 'auto',
    variant: 'card',
    showIcons: true,
    animationType: 'fade',
    spacing: 'normal'
  });
  
  faArrowRight = faArrowRight;
  
  @Input() set configuration(value: FeatureGridConfig) {
    this.config.set(value);
  }
  
  @Output() featureClicked = new EventEmitter<FeatureItem>();
  @Output() linkClicked = new EventEmitter<{ feature: FeatureItem; link: FeatureLink }>();
  
  getComponentClasses(): string {
    const classes = ['ui-lp-feature-grid'];
    
    if (this.config().variant) {
      classes.push(`ui-lp-feature-grid--${this.config().variant}`);
    }
    if (this.config().layout) {
      classes.push(`ui-lp-feature-grid--${this.config().layout}`);
    }
    if (this.config().spacing) {
      classes.push(`ui-lp-feature-grid--${this.config().spacing}`);
    }
    
    return classes.join(' ');
  }
  
  handleFeatureClick(feature: FeatureItem): void {
    this.featureClicked.emit(feature);
  }
  
  handleLinkClick(event: Event, link: FeatureLink): void {
    event.stopPropagation();
    this.linkClicked.emit({ 
      feature: this.config().features.find(f => f.link === link)!,
      link 
    });
  }
  
  getIconDefinition(iconName: string): IconDefinition {
    // This would need to be expanded with a proper icon mapping service
    // For now, return a default icon
    return faArrowRight;
  }
}