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

export type ListItemSize = 'sm' | 'md' | 'lg';
export type ListItemLines = 'one' | 'two' | 'three';
export type ListItemVariant = 'text' | 'avatar' | 'media';

export interface ListItemData {
  primary: string;
  secondary?: string;
  tertiary?: string;
  avatarSrc?: string;
  avatarAlt?: string;
  mediaSrc?: string;
  mediaAlt?: string;
  icon?: string;
  disabled?: boolean;
  selected?: boolean;
}

@Component({
  selector: 'ui-list-item',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  template: `
    <div 
      class="list-item"
      [class]="getItemClasses()"
      [attr.aria-disabled]="data.disabled"
      [attr.aria-selected]="data.selected"
      role="listitem"
    >
      <!-- Leading content -->
      @if (variant === 'avatar' && data.avatarSrc) {
        <div class="list-item__avatar">
          <img 
            [src]="data.avatarSrc" 
            [alt]="data.avatarAlt || ''"
            class="list-item__avatar-image"
          />
        </div>
      }
      
      @if (variant === 'media' && data.mediaSrc) {
        <div class="list-item__media">
          <img 
            [src]="data.mediaSrc" 
            [alt]="data.mediaAlt || ''"
            class="list-item__media-image"
          />
        </div>
      }
      
      @if (data.icon) {
        <div class="list-item__icon">
          <i [class]="data.icon"></i>
        </div>
      }

      <!-- Content area -->
      <div class="list-item__content">
        @if (lines === 'one') {
          <div class="list-item__primary">{{ data.primary }}</div>
        }
        
        @if (lines === 'two') {
          <div class="list-item__primary">{{ data.primary }}</div>
          <div class="list-item__secondary">{{ data.secondary }}</div>
        }
        
        @if (lines === 'three') {
          <div class="list-item__primary">{{ data.primary }}</div>
          <div class="list-item__secondary">{{ data.secondary }}</div>
          <div class="list-item__tertiary">{{ data.tertiary }}</div>
        }
      </div>

      <!-- Trailing content -->
      <div class="list-item__trailing">
        <ng-content select="[slot=trailing]"></ng-content>
      </div>
    </div>
  `,
  styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent {
  @Input() data!: ListItemData;
  @Input() size: ListItemSize = 'md';
  @Input() lines: ListItemLines = 'one';
  @Input() variant: ListItemVariant = 'text';
  @Input() interactive = true;
  @Input() divider = false;

  getItemClasses(): string {
    const classes = [
      `list-item--${this.size}`,
      `list-item--${this.lines}-line`,
      `list-item--${this.variant}`
    ];

    if (this.interactive) classes.push('list-item--interactive');
    if (this.divider) classes.push('list-item--divider');
    if (this.data.disabled) classes.push('list-item--disabled');
    if (this.data.selected) classes.push('list-item--selected');

    return classes.join(' ');
  }
}