// Session view — turn list aside + linear transcript

const SessionScreen = () => {
  const { go, route } = useRouter();
  const session = SESSIONS.find(s => s.id === (route.id || 'a1')) || SESSIONS[0];

  const turnList = [
    [1, 'U', 'lockfile design for the …', 32],
    [2, 'A', 'Both, but for diff reasons …', 980],
    [3, '⚙', 'Read("build.zig")', 0],
    [4, '⚙', '→ 14.2 KB, 318 lines', 0],
    [5, 'A', 'Looking at your build.zig …', 1240, true],
    [6, 'U', 'ok so transitive deps from…', 18],
    [7, 'A', 'Transitive deps need a sep…', 760],
    [8, '⚙', 'Grep("vendor/")', 0],
    [9, '⚙', '→ 47 matches', 0],
    [10, 'A', 'Three of those are header-…', 540],
    [11, 'U', 'how would the cache key …', 22],
    [12, 'A', 'sha256 over the sorted…', 880],
  ];

  return (
    <>
      <div className="subbar">
        <span className="mono muted click" onClick={() => go({ name: 'project', cwd: session.cwd })}>{session.cwd}</span>
        <span style={{ fontWeight: 600 }}>{session.q.slice(0, 56)}{session.q.length > 56 ? '…' : ''}</span>
        <ToolTag tool={session.tool} />
        <HostTag host={session.host} />
        <span className="tag">{session.model.replace('claude-', '')}</span>
        <span style={{ flex: 1 }} />
        <span className="mono muted">{session.turns} turns · {session.tok} tok · started {session.when} · ●open</span>
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '240px 1fr', overflow: 'hidden', minHeight: 0 }}>
        <aside style={{ borderRight: '1px solid var(--rule-2)', overflow: 'auto', background: 'var(--paper-3)', minHeight: 0 }}>
          <div className="thead" style={{ gridTemplateColumns: '24px 14px 1fr 36px', padding: '4px 10px' }}>
            <span>#</span><span></span><span>preview</span><span className="right">tok</span>
          </div>
          {turnList.map(([n, r, t, tok, sel]) => (
            <div key={n} style={{
              display: 'grid', gridTemplateColumns: '24px 14px 1fr 36px',
              padding: '3px 10px', fontSize: 11, gap: 8,
              background: sel ? 'var(--paper-2)' : 'transparent',
              borderLeft: sel ? '2px solid var(--accent)' : '2px solid transparent',
              cursor: 'pointer',
              alignItems: 'center',
            }}>
              <span className="mono muted">{n}</span>
              <span style={{ color: r === 'A' ? 'var(--accent-ink)' : 'var(--ink-3)', fontWeight: 700, fontFamily: 'var(--mono)' }}>{r}</span>
              <span className="truncate">{t}</span>
              <span className="right mono muted" style={{ fontSize: 10 }}>{tok || '—'}</span>
            </div>
          ))}
        </aside>

        <main style={{ overflow: 'auto', minHeight: 0 }}>
          {TURNS.map((t, i) => (
            <div key={i} className={'turn ' + t.role + (t.kind ? ' tool' : '')}>
              <div className="meta">
                <span className={'role-' + t.role.toUpperCase()}>{t.role.toUpperCase()}</span>
                {t.kind && <span className="tag" style={{ fontSize: 9.5 }}>{t.kind}</span>}
                {t.model && <span className="mono">{t.model}</span>}
                {t.tIn != null && <span className="mono">in {t.tIn} · out {t.tOut}</span>}
                <span style={{ flex: 1 }} />
                <span className="mono" style={{ opacity: 0.5 }}>#{i + 1}</span>
              </div>
              <div className="body">{t.text}</div>
            </div>
          ))}
        </main>
      </div>
    </>
  );
};

Object.assign(window, { SessionScreen });