import React from 'react'
import type { Turn } from './useSession'

const ROLE_GLYPH: Record<Turn['role'], string> = {
  user: '▸',
  assistant: '◆',
  tool: '·',
}

interface TurnListProps {
  turns: Turn[]
  selected: number
  onSelect: (seq: number) => void
}

export function TurnList({
  turns,
  selected,
  onSelect,
}: TurnListProps): React.JSX.Element {
  return (
    <aside className="session-aside">
      <div
        className="thead"
        style={{ gridTemplateColumns: '24px 14px 1fr 36px', padding: '4px 10px' }}
      >
        <span>#</span>
        <span />
        <span>preview</span>
        <span className="right">tok</span>
      </div>
      {turns.map((t) => {
        const isSel = t.i === selected
        const tokens = (t.tokensIn ?? 0) + (t.tokensOut ?? 0)
        const preview = t.body.length > 32 ? t.body.slice(0, 32) + '…' : t.body
        return (
          <div
            key={t.i}
            className={`session-aside-row${isSel ? ' selected' : ''}`}
            onClick={() => onSelect(t.i)}
          >
            <span className="mono muted">{t.i}</span>
            <span
              style={{
                color:
                  t.role === 'assistant' ? 'var(--accent-ink)' : 'var(--ink-3)',
                fontWeight: 700,
                fontFamily: 'var(--mono)',
              }}
            >
              {ROLE_GLYPH[t.role]}
            </span>
            <span className="truncate">{preview}</span>
            <span className="right mono muted" style={{ fontSize: 10 }}>
              {tokens > 0 ? tokens : '—'}
            </span>
          </div>
        )
      })}
    </aside>
  )
}