import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

export type TimelineSize = 'sm' | 'md' | 'lg';
export type TimelineVariant = 'primary' | 'secondary' | 'success';
export type TimelineOrientation = 'vertical' | 'horizontal';
export type TimelineItemStatus = 'pending' | 'active' | 'completed' | 'error';

export interface TimelineItem {
  id: string;
  title: string;
  description?: string;
  timestamp?: string;
  status: TimelineItemStatus;
}

@Component({
  selector: 'ui-timeline',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-timeline"
      [class]="getComponentClasses()"
      [attr.role]="'list'"
      [attr.aria-label]="ariaLabel || 'Timeline'">
      
      @for (item of items; track item.id) {
        <div 
          class="ui-timeline__item"
          [class]="getItemClasses(item)"
          [attr.role]="'listitem'"
          [attr.aria-label]="getItemAriaLabel(item)">
          
          <div 
            class="ui-timeline__marker"
            [attr.aria-hidden]="true">
          </div>
          
          <div class="ui-timeline__content">
            @if (item.title) {
              <div class="ui-timeline__title">
                {{ item.title }}
              </div>
            }
            
            @if (item.description) {
              <div class="ui-timeline__description">
                {{ item.description }}
              </div>
            }
            
            @if (item.timestamp) {
              <div class="ui-timeline__timestamp">
                {{ item.timestamp }}
              </div>
            }
          </div>
        </div>
      }
    </div>
  `,
  styleUrl: './timeline.component.scss'
})
export class TimelineComponent {
  @Input() items: TimelineItem[] = [];
  @Input() size: TimelineSize = 'md';
  @Input() variant: TimelineVariant = 'primary';
  @Input() orientation: TimelineOrientation = 'vertical';
  @Input() ariaLabel?: string;

  getComponentClasses(): string {
    const classes = [
      'ui-timeline',
      `ui-timeline--${this.size}`,
      `ui-timeline--${this.variant}`,
      `ui-timeline--${this.orientation}`
    ];
    
    return classes.join(' ');
  }

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

  getItemAriaLabel(item: TimelineItem): string {
    const status = this.getStatusLabel(item.status);
    const title = item.title || 'Timeline item';
    const timestamp = item.timestamp ? `, ${item.timestamp}` : '';
    return `${title}, ${status}${timestamp}`;
  }

  private getStatusLabel(status: TimelineItemStatus): string {
    switch (status) {
      case 'completed':
        return 'completed';
      case 'active':
        return 'in progress';
      case 'pending':
        return 'pending';
      case 'error':
        return 'error';
      default:
        return status;
    }
  }
}