import type { JSX } from 'react'
import { formatDurationMs, formatRelativeTime } from './format'
import type { AgentTurn } from './AgentFeed'

const PHASE_CLASS: Record<string, string> = {
  'llm-implement': 'bg-[var(--mod-color-run-segment-implement)]/15 text-success',
  gate0: 'bg-[var(--mod-color-run-segment-gate)]/15 text-info',
  'llm-review': 'bg-[var(--mod-color-run-segment-review)]/15 text-warning',
  'llm-fixer': 'bg-[var(--mod-color-run-segment-fixer)]/15 text-accent',
}

export function TurnCard(props: { turn: AgentTurn }): JSX.Element {
  const { turn } = props
  const absoluteTime = new Date(turn.at).toISOString()

  return (
    <article
      data-testid="agent-turn-card"
      className="grid gap-3 rounded-lg border border-border border-l-2 border-l-info bg-surface px-4 py-3 sm:grid-cols-[8rem_minmax(0,1fr)]"
    >
      <div className="text-xs tabular-nums text-fg-subtle">
        <time dateTime={absoluteTime} title={absoluteTime}>
          {formatRelativeTime(turn.at)}
        </time>
        <span
          className={`mt-2 block w-fit rounded-md px-2 py-1 font-semibold ${PHASE_CLASS[turn.phase] ?? 'bg-surface-raised text-fg-muted'}`}
        >
          {turn.phase}
        </span>
      </div>
      <div className="min-w-0">
        <div className="flex items-center gap-2 text-xs text-fg-subtle">
          {turn.durMs === null ? (
            <>
              <span
                data-testid="agent-turn-progress"
                aria-hidden="true"
                className="h-2 w-2 animate-pulse rounded-full bg-success motion-reduce:animate-none"
              />
              <span>In progress</span>
            </>
          ) : (
            <span>{formatDurationMs(turn.durMs)}</span>
          )}
          {turn.journalSeq !== undefined && <span>journal #{turn.journalSeq}</span>}
        </div>
        <p className="mt-1 text-sm font-medium text-fg">{turn.summary}</p>
        {turn.detail && <p className="mt-1 whitespace-pre-wrap text-xs text-fg-muted">{turn.detail}</p>}
      </div>
    </article>
  )
}