// Stage 01 — tokenization.
// Shows the raw prompt breaking apart into token chips with integer IDs.
// Active token (the one currently being processed) glows amber.
function StageTokenize({ tokens, activeIdx, progress, active, onExplain }) {
  return (
    <Panel stage={1} title="Tokenize" subtitle="text → integer ids via byte-pair encoding" active={active} progress={progress} onExplain={onExplain}>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', minHeight: 52 }}>
        {tokens.length === 0 && (
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-faint)' }}>waiting for prompt…</div>
        )}
        {tokens.map((t, i) => {
          const isActive = active && i === activeIdx;
          const isPast = active && i < activeIdx;
          const tokLabel = t.text.replace(/ /g, '␣');
          return (
            <div key={i} style={{
              display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch',
              border: `1px solid ${isActive ? 'var(--amber)' : 'var(--line-strong)'}`,
              borderRadius: 4,
              background: isActive ? 'color-mix(in oklch, var(--amber) 12%, transparent)' : (isPast ? 'rgba(140,255,160,0.04)' : 'transparent'),
              transition: 'border-color 200ms, background 200ms',
              boxShadow: isActive ? '0 0 14px color-mix(in oklch, var(--amber) 50%, transparent)' : 'none',
            }}>
              <div style={{
                padding: '4px 8px 2px', fontFamily: 'var(--mono)', fontSize: 12,
                color: isActive ? 'var(--amber)' : (isPast ? 'var(--ink)' : 'var(--text-dim)'),
                textShadow: isActive ? '0 0 8px var(--amber)' : 'none',
                fontWeight: 500, whiteSpace: 'pre',
              }}>{tokLabel}</div>
              <div style={{
                padding: '0 8px 3px', fontFamily: 'var(--mono)', fontSize: 9,
                color: isActive ? 'var(--amber)' : 'var(--text-faint)', letterSpacing: '0.04em',
              }}>#{String(t.id).padStart(5, '0')}</div>
            </div>
          );
        })}
      </div>
    </Panel>
  );
}
window.StageTokenize = StageTokenize;