// ============================================================================
// Agent Card Component
// Per spec Section 7.3: Agent Card Component Interface
// Section 7.5: Animation Specs
// ============================================================================
import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { AgentStatus } from '../../models/agent.model';

/**
 * AgentCard displays a single agent's status in the Command Hub grid.
 *
 * Inputs:
 * - status: AgentStatus — current agent status
 * - task: string — current task description
 * - progress: number — task progress percentage (0–100)
 * - sessionKey: string — full session key
 * - channel: string — communication channel (e.g., "telegram")
 * - lastActivity: Date — timestamp of last activity
 *
 * Accessibility:
 * - role="article" on the card element
 * - aria-labels for status badge and interactive elements
 * - focus-visible outlines for keyboard navigation
 */
@Component({
  selector: 'app-agent-card',
  standalone: true,
  imports: [
    CommonModule,
    MatIconModule,
    MatButtonModule,
    MatProgressBarModule,
    MatTooltipModule,
  ],
  templateUrl: './agent-card.component.html',
  styleUrl: './agent-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgentCardComponent {
  /** Current agent status */
  readonly status = input.required<AgentStatus>();

  /** Current task description */
  readonly task = input<string>('');

  /** Task progress percentage (0–100) */
  readonly progress = input<number>(0);

  /** Full session key */
  readonly sessionKey = input.required<string>();

  /** Communication channel (e.g., "telegram") */
  readonly channel = input<string>('');

  /** Timestamp of last activity */
  readonly lastActivity = input<Date>(new Date());

  /** Map status to CSS custom property name for dynamic color binding */
  readonly statusColorVar = computed(() => {
    const map: Record<AgentStatus, string> = {
      active: 'var(--status-active)',
      idle: 'var(--status-idle)',
      thinking: 'var(--status-thinking)',
      error: 'var(--status-error)',
      offline: 'var(--status-offline)',
    };
    return map[this.status()];
  });

  /** Map status to background tint CSS variable */
  readonly statusBgVar = computed(() => {
    const map: Record<AgentStatus, string> = {
      active: 'var(--status-active-bg)',
      idle: 'var(--status-idle-bg)',
      thinking: 'var(--status-thinking-bg)',
      error: 'var(--status-error-bg)',
      offline: 'var(--cc-surface-container)',
    };
    return map[this.status()];
  });

  /** Human-readable status label */
  readonly statusLabel = computed(() => {
    const map: Record<AgentStatus, string> = {
      active: 'Active',
      idle: 'Idle',
      thinking: 'Thinking',
      error: 'Error',
      offline: 'Offline',
    };
    return map[this.status()];
  });

  /** CSS class for status dot animation */
  readonly statusDotClass = computed(() => `status-dot--${this.status()}`);

  /** Format last activity as relative time string */
  readonly lastActivityText = computed(() => {
    const now = Date.now();
    const then = this.lastActivity().getTime();
    const diffMs = now - then;
    const diffMin = Math.floor(diffMs / 60000);
    if (diffMin < 1) return 'Just now';
    if (diffMin < 60) return `${diffMin}m ago`;
    const diffHr = Math.floor(diffMin / 60);
    if (diffHr < 24) return `${diffHr}h ago`;
    return `${Math.floor(diffHr / 24)}d ago`;
  });

  /** Whether to show progress bar */
  readonly showProgress = computed(() => {
    const s = this.status();
    return (s === 'active' || s === 'thinking') && this.progress() > 0;
  });
}