import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContainerComponent } from 'ui-essentials';
import { LogoCloudConfig, LogoItem } from '../../interfaces/social-proof.interfaces';

@Component({
  selector: 'ui-lp-logo-cloud',
  standalone: true,
  imports: [CommonModule, ContainerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-logo-cloud"
      [class]="getComponentClasses()"
      [attr.aria-label]="'Partners and clients'">
      
      <ui-container [size]="'xl'" [padding]="'lg'">
        @if (config().title || config().subtitle) {
          <div class="ui-lp-logo-cloud__header">
            @if (config().title) {
              <h2 class="ui-lp-logo-cloud__title">{{ config().title }}</h2>
            }
            @if (config().subtitle) {
              <p class="ui-lp-logo-cloud__subtitle">{{ config().subtitle }}</p>
            }
          </div>
        }
        
        <div 
          class="ui-lp-logo-cloud__container"
          [class.ui-lp-logo-cloud__container--row]="config().layout === 'row'"
          [class.ui-lp-logo-cloud__container--grid]="config().layout === 'grid'"
          [class.ui-lp-logo-cloud__container--marquee]="config().layout === 'marquee'"
          [style.--items-per-row]="config().itemsPerRow"
          [style.--max-height]="config().maxHeight ? config().maxHeight + 'px' : null">
          
          @if (config().layout === 'marquee') {
            <div class="ui-lp-logo-cloud__marquee">
              <div class="ui-lp-logo-cloud__marquee-track">
                @for (logo of duplicatedLogos(); track logo.id + '-1') {
                  <div class="ui-lp-logo-cloud__item">
                    @if (logo.url) {
                      <a 
                        [href]="logo.url"
                        [attr.aria-label]="'Visit ' + logo.name"
                        target="_blank"
                        rel="noopener noreferrer"
                        (click)="handleLogoClick(logo)">
                        <img 
                          [src]="logo.logo"
                          [alt]="logo.name"
                          [class.ui-lp-logo-cloud__logo--grayscale]="logo.grayscale"
                          loading="lazy">
                      </a>
                    } @else {
                      <img 
                        [src]="logo.logo"
                        [alt]="logo.name"
                        [class.ui-lp-logo-cloud__logo--grayscale]="logo.grayscale"
                        loading="lazy">
                    }
                  </div>
                }
              </div>
            </div>
          } @else {
            @for (logo of config().logos; track logo.id; let index = $index) {
              <div 
                class="ui-lp-logo-cloud__item"
                [attr.data-animation-delay]="index * 50">
                @if (logo.url) {
                  <a 
                    [href]="logo.url"
                    [attr.aria-label]="'Visit ' + logo.name"
                    target="_blank"
                    rel="noopener noreferrer"
                    (click)="handleLogoClick(logo)">
                    <img 
                      [src]="logo.logo"
                      [alt]="logo.name"
                      [class.ui-lp-logo-cloud__logo--grayscale]="logo.grayscale"
                      loading="lazy">
                  </a>
                } @else {
                  <img 
                    [src]="logo.logo"
                    [alt]="logo.name"
                    [class.ui-lp-logo-cloud__logo--grayscale]="logo.grayscale"
                    loading="lazy">
                }
              </div>
            }
          }
        </div>
      </ui-container>
    </section>
  `,
  styleUrl: './logo-cloud.component.scss'
})
export class LogoCloudComponent {
  config = signal<LogoCloudConfig>({
    logos: [],
    layout: 'row',
    itemsPerRow: 5,
    grayscale: true,
    hoverEffect: true,
    maxHeight: 80
  });
  
  duplicatedLogos = computed(() => {
    const logos = this.config().logos;
    return [...logos, ...logos]; // Duplicate for seamless marquee
  });
  
  @Input() set configuration(value: LogoCloudConfig) {
    this.config.set(value);
  }
  
  @Output() logoClicked = new EventEmitter<LogoItem>();
  
  getComponentClasses(): string {
    const classes = ['ui-lp-logo-cloud'];
    
    if (this.config().layout) {
      classes.push(`ui-lp-logo-cloud--${this.config().layout}`);
    }
    if (this.config().grayscale) {
      classes.push('ui-lp-logo-cloud--grayscale');
    }
    if (this.config().hoverEffect) {
      classes.push('ui-lp-logo-cloud--hover');
    }
    
    return classes.join(' ');
  }
  
  handleLogoClick(logo: LogoItem): void {
    this.logoClicked.emit(logo);
  }
}