import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { AgentCardComponent } from '../../components/agent-card/agent-card.component';
import { AgentCardData } from '../../models/agent.model';

@Component({
  selector: 'app-hub-page',
  standalone: true,
  imports: [AgentCardComponent],
  template: `
    <div class="hub-page">
      <div class="hub-page__grid">
        @for (agent of agents(); track agent.id) {
          <app-agent-card
            [status]="agent.status"
            [task]="agent.currentTask ?? ''"
            [progress]="agent.taskProgress ?? 0"
            [sessionKey]="agent.sessionKey"
            [channel]="agent.channel"
            [lastActivity]="agent.lastActivity"
          />
        }
      </div>
    </div>
  `,
  styles: [`
    .hub-page {
      padding: var(--cc-section-padding, 24px);
    }

    .hub-page__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width, 320px), 1fr));
      gap: var(--cc-card-gap, 16px);
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HubPageComponent {
  /** Demo agents for development — will be replaced by SignalR data */
  protected readonly agents = signal<AgentCardData[]>([
    {
      id: 'otto',
      displayName: 'Otto',
      role: 'Orchestrator',
      status: 'active',
      currentTask: 'Reviewing PR #42',
      taskProgress: 65,
      taskElapsed: '04m 12s',
      sessionKey: 'agent:otto:telegram:direct:8787451565',
      channel: 'telegram',
      lastActivity: new Date(),
    },
    {
      id: 'rex',
      displayName: 'Rex',
      role: 'Frontend Specialist',
      status: 'thinking',
      currentTask: 'Building AgentCard component',
      taskProgress: 30,
      taskElapsed: '02m 45s',
      sessionKey: 'agent:rex:subagent:0cdbf600',
      channel: 'telegram',
      lastActivity: new Date(Date.now() - 120000),
    },
    {
      id: 'dex',
      displayName: 'Dex',
      role: 'Backend Engineer',
      status: 'idle',
      sessionKey: 'agent:dex:slack:channel:C01234567',
      channel: 'slack',
      lastActivity: new Date(Date.now() - 300000),
    },
    {
      id: 'hex',
      displayName: 'Hex',
      role: 'Database Architect',
      status: 'error',
      currentTask: 'Migration failed — rollback',
      taskProgress: 0,
      taskElapsed: '00m 00s',
      sessionKey: 'agent:hex:slack:channel:C01234568',
      channel: 'slack',
      lastActivity: new Date(Date.now() - 1800000),
      errorMessage: 'Connection timeout',
    },
  ]);
}