// Agent library. Not a wall of cards: a filter column, grouped results by domain,
// and a detail panel that reads like a professional resource sheet.
function ScreenAgents({ go, notify }) {
  const { Panel, Button, IconButton, Badge, SearchField, SegmentedControl, AgentCard, AgentGlyph,
          Tag, DataTable, ProgressBar, Callout } = window.EG;
  const D = window.EGData;
  const [domain, setDomain] = React.useState('todos');
  const [selected, setSelected] = React.useState(D.agents[0]);
  const [q, setQ] = React.useState('');

  const list = D.agents.filter(a =>
    (domain === 'todos' || a.domain === domain) &&
    (q === '' || a.name.toLowerCase().indexOf(q.toLowerCase()) >= 0));
  const groups = [['intel', 'Intelligence'], ['build', 'Build'], ['comms', 'Comms']]
    .map(([k, label]) => [label, list.filter(a => a.domain === k)])
    .filter(([, arr]) => arr.length);

  return (
    <div className="ws-cols-3" style={{ flex: 1 }}>
      <aside className="ws-col">
        <div className="ws-col-scroll ws-stack">
          <div>
            <span className="eg-eyebrow">Dominio</span>
            <div className="ws-stack-sm" style={{ marginTop: 10 }}>
              {[['todos', 'Todos los agentes', 17], ['intel', 'Intelligence', 3], ['build', 'Build', 5], ['comms', 'Comms', 4]].map(([id, label, n]) => (
                <button key={id} type="button" onClick={() => setDomain(id)}
                  style={{ display: 'flex', alignItems: 'center', gap: 9, height: 30, padding: '0 9px', borderRadius: 'var(--radius-sm)', border: '1px solid ' + (domain === id ? 'var(--border-accent)' : 'transparent'), background: domain === id ? 'var(--surface-selected)' : 'transparent', color: domain === id ? 'var(--text-primary)' : 'var(--text-tertiary)', font: 'var(--type-body-sm)', textAlign: 'left' }}>
                  <span style={{ width: 6, height: 6, borderRadius: 2, background: id === 'intel' ? 'var(--domain-intel)' : id === 'build' ? 'var(--domain-build)' : id === 'comms' ? 'var(--domain-comms)' : 'var(--gray-600)' }} />
                  <span style={{ flex: 1 }}>{label}</span>
                  <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{n}</span>
                </button>
              ))}
            </div>
          </div>
          <div>
            <span className="eg-eyebrow">Favoritos</span>
            <div className="ws-stack-sm" style={{ marginTop: 10 }}>
              {D.agents.filter(a => a.fav).map(a => (
                <button key={a.code} type="button" onClick={() => setSelected(a)}
                  style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 6px', borderRadius: 'var(--radius-sm)', border: 0, background: selected.code === a.code ? 'var(--surface-hover)' : 'transparent', textAlign: 'left' }}>
                  <AgentGlyph code={a.code} domain={a.domain} size="sm" />
                  <span style={{ flex: 1, font: 'var(--type-body-sm)', color: 'var(--text-secondary)' }}>{a.name}</span>
                  <span className="eg-icon" style={{ fontSize: 13, color: 'var(--warning)' }}>star</span>
                </button>
              ))}
            </div>
          </div>
          <div>
            <span className="eg-eyebrow">Últimos usados</span>
            <div className="ws-row" style={{ flexWrap: 'wrap', gap: 7, marginTop: 10 }}>
              {['PR', 'RE', 'QA', 'AU'].map(c => {
                const a = D.agents.find(x => x.code === c);
                return <Tag key={c} onClick={() => setSelected(a)}>{a.name}</Tag>;
              })}
            </div>
          </div>
          <Callout tone="neutral" title="Arquitectura abierta">
            Los agentes se añaden sin tocar la navegación: dominio, capacidades y herramientas son datos.
          </Callout>
        </div>
      </aside>

      <section style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <div className="ws-subbar">
          <SearchField value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar por nombre, capacidad o herramienta" width={340} size="sm" shortcut="/" />
          <SegmentedControl size="sm" value="grid" options={[{ value: 'grid', label: 'Cuadrícula', icon: 'grid_view' }, { value: 'list', label: 'Lista', icon: 'list' }]} />
          <span style={{ marginLeft: 'auto', font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{list.length} agentes</span>
          <Button size="sm" variant="secondary" icon="add">Nuevo agente</Button>
        </div>
        <div className="ws-scroll ws-pad ws-stack" style={{ paddingTop: 18 }}>
          {groups.map(([label, arr]) => (
            <div key={label}>
              <div className="ws-row" style={{ gap: 10, marginBottom: 12 }}>
                <span className="eg-eyebrow">{label}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
                <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)' }}>{arr.length}</span>
              </div>
              <div className="ws-grid-3">
                {arr.map(a => (
                  <AgentCard key={a.code} name={a.name} code={a.code} domain={a.domain} role={a.role}
                    description={a.desc} capabilities={a.caps} tools={a.tools} lastUsed={a.used} favorite={a.fav}
                    selected={selected.code === a.code} status={a.code === 'PR' ? 'running' : 'idle'}
                    onClick={() => setSelected(a)} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <aside className="ws-col ws-col--right">
        <div className="ws-col-scroll ws-stack">
          <div className="ws-row" style={{ gap: 12 }}>
            <AgentGlyph code={selected.code} domain={selected.domain} size="xl" running={selected.code === 'PR'} />
            <div style={{ minWidth: 0 }}>
              <div style={{ font: 'var(--type-h4)', letterSpacing: 'var(--tracking-tight)' }}>{selected.name}</div>
              <div className="eg-eyebrow" style={{ marginTop: 4 }}>{selected.role}</div>
            </div>
          </div>
          <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-secondary)', lineHeight: 1.55 }}>{selected.desc}</p>
          <Button fullWidth icon="bolt" onClick={() => { notify({ tone: 'running', title: 'Ejecución iniciada', description: selected.name + ' · ACME Industrial' }); go('agent'); }}>Ejecutar con ACME Industrial</Button>
          <div>
            <span className="eg-eyebrow">Puede</span>
            <ul className="ws-list ws-stack-sm" style={{ marginTop: 10 }}>
              {selected.caps.map(c => (
                <li key={c} className="ws-row" style={{ gap: 9, alignItems: 'flex-start' }}>
                  <span className="eg-icon eg-icon--sm" style={{ fontSize: 15, marginTop: 1, color: 'var(--accent-text)' }}>check</span>
                  <span style={{ font: 'var(--type-body-sm)', color: 'var(--text-secondary)' }}>{c}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <span className="eg-eyebrow">Herramientas</span>
            <div className="ws-row" style={{ flexWrap: 'wrap', gap: 7, marginTop: 10 }}>
              {selected.tools.map(t => <Badge key={t} tone="neutral" variant="outline">{t}</Badge>)}
            </div>
          </div>
          <div>
            <span className="eg-eyebrow">Workflows compatibles</span>
            <div className="ws-stack-sm" style={{ marginTop: 10 }}>
              {['Propuesta comercial', 'Diagnóstico de operación', 'Onboarding de cliente'].map(w => (
                <button key={w} type="button" onClick={() => go('flows')} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 10px', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', textAlign: 'left' }}>
                  <span className="eg-icon eg-icon--sm" style={{ color: 'var(--text-muted)' }}>account_tree</span>
                  <span style={{ flex: 1, font: 'var(--type-body-sm)' }}>{w}</span>
                  <span className="eg-icon eg-icon--sm" style={{ fontSize: 15, color: 'var(--text-muted)' }}>chevron_right</span>
                </button>
              ))}
            </div>
          </div>
          <div>
            <span className="eg-eyebrow">Uso</span>
            <div style={{ marginTop: 10 }}>
              <ProgressBar value={selected.runs} max={220} label={selected.runs + ' ejecuciones'} size="sm" />
              <div style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', marginTop: 8 }}>Último uso {selected.used} · tasa de aprobación 94%</div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { ScreenAgents });