// AGENTFORGE-IA — Cajón de detalle del agente
const AgentDrawer = ({ a, cat, onClose, onInstall, onSimulate, onTry }) => {
  if (!a) return null;
  return (
    <>
      <div className="drawer-back" onClick={onClose} />
      <div className="drawer">
        <div className="drawer-head" style={{ display:'flex', alignItems:'flex-start', gap: 14 }}>
          <div className="agent-icon" style={{ width: 48, height: 48, color: a.color, background: `${a.color}1a`, borderColor: `${a.color}33` }}>
            <Icon name={cat?.icon || 'sparkles'} size={22} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
              <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{a.name}</h2>
              {a.verified && <span className="tag ok"><Icon name="verified" size={10} /> Verificado</span>}
            </div>
            <div className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 4 }}>{a.author} · {cat?.name} · {a.id}</div>
            <p style={{ margin: '10px 0 0', color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55 }}>{a.tagline}</p>
            <div style={{ display:'flex', gap: 18, marginTop: 12, fontSize: 12, color: 'var(--ink-3)' }}>
              <span><Icon name="play" size={12} /> {(a.runs/1000).toFixed(0)} k ejecuciones</span>
              <span><Icon name="star" size={12} /> {a.rating.toString().replace('.', ',')} ({a.reviews})</span>
              <span><Icon name="users" size={12} /> {(a.runs/100).toFixed(0)} instalaciones</span>
              <span><Icon name="wallet" size={12} /> {a.price}</span>
            </div>
          </div>
          <button className="btn btn-ghost btn-icon drawer-close" aria-label="Cerrar" title="Cerrar" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="drawer-body">
          <div className="section-title" style={{ marginTop: 0 }}><span>Qué hace</span><span className="line" /></div>
          <ul style={{ paddingLeft: 18, color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.7 }}>
            <li>Escucha eventos nuevos de {cat?.name.toLowerCase()} en los canales configurados.</li>
            <li>Razona paso a paso con recuperación consciente de políticas y uso de herramientas.</li>
            <li>Redacta la respuesta, aplica las salvaguardas y escala cuando duda.</li>
            <li>Escribe una traza estructurada de cada ejecución con señales para evaluación.</li>
          </ul>

          <div className="section-title"><span>Herramientas que usa</span><span className="line" /></div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {(Array.isArray(a.tools)?a.tools:[]).filter(t => !/slack|zendesk/i.test(String(t))).map(t => <span key={t} className="tag">{t}</span>)}
          </div>

          <div className="section-title"><span>Ejecución de ejemplo</span><span className="line" /></div>
          <pre className="mono" style={{ background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 10, padding: 14, fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.7, overflowX: 'auto' }}>
{`> entrada: "ticket prioridad=P2 cliente=acme reembolso=true"
[plan] clasificar → buscar → coincidencia_política → redactar → ramificar
[claude] clasificar(categoría="facturación.reembolso") confianza=0,94
[snowflake] clientes WHERE id='acme' → fila
[política] coincidencia facturación.prorrateo → 0,96
[claude] borrador_respuesta(tono="empático", tokens=312)
< salida: respuesta.borrador, gravedad=P2, ruta=auto-respuesta`}
          </pre>

          <div className="section-title"><span>Reseñas</span><span className="line" /><span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{a.reviews} en total</span></div>
          {[
            ['Marisol Reyes','5','Redujo nuestra cola de triaje un 60 % en la primera semana. Vale cada céntimo.'],
            ['Tomás García','4','Sólido nada más sacarlo. Ojalá los umbrales de escalado fueran por equipo.'],
            ['Aria Méndez','5','Las trazas son oro para afinar. El agente más fácil de depurar que hemos usado.'],
          ].map(([n, r, t], i) => (
            <div key={i} style={{ padding: '10px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 0 }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--bg-3)', display:'grid', placeItems:'center', fontSize: 10, fontWeight: 600, color: 'var(--ink-2)' }}>{n.split(' ').map(s=>s[0]).join('')}</div>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{n}</span>
                <span style={{ color: 'var(--brand)', fontSize: 11 }}>{'★'.repeat(+r)}<span style={{ color: 'var(--ink-4)' }}>{'★'.repeat(5-r)}</span></span>
              </div>
              <p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--ink-2)' }}>{t}</p>
            </div>
          ))}
        </div>
        <div className="drawer-foot">
          <button className="btn" onClick={onTry}><Icon name="play" size={12} /> Probar ahora</button>
          <button className="btn btn-primary" onClick={() => onInstall && onInstall(a)}><Icon name="download" size={13} /> Comprar y desplegar</button>
          {onSimulate && <button className="btn btn-ghost btn-sm" style={{ fontSize: 11, opacity: 0.7 }} onClick={() => onSimulate(a)}>Simular pago (demo)</button>}
        </div>
      </div>
    </>
  );
};
window.AgentDrawer = AgentDrawer;