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

@Component({
  selector: 'ui-lp-hero-split',
  standalone: true,
  imports: [CommonModule, ButtonComponent, ContainerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-hero-split"
      [class]="heroClasses()"
      [attr.aria-label]="'Split screen hero section'">
      
      <div class="ui-lp-hero-split__wrapper">
        <!-- Left Content -->
        <div class="ui-lp-hero-split__left">
          @if (config().leftContent) {
            @switch (config().leftContent!.type) {
              @case ('text') {
                <div class="ui-lp-hero-split__text-content" [innerHTML]="config().leftContent!.content"></div>
              }
              @case ('image') {
                <div class="ui-lp-hero-split__image-content">
                  <img [src]="config().leftContent!.content" [alt]="'Left content image'" class="ui-lp-hero-split__img" />
                </div>
              }
              @case ('video') {
                <div class="ui-lp-hero-split__video-content">
                  <video [src]="config().leftContent!.content" class="ui-lp-hero-split__video" controls></video>
                </div>
              }
            }
          } @else {
            <!-- Default text content -->
            <div class="ui-lp-hero-split__default-content">
              <h1 class="ui-lp-hero-split__title">{{ config().title }}</h1>
              
              @if (config().subtitle) {
                <p class="ui-lp-hero-split__subtitle">{{ config().subtitle }}</p>
              }
              
              @if (config().ctaPrimary || config().ctaSecondary) {
                <div class="ui-lp-hero-split__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>
          }
        </div>
        
        <!-- Right Content -->
        <div class="ui-lp-hero-split__right">
          @if (config().rightContent) {
            @switch (config().rightContent!.type) {
              @case ('text') {
                <div class="ui-lp-hero-split__text-content" [innerHTML]="config().rightContent!.content"></div>
              }
              @case ('image') {
                <div class="ui-lp-hero-split__image-content">
                  <img [src]="config().rightContent!.content" [alt]="'Right content image'" class="ui-lp-hero-split__img" />
                </div>
              }
              @case ('video') {
                <div class="ui-lp-hero-split__video-content">
                  <video [src]="config().rightContent!.content" class="ui-lp-hero-split__video" controls></video>
                </div>
              }
            }
          } @else {
            <!-- Placeholder for right content -->
            <div class="ui-lp-hero-split__placeholder">
              <div class="ui-lp-hero-split__placeholder-icon">🖼️</div>
              <p class="ui-lp-hero-split__placeholder-text">Right content area</p>
            </div>
          }
        </div>
      </div>
    </section>
  `,
  styleUrl: './hero-split-screen.component.scss'
})
export class HeroSplitScreenComponent {
  config = signal<HeroSplitConfig>({
    title: '',
    alignment: 'left',
    backgroundType: 'solid',
    minHeight: 'large',
    splitRatio: '50-50'
  });
  
  @Input() set configuration(value: HeroSplitConfig) {
    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-split'];
    
    if (config.backgroundType) {
      classes.push(`ui-lp-hero-split--${config.backgroundType}`);
    }
    
    if (config.alignment) {
      classes.push(`ui-lp-hero-split--${config.alignment}`);
    }
    
    if (config.minHeight) {
      classes.push(`ui-lp-hero-split--${config.minHeight}`);
    }
    
    if (config.splitRatio) {
      classes.push(`ui-lp-hero-split--${config.splitRatio}`);
    }
    
    return classes.join(' ');
  }
  
  /**
   * Handle CTA button clicks
   */
  handleCTAClick(cta: CTAButton): void {
    cta.action();
    this.ctaClicked.emit(cta);
  }
}