import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

export interface TabItem {
  id: string;
  label: string;
  icon?: string | IconDefinition;
  disabled?: boolean;
  badge?: string | number;
  closeable?: boolean;
}

export type TabVariant = 'line' | 'pills' | 'cards';
export type TabSize = 'small' | 'medium' | 'large';

@Component({
  selector: 'ui-tab-group',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div [class]="wrapperClasses">
      <div class="tab-list" role="tablist">
        @for (tab of tabs; track tab.id) {
          <button
            type="button"
            [id]="'tab-' + tab.id"
            role="tab"
            [class]="getTabClasses(tab)"
            [attr.aria-selected]="activeTabId() === tab.id"
            [attr.aria-controls]="'panel-' + tab.id"
            [disabled]="tab.disabled"
            (click)="selectTab(tab.id)"
          >
            @if (tab.icon) {
              @if (isIconDefinition(tab.icon)) {
                <fa-icon class="tab-icon" [icon]="tab.icon" />
              } @else {
                <span class="tab-icon" [innerHTML]="tab.icon"></span>
              }
            }
            <span class="tab-label">{{ tab.label }}</span>
            @if (tab.badge) {
              <span class="tab-badge">{{ tab.badge }}</span>
            }
          </button>
        }
      </div>
      
      <div class="tab-panels">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styleUrl: './tab-group.component.scss'
})
export class TabGroupComponent {
  @Input() tabs: TabItem[] = [];
  @Input() variant: TabVariant = 'line';
  @Input() size: TabSize = 'medium';
  @Input() fullWidth: boolean = false;

  @Output() tabChange = new EventEmitter<string>();

  activeTabId = signal<string>('');

  ngOnInit(): void {
    // Set the first non-disabled tab as active by default
    if (this.tabs.length > 0 && !this.activeTabId()) {
      const firstEnabledTab = this.tabs.find(tab => !tab.disabled);
      if (firstEnabledTab) {
        this.activeTabId.set(firstEnabledTab.id);
      }
    }
  }

  get wrapperClasses(): string {
    return [
      'ui-tab-group',
      `ui-tab-group--${this.variant}`,
      `ui-tab-group--${this.size}`,
      this.fullWidth ? 'ui-tab-group--full-width' : ''
    ].filter(Boolean).join(' ');
  }

  getTabClasses(tab: TabItem): string {
    return [
      'tab-button',
      this.activeTabId() === tab.id ? 'tab-button--active' : '',
      tab.disabled ? 'tab-button--disabled' : ''
    ].filter(Boolean).join(' ');
  }

  selectTab(tabId: string): void {
    const tab = this.tabs.find(t => t.id === tabId);
    if (tab && !tab.disabled) {
      this.activeTabId.set(tabId);
      this.tabChange.emit(tabId);
    }
  }

  isIconDefinition(icon: string | IconDefinition): icon is IconDefinition {
    return typeof icon === 'object' && icon !== null && 'iconName' in icon;
  }
}