// ============================================================================
// Agent Status Badge Component
// Per CUB-48: Colored pill badge with pulse animation for agent statuses.
// Displays Active, Idle, Thinking, or Error with correct color mapping.
// ============================================================================

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

/**
 * Reusable status badge that renders a colored pill with label text
 * and a subtle pulse animation for Active, Thinking, and Error states.
 *
 * Usage:
 * ```html
 * <app-agent-status-badge status="active" />
 * <app-agent-status-badge status="error" />
 * ```
 */
@Component({
  selector: 'app-agent-status-badge',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './agent-status-badge.component.html',
  styleUrl: './agent-status-badge.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgentStatusBadgeComponent {
  /** Agent status to display. Maps to a color and animation. */
  @Input({ required: true })
  status!: AgentStatus;

  /** Whether to show the status label text alongside the dot. Defaults to true. */
  @Input()
  showLabel = true;

  /** Mapping from status to human-readable label. */
  readonly statusLabels: Record<AgentStatus, string> = {
    active: 'Active',
    idle: 'Idle',
    thinking: 'Thinking',
    error: 'Error',
    offline: 'Offline',
  };

  /** CSS class string for the badge container based on current status. */
  get statusClass(): string {
    return `status-badge--${this.status}`;
  }
}