function Agents({ selectedId, onSelect, onClose }) {
  const [filter, setFilter] = React.useState('all');
  const filtered = AGENTS.filter(a => filter === 'all' ? true : a.status === filter);
  const selected = AGENTS.find(a => a.id === selectedId);

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Operators · {AGENTS.length} configured · {AGENTS.filter(a=>a.status==='live').length} live</div>
          <h1 className="page-title">Your <em>operators</em></h1>
          <div className="page-sub">Autonomous workers acting on your behalf. Each one has a defined role, a budget, and a playbook. They work in parallel — and they don't sleep.</div>
        </div>
        <div className="page-hd-r">
          <div className="segmented">
            <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>ALL</button>
            <button className={filter === 'live' ? 'active' : ''} onClick={() => setFilter('live')}>LIVE</button>
            <button className={filter === 'paused' ? 'active' : ''} onClick={() => setFilter('paused')}>PAUSED</button>
            <button className={filter === 'error' ? 'active' : ''} onClick={() => setFilter('error')}>ERRORS</button>
          </div>
          <button className="btn"><Icon.Filter className="icon"/>Filter</button>
          <button className="btn primary"><Icon.Plus className="icon"/>Deploy operator</button>
        </div>
      </div>

      <div style={{ padding: 24 }}>
        <div className="agent-grid">
          {filtered.map(a => {
            const I = Icon[a.icon] || Icon.Bolt;
            return (
              <div key={a.id} className={`agent-card ${selectedId === a.id ? 'selected' : ''}`} onClick={() => onSelect(a.id)}>
                <div className="agent-hd">
                  <div className="agent-avatar">
                    <I/>
                  </div>
                  <div className="agent-info">
                    <div className="row" style={{ justifyContent: 'space-between' }}>
                      <span className="agent-name serif" style={{ fontSize: 17 }}>{a.name}</span>
                      <StatusTag status={a.status}/>
                    </div>
                    <span className="agent-role">{a.role} · {a.model}</span>
                  </div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 12, lineHeight: 1.5 }}>{a.desc}</div>
                <div style={{ marginBottom: 12 }}>
                  <Sparkline data={fakeStream(a.id.charCodeAt(1), 32, 14, 10)} w={296} h={32} gradient/>
                </div>
                <div className="agent-stats">
                  <div className="agent-stat">
                    <span className="lbl">RAN · 24H</span>
                    <span className="val">{a.sent24.toLocaleString()}</span>
                  </div>
                  <div className="agent-stat">
                    <span className="lbl">BOOKED</span>
                    <span className="val up">{a.booked || '—'}</span>
                  </div>
                  <div className="agent-stat">
                    <span className="lbl">COST · 24H</span>
                    <span className="val">£{a.cost.toFixed(2)}</span>
                  </div>
                </div>
                {a.queue > 0 && (
                  <div className="row mono faint" style={{ fontSize: 10, marginTop: 12, justifyContent: 'space-between' }}>
                    <span>QUEUE</span>
                    <span style={{ color: a.queue > 100 ? 'var(--warn)' : 'var(--text-dim)' }}>{a.queue.toLocaleString()} pending</span>
                  </div>
                )}
              </div>
            );
          })}
          <DeployCard/>
        </div>
      </div>

      {selected && <AgentDrawer agent={selected} onClose={onClose}/>}
    </div>
  );
}

function DeployCard() {
  return (
    <div className="agent-card" style={{
      border: '1px dashed var(--border-strong)',
      background: 'transparent',
      display: 'grid', placeItems: 'center',
      minHeight: 280,
      cursor: 'pointer',
    }}>
      <div style={{ textAlign: 'center', padding: 24 }}>
        <div style={{
          width: 48, height: 48,
          borderRadius: 12,
          background: 'linear-gradient(135deg, rgba(139, 107, 255, 0.2), rgba(75, 232, 255, 0.12))',
          border: '1px solid rgba(139, 107, 255, 0.3)',
          display: 'grid', placeItems: 'center',
          margin: '0 auto 14px',
        }}>
          <Icon.Plus style={{ width: 20, height: 20, color: 'var(--cyan)' }}/>
        </div>
        <div className="serif" style={{ fontSize: 18, marginBottom: 4, fontStyle: 'italic' }}>Deploy operator</div>
        <div className="dim" style={{ fontSize: 12, maxWidth: 220, margin: '0 auto' }}>Pick a template or write a playbook from scratch.</div>
      </div>
    </div>
  );
}

