import { Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { getI18n } from '@/lib/i18n/server'
import { formatTime } from '@/lib/i18n/translate'
import { cn } from '@/lib/cn'
import type { AgentResult } from '@/lib/engine/agents'

/**
 * Agent activity as a feed (§52).
 *
 * The same findings the agent board shows, ordered by when each agent finished rather
 * than by which agent produced them. That ordering is the point: it turns a panel of
 * eight opinions into a narrative — a weak signal, then a pattern match, then a demand
 * reading, then a cascade path — which is how the reasoning actually unfolded.
 *
 * Conclusions only. No chain of thought (§4).
 */
export async function AgentActivity({
  agents,
  startedAt,
  className,
}: {
  agents: AgentResult[]
  startedAt: number
  className?: string
}) {
  const { t, locale } = await getI18n()
  const ar = locale === 'ar'

  // Each agent's own measured cost places it on the feed's clock, so the sequence
  // reflects what actually took longest rather than a decorative stagger.
  let elapsed = 0
  const entries = [...agents]
    .sort((a, b) => a.ordinal - b.ordinal)
    .map((agent) => {
      elapsed += agent.durationMs
      return { agent, at: startedAt + elapsed }
    })

  const TONE: Record<AgentResult['status'], string> = {
    clear: 'text-normal',
    observing: 'text-info',
    flagged: 'text-watch',
    alarming: 'text-critical',
  }

  return (
    <Panel className={className}>
      <PanelHeader title={t('agentStream.title')} subtitle={t('agentStream.hint')} />
      <PanelBody className="pt-0">
        <ol className="relative space-y-3">
          <span
            aria-hidden
            className="absolute inset-y-1 w-px bg-border"
            style={{ insetInlineStart: '3.2rem' }}
          />
          {entries.map(({ agent, at }) => (
            <li key={agent.key} className="flex items-start gap-3">
              <span className="tnum w-12 shrink-0 pt-0.5 text-end font-mono text-[10px] text-text-faint">
                {formatTime(locale, at)}
              </span>
              <span
                aria-hidden
                className={cn(
                  'mt-1.5 size-2 shrink-0 rounded-full ring-4 ring-surface',
                  agent.status === 'alarming'
                    ? 'bg-critical'
                    : agent.status === 'flagged'
                      ? 'bg-watch'
                      : agent.status === 'observing'
                        ? 'bg-info'
                        : 'bg-normal',
                )}
              />
              <div className="min-w-0 flex-1">
                <p className={cn('text-[11px] font-semibold', TONE[agent.status])}>
                  {t(`agents.key.${agent.key}`)}
                </p>
                <p className="mt-0.5 text-[11px] leading-relaxed text-text-muted">
                  {ar ? agent.summaryAr : agent.summary}
                </p>
              </div>
            </li>
          ))}
        </ol>
      </PanelBody>
    </Panel>
  )
}