import type { Agent } from '../lib/api'

const statusColors: Record<string, string> = {
  idle: 'bg-gray-400',
  working: 'bg-green-500',
  blocked: 'bg-yellow-500',
  error: 'bg-red-500',
  offline: 'bg-gray-700',
}

const providerBadge: Record<string, string> = {
  ollama: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
  anthropic: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
}

export function AgentStatus({ agents }: { agents: Agent[] }) {
  return (
    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
      <div className="flex items-center gap-2 mb-3">
    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Agents</h2>
    <span className="font-mono text-[10px] uppercase tracking-wider text-gray-400">
      {agents.filter(a => a.status === 'idle' || a.status === 'working').length} active
    </span>
  </div>
      <div className="space-y-2">
        {agents.map((agent) => (
          <div key={agent.id} className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-gray-750">
            <div className="flex items-center gap-2">
              <span className={`w-2 h-2 rounded-full ${statusColors[agent.status] ?? 'bg-gray-400'}`} />
              <span className="font-medium text-sm text-gray-900 dark:text-gray-100">{agent.name}</span>
              <span className="text-xs text-gray-500">{agent.role}</span>
            </div>
            <div className="flex items-center gap-2">
              <span className={`text-xs px-1.5 py-0.5 rounded ${providerBadge[agent.model_provider] ?? 'bg-gray-100'}`}>
                {agent.model_provider}
              </span>
              <span className="text-xs text-gray-400">{agent.status}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}