export interface AgentData {
  id: string
  model: string
  tier: 'fast' | 'standard' | 'premium'
  type: 'agent' | 'worker' | 'daemon'
  mode: 'interactive' | 'swarm'
  status: 'running' | 'idle' | 'dead'
  current_task?: string
  uptime?: number
  tasks_completed?: number
  last_heartbeat?: string
  capabilities?: string[]
}

interface AgentCardProps {
  agent: AgentData
  onClick?: () => void
}

/* ── status config ── */
const STATUS_CONFIG: Record<string, { dot: string; bg: string; label: string; ring: string }> = {
  running: { dot: 'bg-emerald-500', bg: 'bg-emerald-500/10', label: 'Running', ring: 'ring-emerald-500/20' },
  idle: { dot: 'bg-amber-400', bg: 'bg-amber-400/10', label: 'Idle', ring: 'ring-amber-400/20' },
  dead: { dot: 'bg-red-500', bg: 'bg-red-500/10', label: 'Offline', ring: 'ring-red-500/20' },
}

const TIER_COLORS: Record<string, string> = {
  fast: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
  standard: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
  premium: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
}

function formatUptime(seconds?: number): string {
  if (!seconds) return '—'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  if (h > 0) return `${h}h ${m}m`
  return `${m}m`
}

export default function AgentCard({ agent, onClick }: AgentCardProps) {
  const status = STATUS_CONFIG[agent.status] || STATUS_CONFIG.dead
  const tierColor = TIER_COLORS[agent.tier] || TIER_COLORS.standard
  const isActive = agent.status === 'running'

  return (
    <div
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick() } : undefined}
      className={`bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-lg p-4
        transition-all duration-200 select-none
        ${onClick ? 'cursor-pointer hover:border-sky-500/30 hover:bg-slate-800/70 active:scale-[0.98]' : ''}
        ${isActive ? `ring-1 ${status.ring}` : ''}`}
    >
      {/* Header: avatar + name + status dot */}
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2.5 min-w-0">
          {/* Status-colored avatar */}
          <div className={`w-8 h-8 rounded-lg ${status.bg} flex items-center justify-center shrink-0`}>
            <span className="text-xs font-bold text-slate-200">
              {agent.id.slice(0, 2).toUpperCase()}
            </span>
          </div>
          <div className="min-w-0">
            <p className="text-sm font-semibold text-slate-200 truncate">{agent.id}</p>
            <p className="text-xs text-slate-500 mt-0.5">{agent.model}</p>
          </div>
        </div>
        {/* Animated status dot */}
        <div className="flex items-center gap-1.5 shrink-0">
          <span className={`w-2.5 h-2.5 rounded-full ${status.dot} ${
            isActive ? 'animate-pulse' : 'animate-breathe'
          }`} />
          <span className={`text-[10px] font-medium uppercase tracking-wider ${
            isActive ? 'text-emerald-400' : agent.status === 'idle' ? 'text-amber-400' : 'text-red-400'
          }`}>
            {status.label}
          </span>
        </div>
      </div>

      {/* Tier badge */}
      <div className="mb-3">
        <span className={`inline-block text-[10px] px-2 py-0.5 rounded border ${tierColor} font-medium uppercase tracking-wide`}>
          {agent.tier}
        </span>
      </div>

      {/* Current task */}
      <div className="mb-3 pb-3 border-b border-slate-700/30">
        <p className="text-xs text-slate-400 uppercase tracking-wider mb-1">Task</p>
        {agent.current_task ? (
          <p className="text-xs text-slate-300 line-clamp-2">{agent.current_task}</p>
        ) : (
          <p className="text-xs text-slate-600 italic">No active task</p>
        )}
      </div>

      {/* Footer: uptime + completed count */}
      <div className="flex items-center justify-between">
        <div>
          <p className="text-[10px] text-slate-500 uppercase">Uptime</p>
          <p className="text-xs text-slate-300 font-medium">{formatUptime(agent.uptime)}</p>
        </div>
        {agent.tasks_completed != null && (
          <div className="text-right">
            <p className="text-[10px] text-slate-500 uppercase">Done</p>
            <p className="text-xs text-emerald-400 font-bold">{agent.tasks_completed}</p>
          </div>
        )}
      </div>

      {/* Click hint */}
      {onClick && (
        <p className="text-[10px] text-slate-600 text-center mt-3">Click for details</p>
      )}
    </div>
  )
}
