import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';

export type MenuItemSize = 'sm' | 'md' | 'lg';
export type MenuItemIconPosition = 'left' | 'right';
export type MenuItemVariant = 'default' | 'primary' | 'secondary' | 'danger';

export interface MenuItemData {
  id?: string;
  label: string;
  icon?: any; // FontAwesome icon definition
  iconCircle?: boolean;
  disabled?: boolean;
  active?: boolean;
  hasSubmenu?: boolean;
  badge?: string | number;
  href?: string;
  target?: string;
}

@Component({
  selector: 'ui-menu-item',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FaIconComponent],
  template: `
    <div 
      class="menu-item"
      [class]="getItemClasses()"
      [attr.aria-disabled]="data.disabled"
      [attr.aria-selected]="data.active"
      [attr.role]="data.href ? 'none' : 'menuitem'"
      (click)="handleClick($event)"
      (keydown.enter)="handleClick($event)"
      (keydown.space)="handleClick($event)"
      [tabindex]="data.disabled ? -1 : 0"
    >
      @if (data.href && !data.disabled) {
        <a 
          [href]="data.href"
          [target]="data.target || '_self'"
          class="menu-item__link"
          [attr.aria-label]="data.label"
        >
          <ng-container [ngTemplateOutlet]="itemContent"></ng-container>
        </a>
      } @else {
        <ng-container [ngTemplateOutlet]="itemContent"></ng-container>
      }

      <!-- Menu item content template -->
      <ng-template #itemContent>
        <!-- Left icon -->
        @if (data.icon && iconPosition === 'left') {
          <div class="menu-item__icon menu-item__icon--left" [class.menu-item__icon--circle]="data.iconCircle">
            <fa-icon [icon]="data.icon"></fa-icon>
          </div>
        }

        <!-- Label content -->
        <div class="menu-item__content">
          <span class="menu-item__label">{{ data.label }}</span>
          
          @if (data.badge) {
            <span class="menu-item__badge">{{ data.badge }}</span>
          }
        </div>

        <!-- Right content (icon or submenu caret) -->
        @if (data.icon && iconPosition === 'right') {
          <div class="menu-item__icon menu-item__icon--right" [class.menu-item__icon--circle]="data.iconCircle">
            <fa-icon [icon]="data.icon"></fa-icon>
          </div>
        } @else if (data.hasSubmenu) {
          <div class="menu-item__caret">
            <fa-icon [icon]="faChevronRight"></fa-icon>
          </div>
        }
      </ng-template>

      <!-- Bottom border -->
      @if (showDivider) {
        <div class="menu-item__divider"></div>
      }
    </div>
  `,
  styleUrls: ['./menu-item.component.scss']
})
export class MenuItemComponent {
  @Input() data!: MenuItemData;
  @Input() size: MenuItemSize = 'md';
  @Input() variant: MenuItemVariant = 'default';
  @Input() iconPosition: MenuItemIconPosition = 'left';
  @Input() showDivider = false;
  @Input() indent = false;
  @Input() dense = false;

  @Output() itemClick = new EventEmitter<MenuItemData>();
  @Output() submenuToggle = new EventEmitter<MenuItemData>();

  // FontAwesome icons
  faChevronRight = faChevronRight;

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

    if (this.dense) classes.push('menu-item--dense');
    if (this.indent) classes.push('menu-item--indent');
    if (this.data.disabled) classes.push('menu-item--disabled');
    if (this.data.active) classes.push('menu-item--active');
    if (this.data.hasSubmenu) classes.push('menu-item--has-submenu');
    if (this.showDivider) classes.push('menu-item--with-divider');

    return classes.join(' ');
  }

  handleClick(event: Event): void {
    if (this.data.disabled) {
      event.preventDefault();
      return;
    }

    if (this.data.hasSubmenu) {
      event.preventDefault();
      this.submenuToggle.emit(this.data);
    } else if (!this.data.href) {
      this.itemClick.emit(this.data);
    }
  }
}