function AgentDrawer({ agent, onClose }) {
  const I = Icon[agent.icon] || Icon.Bolt;
  const [tab, setTab] = React.useState('overview');
  return (
    <React.Fragment>
      <div className="drawer-backdrop" onClick={onClose}/>
      <aside className="drawer">
        <div className="drawer-hd">
          <div className="agent-avatar" style={{ width: 48, height: 48 }}>
            <I/>
          </div>
          <div style={{ flex: 1 }}>
            <div className="row" style={{ gap: 10, marginBottom: 4 }}>
              <h2 className="serif" style={{ margin: 0, fontSize: 28, fontStyle: 'italic' }}>{agent.name}</h2>
              <StatusTag status={agent.status}/>
            </div>
            <div className="mono faint" style={{ fontSize: 11 }}>{agent.role} · {agent.model} · operator/{agent.id}</div>
          </div>
          <button className="icon-btn close" onClick={onClose}><Icon.X/></button>
        </div>

        <div style={{ padding: '0 24px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 4 }}>
          {['overview', 'config', 'playbook', 'logs', 'cost'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              padding: '10px 12px',
              fontSize: 12,
              color: tab === t ? 'var(--text)' : 'var(--text-dim)',
              borderBottom: tab === t ? '2px solid var(--cyan)' : '2px solid transparent',
              textTransform: 'capitalize',
              fontFamily: 'var(--font-mono)',
              letterSpacing: '0.06em',
              marginBottom: -1,
            }}>{t}</button>
          ))}
        </div>

        <div className="drawer-body">
          {tab === 'overview' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <p style={{ margin: 0, color: 'var(--text)', fontSize: 13, lineHeight: 1.6 }}>{agent.desc}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
                <DrawerStat label="RAN · 24H" val={agent.sent24.toLocaleString()}/>
                <DrawerStat label="REPLIED" val={agent.replied.toLocaleString()}/>
                <DrawerStat label="BOOKED" val={agent.booked} hi/>
                <DrawerStat label="ACCURACY" val={agent.accuracy + '%'}/>
                <DrawerStat label="COST · 24H" val={'£' + agent.cost.toFixed(2)}/>
                <DrawerStat label="QUEUE" val={agent.queue.toLocaleString()}/>
              </div>

              <div>
                <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Throughput · 7d</div>
                <div className="panel" style={{ padding: 16 }}>
                  <Sparkline data={fakeStream(agent.id.charCodeAt(1), 48, 14, 14)} w={460} h={80} gradient/>
                </div>
              </div>

              <div>
                <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Recent decisions</div>
                <div className="panel">
                  {[
                    { t: '14:32:08', msg: 'Replied to Sarah Chen · "Yes, Wed 10am BST works"' },
                    { t: '14:29:15', msg: 'Skipped Marcus Liu · already in CRM with status active' },
                    { t: '14:24:01', msg: 'Booked meeting · auto-routed to AE Jordan' },
                    { t: '14:18:55', msg: 'Sent follow-up sequence step 3 · Acme Corp' },
                  ].map((r, i, arr) => (
                    <div key={i} style={{ padding: '11px 14px', borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none', display: 'flex', gap: 12, fontSize: 12 }}>
                      <span className="mono faint" style={{ fontSize: 10 }}>{r.t}</span>
                      <span style={{ color: 'var(--text-dim)' }}>{r.msg}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="row" style={{ gap: 8 }}>
                {agent.status === 'live' ? (
                  <button className="btn"><Icon.Pause className="icon"/>Pause operator</button>
                ) : (
                  <button className="btn primary"><Icon.Play className="icon"/>Resume operator</button>
                )}
                <button className="btn">Open playbook</button>
                <button className="btn ghost" style={{ marginLeft: 'auto', color: 'var(--danger)' }}>Decommission</button>
              </div>
            </div>
          )}
          {tab === 'config' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <ConfigRow label="MODEL" val={agent.model} hint="Reasoning model used for decisions"/>
              <ConfigRow label="BUDGET / DAY" val="£50.00" hint="Hard cap. Auto-pauses on overage."/>
              <ConfigRow label="ICP" val="B2B SaaS · Series A-C · UK/EU" hint="Used to filter inbound + score leads"/>
              <ConfigRow label="TONE" val="Direct, dry, founder-to-founder" hint="System prompt tone modifier"/>
              <ConfigRow label="ESCALATION" val="Slack #sales-handoff · @reza" hint="When the agent doesn't have authority"/>
              <ConfigRow label="WORKING HOURS" val="Mon-Fri · 06:00–20:00 BST" hint="Outside hours: queue, don't send"/>
            </div>
          )}
          {tab === 'playbook' && (
            <pre style={{
              background: 'rgba(0, 0, 0, 0.3)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius)',
              padding: 18,
              fontSize: 11,
              fontFamily: 'var(--font-mono)',
              lineHeight: 1.7,
              color: 'var(--text-dim)',
              whiteSpace: 'pre-wrap',
              margin: 0,
            }}>{`# ${agent.name} · playbook
role:        ${agent.role.toLowerCase()}
objective:   maximize booked meetings within ICP
authority:
  - send  email  to  prospects
  - book  on     calendar
  - skip  leads  out_of_icp
  - escalate     -> human

guardrails:
  - daily_send_cap:  500
  - never_email:     suppression_list, competitor_domains
  - require_review:  >£10k_arr_signal

style:
  - max  3  sentences
  - never  use  exclamation_marks
  - end  with  one  question

routing:
  - reply.positive   -> book + notify_ae
  - reply.objection  -> handle_objection (2 attempts) -> escalate
  - reply.unsubscribe -> suppress + close_thread
`}</pre>
          )}
          {tab === 'logs' && (
            <div className="panel">
              {Array.from({ length: 10 }).map((_, i) => (
                <div key={i} className="feed-item">
                  <span className="feed-time mono">14:{32 - i}:0{i}</span>
                  <span className="feed-dot ok"/>
                  <span className="feed-msg mono" style={{ fontSize: 11 }}>
                    decision.evaluate(lead_id={1000 + i}, score=8{i % 9}, action=send) → ok
                  </span>
                  <span className="feed-meta">{(180 + i * 12)}ms</span>
                </div>
              ))}
            </div>
          )}
          {tab === 'cost' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="panel" style={{ padding: 18 }}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
                  <span className="dim">MONTH-TO-DATE</span>
                  <span className="serif" style={{ fontSize: 24, fontStyle: 'italic' }}>£{(agent.cost * 22).toFixed(2)}</span>
                </div>
                <BarSeries data={Array.from({ length: 30 }, (_, i) => 30 + Math.sin(i * 0.3) * 14 + Math.cos(i * 0.5) * 10)} w={460} h={60} color="var(--violet)"/>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
                <DrawerStat label="INPUT TOKENS" val="2.4M"/>
                <DrawerStat label="OUTPUT TOKENS" val="412k"/>
                <DrawerStat label="$ / BOOKED" val="£1.18"/>
              </div>
            </div>
          )}
        </div>
      </aside>
    </React.Fragment>
  );
}

function DrawerStat({ label, val, hi }) {
  return (
    <div style={{ padding: 14, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
      <div className="mono faint" style={{ fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 18, color: hi ? 'var(--cyan)' : 'var(--text)' }}>{val}</div>
    </div>
  );
}

function ConfigRow({ label, val, hint }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 16, alignItems: 'flex-start' }}>
      <span className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', paddingTop: 4 }}>{label}</span>
      <div>
        <div style={{ padding: '8px 12px', background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>{val}</div>
        <div className="faint" style={{ fontSize: 11, marginTop: 6 }}>{hint}</div>
      </div>
    </div>
  );
}

window.Agents = Agents;