import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContainerComponent } from 'ui-essentials';
import { TimelineConfig, TimelineItem } from '../../interfaces/content.interfaces';

@Component({
  selector: 'ui-lp-timeline',
  standalone: true,
  imports: [CommonModule, ContainerComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      class="ui-lp-timeline"
      [class]="getComponentClasses()">
      
      <ui-container [size]="'lg'" [padding]="'md'">
        @if (config().title || config().subtitle) {
          <div class="ui-lp-timeline__header">
            @if (config().title) {
              <h2 class="ui-lp-timeline__title">{{ config().title }}</h2>
            }
            
            @if (config().subtitle) {
              <p class="ui-lp-timeline__subtitle">{{ config().subtitle }}</p>
            }
          </div>
        }
        
        @if (config().items.length > 0) {
          <div class="ui-lp-timeline__container">
            <div class="ui-lp-timeline__line" aria-hidden="true"></div>
            
            <div class="ui-lp-timeline__items">
              @for (item of config().items; track item.id; let i = $index) {
                <div 
                  class="ui-lp-timeline__item"
                  [class]="getItemClasses(item)">
                  
                  <div class="ui-lp-timeline__marker" aria-hidden="true">
                    @if (item.icon) {
                      <div class="ui-lp-timeline__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                          @switch (item.icon) {
                            @case ('check') {
                              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                            }
                            @case ('star') {
                              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
                            }
                            @case ('rocket') {
                              <path d="M9.19 6.35c-2.04 2.29-3.44 5.58-3.44 5.58s2.12-1.29 4.69-1.29c-.18-.9-.34-1.8-.34-2.72 0-.66.06-1.3.15-1.93-.36.12-.72.24-1.06.36z"/>
                            }
                            @default {
                              <circle cx="12" cy="12" r="3"/>
                            }
                          }
                        </svg>
                      </div>
                    } @else {
                      <div class="ui-lp-timeline__dot"></div>
                    }
                  </div>
                  
                  <div class="ui-lp-timeline__content">
                    @if (config().showDates && item.date) {
                      <div class="ui-lp-timeline__date">{{ item.date }}</div>
                    }
                    
                    <div class="ui-lp-timeline__info">
                      <h3 class="ui-lp-timeline__item-title">
                        {{ item.title }}
                        @if (item.badge) {
                          <span class="ui-lp-timeline__badge">{{ item.badge }}</span>
                        }
                      </h3>
                      
                      <p class="ui-lp-timeline__description">{{ item.description }}</p>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        } @else {
          <div class="ui-lp-timeline__empty">
            <p>No timeline items to display.</p>
          </div>
        }
      </ui-container>
    </section>
  `,
  styleUrl: './timeline-section.component.scss'
})
export class TimelineSectionComponent {
  config = signal<TimelineConfig>({
    title: 'Our Journey',
    items: [],
    orientation: 'vertical',
    theme: 'default',
    showDates: true
  });

  @Input() set configuration(value: TimelineConfig) {
    this.config.set(value);
  }

  getComponentClasses(): string {
    const classes = ['ui-lp-timeline'];
    
    if (this.config().orientation) {
      classes.push(`ui-lp-timeline--${this.config().orientation}`);
    }
    if (this.config().theme) {
      classes.push(`ui-lp-timeline--${this.config().theme}`);
    }
    
    return classes.join(' ');
  }

  getItemClasses(item: TimelineItem): string {
    const classes = ['ui-lp-timeline__item'];
    
    if (item.status) {
      classes.push(`ui-lp-timeline__item--${item.status}`);
    }
    
    return classes.join(' ');
  }
}