// Inbox — shared conversations across channels
function Inbox() {
  const threads = [
    { id: 't1', from: 'Sarah Chen', co: 'Northwind Ltd', preview: 'Yes, Wed 10am BST works — sending invite now. Can you bring the integration roadmap?', chan: 'EMAIL', agent: 'Atlas', state: 'awaiting-human', time: '2m ago', unread: true },
    { id: 't2', from: 'Marcus Liu', co: 'Helix Labs Ltd', preview: "We're evaluating you against three other vendors. Can you share pricing for 50-200 seat range?", chan: 'EMAIL', agent: 'Vesta', state: 'agent-replied', time: '14m ago', unread: true },
    { id: 't3', from: '+44 20 7946 0188', co: 'Compass Bio', preview: 'Call recording: 3m 42s · "I want to see the analytics dashboard before we move forward."', chan: 'VOICE', agent: 'Hermes', state: 'agent-replied', time: '32m ago', unread: false },
    { id: 't4', from: 'Aisha Park', co: 'Lumen', preview: 'Looking forward to it. Will Jordan be on the call as well?', chan: 'EMAIL', agent: 'Vesta', state: 'agent-replied', time: '1h ago', unread: false },
    { id: 't5', from: 'Theo Marsh', co: 'Polymer', preview: '(via Intercom) Hey, the trial expires today. Any chance of an extension while we get budget approval?', chan: 'CHAT', agent: 'Iris', state: 'awaiting-human', time: '2h ago', unread: true },
    { id: 't6', from: 'Jordan Reyes', co: 'Compass Bio', preview: "Quick question on the multi-tenant pricing — does it scale per seat or per tenant?", chan: 'EMAIL', agent: 'Atlas', state: 'agent-drafting', time: '3h ago', unread: false },
    { id: 't7', from: '+44 20 7946 0913', co: 'Strata', preview: 'No answer · scheduled retry for tomorrow 10:00 BST', chan: 'VOICE', agent: 'Hermes', state: 'agent-scheduled', time: '4h ago', unread: false },
    { id: 't8', from: 'Priya Shah', co: 'Glassblock', preview: "Reviewed the proposal — couple of redlines on the SLA section. See attached.", chan: 'EMAIL', agent: 'Atlas', state: 'awaiting-human', time: '6h ago', unread: false },
  ];

  const [selected, setSelected] = React.useState(threads[0]);
  const [filter, setFilter] = React.useState('all');

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Shared inbox · {threads.filter(t => t.state === 'awaiting-human').length} need you · {threads.filter(t => t.unread).length} unread</div>
          <h1 className="page-title">Inbox</h1>
          <div className="page-sub">Email, voice, chat — all in one place. Agents handle what they can. They escalate what they can't.</div>
        </div>
        <div className="page-hd-r">
          <div className="segmented">
            <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>ALL</button>
            <button className={filter === 'awaiting-human' ? 'active' : ''} onClick={() => setFilter('awaiting-human')}>NEED YOU</button>
            <button className={filter === 'agent-replied' ? 'active' : ''} onClick={() => setFilter('agent-replied')}>AGENT HANDLED</button>
          </div>
          <button className="btn"><Icon.Filter className="icon"/>Filter</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '400px 1fr', height: 'calc(100vh - 52px - 160px - 26px)' }}>
        <div style={{ borderRight: '1px solid var(--border)', overflowY: 'auto' }}>
          {threads.filter(t => filter === 'all' || t.state === filter).map(t => (
            <div key={t.id} onClick={() => setSelected(t)} style={{
              padding: '14px 18px',
              borderBottom: '1px solid var(--border)',
              cursor: 'pointer',
              background: selected?.id === t.id ? 'rgba(139, 107, 255, 0.06)' : 'transparent',
              borderLeft: selected?.id === t.id ? '2px solid var(--violet)' : '2px solid transparent',
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div className="row" style={{ gap: 8 }}>
                  {t.unread && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 6px var(--cyan)' }}/>}
                  <span style={{ fontSize: 13, fontWeight: t.unread ? 500 : 400 }}>{t.from}</span>
                </div>
                <span className="mono faint" style={{ fontSize: 10 }}>{t.time}</span>
              </div>
              <div className="dim" style={{ fontSize: 11 }}>{t.co}</div>
              <div className="dim" style={{ fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.preview}</div>
              <div className="row" style={{ gap: 6, marginTop: 4 }}>
                <span className={`channel-chip ${t.chan.toLowerCase()}`}>{t.chan}</span>
                <span className="tag" style={{
                  color: t.state === 'awaiting-human' ? 'var(--warn)' : t.state === 'agent-replied' ? 'var(--cyan)' : 'var(--text-dim)',
                  borderColor: t.state === 'awaiting-human' ? 'rgba(255, 177, 75, 0.3)' : 'var(--border)',
                  background: t.state === 'awaiting-human' ? 'rgba(255, 177, 75, 0.06)' : 'rgba(255, 255, 255, 0.04)',
                }}>{t.state.replace(/-/g, ' ')}</span>
                <span className="mono faint" style={{ fontSize: 10, marginLeft: 'auto' }}>by {t.agent}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ overflowY: 'auto', padding: 24 }}>
          {selected && <ThreadView thread={selected}/>}
        </div>
      </div>
    </div>
  );
}

function ThreadView({ thread }) {
  return (
    <div style={{ maxWidth: 760 }}>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 18 }}>
        <div>
          <h2 className="serif" style={{ margin: 0, fontSize: 22, fontStyle: 'italic' }}>Re: Demiurge demo · founders Q2</h2>
          <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>{thread.from} · {thread.co} · started 3d ago</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <span className={`channel-chip ${thread.chan.toLowerCase()}`}>{thread.chan}</span>
          <button className="btn sm">Take over</button>
          <button className="btn sm">Snooze</button>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { from: 'Atlas', isAgent: true, t: '3d ago', body: 'Hi Sarah — I run growth ops at Demiurge. We help marketing leaders deploy AI operators that handle outbound, qualification, and nurture without the headcount. Worth 15 minutes this week?' },
          { from: thread.from, isAgent: false, t: '3d ago', body: "Hi — yes, I'd be interested. We're spending a lot on SDR tooling right now and looking for consolidation. Wednesday or Thursday afternoon works." },
          { from: 'Atlas', isAgent: true, t: '2d ago', body: 'Great. Wed 2pm BST? I\'ll send an invite with our CEO Reza on the call. Anything specific you\'d like us to cover?' },
          { from: thread.from, isAgent: false, t: 'Just now', body: thread.preview },
        ].map((m, i) => (
          <div key={i} style={{ display: 'flex', gap: 14 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: m.isAgent ? 'linear-gradient(135deg, rgba(139, 107, 255, 0.25), rgba(75, 232, 255, 0.15))' : 'rgba(255, 255, 255, 0.04)', border: `1px solid ${m.isAgent ? 'rgba(139, 107, 255, 0.3)' : 'var(--border)'}`, display: 'grid', placeItems: 'center', fontSize: 11, fontFamily: 'var(--font-mono)', fontWeight: 600, color: m.isAgent ? 'var(--cyan)' : 'var(--text)', flexShrink: 0 }}>
              {m.isAgent ? 'A' : m.from.split(' ').map(x => x[0]).join('').slice(0, 2)}
            </div>
            <div style={{ flex: 1 }}>
              <div className="row" style={{ gap: 8, marginBottom: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{m.from}</span>
                {m.isAgent && <span className="tag" style={{ color: 'var(--violet)', borderColor: 'rgba(139, 107, 255, 0.3)' }}>AGENT</span>}
                <span className="mono faint" style={{ fontSize: 10 }}>{m.t}</span>
              </div>
              <div className="panel" style={{ padding: 14, fontSize: 13, lineHeight: 1.6, background: m.isAgent ? 'rgba(139, 107, 255, 0.04)' : 'rgba(255, 255, 255, 0.025)' }}>
                {m.body}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="panel" style={{ marginTop: 24, padding: 16, border: '1px solid rgba(139, 107, 255, 0.3)', background: 'linear-gradient(135deg, rgba(139, 107, 255, 0.06), rgba(75, 232, 255, 0.03))' }}>
        <div className="row" style={{ marginBottom: 10 }}>
          <Icon.Sparkles style={{ width: 14, height: 14 }} className="gradient-text"/>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }} className="gradient-text">Atlas suggests</span>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text)' }}>
          Confirmed for Wed 2pm BST. I'll bring the v2 integration roadmap. Let me know if you'd like our security pack ahead of time.
        </div>
        <div className="row" style={{ marginTop: 12, gap: 8 }}>
          <button className="btn primary sm">Send as-is</button>
          <button className="btn sm">Edit</button>
          <button className="btn ghost sm">Discard</button>
        </div>
      </div>
    </div>
  );
}

window.Inbox = Inbox;