import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { AgentStatus } from '../../models/agent.model';

/**
 * Agent Status Badge component.
 * Displays a colored pill with a pulse animation indicating the agent's current status.
 * Per spec Section 7.3: Agent Card Component Interface — status indicator.
 *
 * Color mapping:
 * - Active → green
 * - Idle → gray
 * - Thinking → blue
 * - Error → red
 * - Offline → gray (no pulse)
 *
 * Pulse animations:
 * - Active → 2s
 * - Error → 0.8s
 * - Thinking → 3s
 * - Idle / Offline → no pulse
 */
@Component({
  selector: 'app-agent-status-badge',
  standalone: true,
  imports: [],
  templateUrl: './agent-status-badge.component.html',
  styleUrl: './agent-status-badge.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgentStatusBadgeComponent {
  /** Current agent status — binds to the AgentStatus type from the model. */
  readonly status = input.required<AgentStatus>();

  /** Label text shown inside the badge. Defaults to title-cased status. */
  readonly label = input<string>();

  get displayLabel(): string {
    return this.label() ?? this.titleCase(this.status());
  }

  /** CSS class driven by the current status value. */
  get statusClass(): string {
    return `badge--${this.status()}`;
  }

  /** Whether the pulse animation should be active for the current status. */
  get hasPulse(): boolean {
    return this.status() === 'active' || this.status() === 'thinking' || this.status() === 'error';
  }

  private titleCase(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}