import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

export type BadgeVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'custom';
export type BadgeSize = 'sm' | 'md' | 'lg';
export type BadgeShape = 'rounded' | 'pill' | 'square';

@Component({
  selector: 'ccl-badge',
  standalone: true,
  imports: [],
  templateUrl: './badge.html',
  styleUrls: ['./badge.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => BadgeComponent),
      multi: true
    }
  ]
})
export class BadgeComponent implements ControlValueAccessor {
  @Input() variant: BadgeVariant = 'default';
  @Input() label: string = '';
  @Input() icon: string = '';
  @Input() dismissible: boolean = false;
  @Input() count: number | null = null;
  @Input() clickable: boolean = false;
  @Input() size: BadgeSize = 'md';
  @Input() shape: BadgeShape = 'rounded';
  @Input() customColor: string = '';
  @Input() disabled: boolean = false;

  @Output() onDismiss = new EventEmitter<void>();
  @Output() onClick = new EventEmitter<void>();

  // ControlValueAccessor implementation
  private onChange = (value: any) => {};
  private onTouched = () => {};

  writeValue(value: any): void {
    // Badge doesn't have a traditional value, but we can use this for state management
  }

  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  onBadgeClick(): void {
    if (this.clickable && !this.disabled) {
      this.onClick.emit();
      this.onChange(true); // Notify form control of change
      this.onTouched();
    }
  }

  onDismissClick(event: Event): void {
    event.stopPropagation();
    if (!this.disabled) {
      this.onDismiss.emit();
      this.onChange(false); // Notify form control of change
      this.onTouched();
    }
  }

  onKeydown(event: KeyboardEvent): void {
    if (this.clickable && !this.disabled) {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        this.onBadgeClick();
      }
    }
  }

  onDismissKeydown(event: KeyboardEvent): void {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.onDismissClick(event);
    }
  }

  get displayText(): string {
    if (this.count !== null) {
      return this.count > 999 ? '999+' : this.count.toString();
    }
    return this.label;
  }

  get isInteractive(): boolean {
    return this.clickable || this.dismissible;
  }

  get role(): string {
    if (this.clickable) return 'button';
    if (this.dismissible) return 'button';
    return 'status';
  }

  get ariaLabel(): string {
    if (this.count !== null) {
      return `Count: ${this.count}`;
    }
    if (this.variant !== 'default') {
      return `${this.label}, ${this.variant} badge`;
    }
    return this.label;
  }

  get tabIndex(): number {
    return this.isInteractive && !this.disabled ? 0 : -1;
  }
}