frontend/src/components/TurnCard.jsx

import { CodeBlock } from './CodeBlock.jsx'

const KIND_STYLES = {
  draft:        'text-accent border-accent',
  run_baseline: 'text-[#7ecfc5] border-[#5a9c94]',
  inspect:      'text-[#b5a5e0] border-[#7e6ea8]',
  commit:       'text-[#7ab68c] border-[#4e7c5c]',
}

export function TurnCard({ turn, kind, action_str, output, duration_s,
                           budget_remaining, code }) {
  const chipClass = KIND_STYLES[kind] || 'text-ink border-border'

  return (
    <div className="rounded-lg border border-border bg-surface p-4 shadow-card">
      <div className="flex items-center gap-3 pb-2.5 mb-2.5
                      border-b border-dashed border-border/60">
        <span className="font-serif font-semibold text-[0.98rem] tracking-tight">
          Turn {turn}
        </span>
        <span className={`chip ${chipClass}`}>{kind}</span>
        <span className="ml-auto font-mono text-xs text-subtle">
          {duration_s.toFixed(1)}s · budget <strong className="text-ink">{budget_remaining}</strong>
        </span>
      </div>

      <Row label="Action">{action_str}</Row>
      <Row label="Output">
        {output.length === 0 ? 'ok' : output.map((o, i) => (
          <StatusChip key={i} {...o} />
        ))}
      </Row>

      {code && (
        <div className="mt-3">
          <CodeBlock code={code.trim()} language="python" />
        </div>
      )}
    </div>
  )
}

function Row({ label, children }) {
  return (
    <div className="grid grid-cols-[70px_1fr] gap-3 items-baseline py-1">
      <div className="text-[0.68rem] font-semibold uppercase tracking-[0.1em]
                      text-subtle pt-0.5">{label}</div>
      <div className="text-[0.9rem] leading-[1.55] flex flex-wrap gap-2 items-center">
        {children}
      </div>
    </div>
  )
}

function StatusChip({ kind, text }) {
  const cls = {
    good: 'text-good border-good/40 bg-good/10',
    warn: 'text-warn border-warn/40 bg-warn/10',
    bad:  'text-bad  border-bad/40  bg-bad/10',
    info: 'text-ink  border-border  bg-transparent',
  }[kind] || 'text-ink border-border'
  return (
    <span className={`inline-block px-1.5 py-0.5 rounded border text-xs font-medium ${cls}`}
          dangerouslySetInnerHTML={{ __html: text }} />
  )
}