import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from 'ui-essentials';
import { ContainerComponent } from 'ui-essentials';
import { HeroConfig } from '../../interfaces/hero.interfaces';
import { CTAButton } from '../../interfaces/shared.interfaces';

@Component({
  selector: 'ui-lp-hero',
  standalone: true,
  imports: [CommonModule, ButtonComponent, ContainerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-hero"
      [class]="heroClasses()"
      [attr.aria-label]="'Hero section'">
      
      <ui-container [size]="'xl'" [padding]="'lg'">
        <div class="ui-lp-hero__content">
          <h1 class="ui-lp-hero__title">{{ config().title }}</h1>
          
          @if (config().subtitle) {
            <p class="ui-lp-hero__subtitle">{{ config().subtitle }}</p>
          }
          
          @if (config().ctaPrimary || config().ctaSecondary) {
            <div class="ui-lp-hero__actions">
              @if (config().ctaPrimary) {
                <ui-button
                  [variant]="config().ctaPrimary!.variant"
                  [size]="config().ctaPrimary!.size || 'large'"
                  (clicked)="handleCTAClick(config().ctaPrimary!)">
                  {{ config().ctaPrimary!.text }}
                </ui-button>
              }
              
              @if (config().ctaSecondary) {
                <ui-button
                  [variant]="config().ctaSecondary!.variant"
                  [size]="config().ctaSecondary!.size || 'large'"
                  (clicked)="handleCTAClick(config().ctaSecondary!)">
                  {{ config().ctaSecondary!.text }}
                </ui-button>
              }
            </div>
          }
        </div>
      </ui-container>
      
      @if (config().backgroundType === 'animated') {
        <div class="ui-lp-hero__animated-bg" aria-hidden="true"></div>
      }
    </section>
  `,
  styleUrl: './hero-section.component.scss'
})
export class HeroSectionComponent {
  config = signal<HeroConfig>({
    title: '',
    alignment: 'center',
    backgroundType: 'solid',
    minHeight: 'large'
  });
  
  @Input() set configuration(value: HeroConfig) {
    this.config.set(value);
  }
  
  @Output() ctaClicked = new EventEmitter<CTAButton>();
  
  /**
   * Computed classes for the hero element based on configuration
   */
  heroClasses(): string {
    const config = this.config();
    const classes = ['ui-lp-hero'];
    
    if (config.backgroundType) {
      classes.push(`ui-lp-hero--${config.backgroundType}`);
    }
    
    if (config.alignment) {
      classes.push(`ui-lp-hero--${config.alignment}`);
    }
    
    if (config.minHeight) {
      classes.push(`ui-lp-hero--${config.minHeight}`);
    }
    
    return classes.join(' ');
  }
  
  /**
   * Handle CTA button clicks
   */
  handleCTAClick(cta: CTAButton): void {
    cta.action();
    this.ctaClicked.emit(cta);
  }
}