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 { HeroImageConfig } from '../../interfaces/hero.interfaces';
import { CTAButton } from '../../interfaces/shared.interfaces';

@Component({
  selector: 'ui-lp-hero-image',
  standalone: true,
  imports: [CommonModule, ButtonComponent, ContainerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-hero-image"
      [class]="heroClasses()"
      [attr.aria-label]="'Hero section with image'">
      
      <ui-container [size]="'xl'" [padding]="'lg'">
        <div class="ui-lp-hero-image__wrapper">
          <div class="ui-lp-hero-image__content">
            <h1 class="ui-lp-hero-image__title">{{ config().title }}</h1>
            
            @if (config().subtitle) {
              <p class="ui-lp-hero-image__subtitle">{{ config().subtitle }}</p>
            }
            
            @if (config().ctaPrimary || config().ctaSecondary) {
              <div class="ui-lp-hero-image__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>
          
          @if (config().imageUrl) {
            <div class="ui-lp-hero-image__media">
              <img 
                [src]="config().imageUrl"
                [alt]="config().imageAlt || 'Hero image'"
                class="ui-lp-hero-image__img"
                loading="eager"
                decoding="async" />
            </div>
          }
        </div>
      </ui-container>
    </section>
  `,
  styleUrl: './hero-with-image.component.scss'
})
export class HeroWithImageComponent {
  config = signal<HeroImageConfig>({
    title: '',
    alignment: 'left',
    backgroundType: 'solid',
    minHeight: 'large',
    imagePosition: 'right',
    imageMobile: 'below'
  });
  
  @Input() set configuration(value: HeroImageConfig) {
    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-image'];
    
    if (config.backgroundType) {
      classes.push(`ui-lp-hero-image--${config.backgroundType}`);
    }
    
    if (config.alignment) {
      classes.push(`ui-lp-hero-image--${config.alignment}`);
    }
    
    if (config.minHeight) {
      classes.push(`ui-lp-hero-image--${config.minHeight}`);
    }
    
    if (config.imagePosition) {
      classes.push(`ui-lp-hero-image--image-${config.imagePosition}`);
    }
    
    if (config.imageMobile) {
      classes.push(`ui-lp-hero-image--mobile-${config.imageMobile}`);
    }
    
    return classes.join(' ');
  }
  
  /**
   * Handle CTA button clicks
   */
  handleCTAClick(cta: CTAButton): void {
    cta.action();
    this.ctaClicked.emit(cta);
  }
}