import type { Agent, FeedEntry } from '../../types'
import { getAgentMeta } from '../../lib/agentMeta'
import { cn } from '../../lib/utils'

type Props = {
  feed: FeedEntry[]
  agents: Agent[]
  filterAgentId?: string | null
  opsOnly?: boolean
}

const LEVEL: Record<string, string> = {
  info: 'text-foreground-muted',
  ok: 'text-success',
  warn: 'text-warning',
  err: 'text-danger',
}

function isOpsEvent(message: string): boolean {
  const lower = message.toLowerCase()
  if (message.includes(' answered:')) return false
  if (message.startsWith('Prompt received:')) return false
  if (lower.includes('completed a response')) return false
  return true
}

export function ActivityStream({ feed, agents, filterAgentId, opsOnly }: Props) {
  let items = filterAgentId ? feed.filter((e) => e.agent_id === filterAgentId) : feed
  if (opsOnly) items = items.filter((e) => isOpsEvent(e.message))

  return (
    <div className="scrollbar-thin flex-1 overflow-y-auto px-2 pb-2">
      {items.length === 0 && (
        <p className="py-8 text-center text-[11px] text-foreground-faint">
          {opsOnly ? 'No operational events — responses appear in Chat.' : 'No activity yet — agents are on standby.'}
        </p>
      )}
      {items.map((e) => {
        const ag = agents.find((a) => a.id === e.agent_id)
        const meta = ag ? getAgentMeta(ag.id) : null
        const Icon = meta?.icon
        return (
          <div key={e.id} className="flex gap-2 border-b border-border/50 py-1.5 last:border-0">
            {Icon && (
              <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded bg-surface-overlay" style={{ color: meta?.accent }}>
                <Icon className="h-3 w-3" />
              </span>
            )}
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="text-[10px] font-medium text-foreground-muted">{ag?.name.split(' ·')[0] || e.agent_id}</span>
                <span className="font-mono text-[9px] text-foreground-faint">{new Date(e.ts).toLocaleTimeString('en-US', { hour12: false })}</span>
              </div>
              <p className={cn('text-[10px] leading-relaxed', LEVEL[e.level] || 'text-foreground-muted')}>{e.message}</p>
            </div>
          </div>
        )
      })}
    </div>
  )
}