// AGENTFORGE-IA — Asistente de creación de agente
const Onboarding = ({ data, setRoute, onCreateAgent }) => {
  const [step, setStep] = React.useState(1);
  const [tpl, setTpl] = React.useState('triage');
  const [cat, setCat] = React.useState('support');
  const [tools, setTools] = React.useState(['hubspot']);
  const [name, setName] = React.useState('');
  const [purpose, setPurpose] = React.useState('');
  const [contextFiles, setContextFiles] = React.useState([]);
  const [contextUrls, setContextUrls] = React.useState('');
  const [contextNotes, setContextNotes] = React.useState('');
  const [systemPrompt, setSystemPrompt] = React.useState('');
  const [systemPromptEdited, setSystemPromptEdited] = React.useState(false);
  const notify = (msg) => window.afNotify && window.afNotify(msg);

  const cookingSystemPrompt = React.useMemo(() => `Eres un asistente doméstico especializado en recetas de cocina española.

Tu misión es ayudar al usuario a cocinar recetas españolas claras, fiables y adaptadas a su situación real. Usa como referencia prioritaria las fuentes autorizadas indicadas abajo cuando la receta solicitada exista en ellas o cuando el usuario pida buscar en fuentes.

FUENTES AUTORIZADAS:
https://recetinas.com/seccion/cocina-espanola/
https://recetas.elperiodico.com/recetas-espanolas
https://recetasespanolas.es/aperitivos-espanoles/
https://recetasespanolas.es/postres-tipicos-espanoles/
https://recetasespanolas.es/platos-principales-tipicos-espanoles/
https://recetasespanolas.es/bocadillos-tipicos-espanoles/
https://recetasespanolas.es/salsas-y-aderezos-tipicos-espanoles/
https://recetasespanolas.es/sopas-y-guisos-espanoles/
https://recetasespanolas.es/ensaladas-tipicas-espanolas/
https://recetasespanolas.es/bebidas-tipicas-espanolas/
https://recetasespanolas.es/panes-espanoles/

REGLAS DE RESPUESTA:
- Responde siempre en español claro, cercano y práctico.
- Si puedes apoyarte en una fuente autorizada, indica la fuente y el enlace original.
- Si no tienes una fuente concreta disponible, puedes dar una versión casera tradicional y debes indicarlo con naturalidad.
- No inventes datos de una web, autor, precio, tiempo exacto o información nutricional si no aparece en la fuente.
- Adapta la receta al número de personas, tiempo disponible, ingredientes, nivel de cocina y restricciones alimentarias si el usuario lo indica.
- Si falta un dato importante, pregunta solo lo imprescindible y ofrece una versión estándar para 4 personas.
- No menciones imágenes ni prometas fotografías.

FORMATO OBLIGATORIO:
**Nombre de la receta:** [nombre]

**Fuente:** [web de origen o “versión casera tradicional”]
**Enlace original:** [URL si se ha localizado una fuente]

**Ingredientes**
- ...

**Preparación**
1. ...

**Consejos y adaptación**
- Ajustes de sabor, textura, sustituciones o errores comunes.
- Si procede, conservación, acompañamiento o versión más sencilla.`, []);

  const categoryCounts = React.useMemo(() => {
    const counts = {};
    const agents = Array.isArray(data?.agents) ? data.agents : [];
    agents.forEach((a) => {
      const agentCat = a?.cat || a?.category;
      if (!agentCat) return;
      counts[agentCat] = (counts[agentCat] || 0) + 1;
    });
    return counts;
  }, [data]);

  /**
   * Detecta si el agente doméstico solicitado es realmente de cocina/recetas.
   * @param {string} targetName Nombre visible del agente.
   * @param {string} targetPurpose Finalidad indicada por el usuario.
   * @param {string} targetTemplate Plantilla seleccionada.
   * @param {string} targetCategory Categoría seleccionada.
   * @returns {boolean} True cuando debe aplicarse el prompt culinario canónico.
   */
  const isCookingIntent = React.useCallback((targetName, targetPurpose, targetTemplate, targetCategory) => {
    const normalizedIntent = `${targetName || ''} ${targetPurpose || ''} ${targetTemplate || ''} ${targetCategory || ''}`
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '');
    const hasCookingSignal = /(cocina|receta|recetas|chef|comida|menu|menus|plato|platos|gastronom|cocinar)/.test(normalizedIntent);
    return targetCategory === 'home' && hasCookingSignal;
  }, []);

  const buildSystemPrompt = React.useCallback(() => {
    const cleanName = (name || 'Asistente').trim();
    const cleanPurpose = (purpose || '').trim();
    const purposeLine = cleanPurpose
      ? `Objetivo del agente: ${cleanPurpose}`
      : 'Objetivo del agente: Resolver consultas del usuario con precisión y claridad.';

    if (isCookingIntent(cleanName, cleanPurpose, tpl, cat)) {
      return cookingSystemPrompt;
    }

    const byCategory = {
      sales: 'Especialízate en ventas y prospección: detecta intención de compra, objeciones y próximos pasos comerciales.',
      support: 'Especialízate en atención al cliente: responde dudas frecuentes, procesos y escalado a humano cuando proceda.',
      mkt: 'Especialízate en marketing: propuesta de valor, campañas, contenidos y seguimiento de conversiones.',
      ops: 'Especialízate en operaciones: procesos internos, ejecución ordenada y control de incidencias.',
      home: 'Ayuda en tareas del hogar: organiza compras, menús, mantenimiento, horarios familiares y recordatorios cotidianos sin inventar datos.',
      fin: 'Especialízate en finanzas: claridad en precios, márgenes, cobros y métricas sin inventar datos.',
      hr: 'Especialízate en RR.HH.: procesos de talento, onboarding y políticas internas.',
      eng: 'Especialízate en ingeniería: precisión técnica, diagnóstico paso a paso y buenas prácticas.',
      data: 'Especialízate en datos y analítica: interpretación de métricas, contexto y recomendaciones accionables.',
      legal: 'Especialízate en legal y cumplimiento: identifica riesgos, pide contexto contractual y evita dar asesoramiento jurídico definitivo.',
      research: 'Especialízate en investigación: contrasta fuentes, separa hechos de hipótesis y entrega síntesis accionables.',
      product: 'Especialízate en producto: discovery, priorización, requisitos y decisiones orientadas a valor.',
      creative: 'Especialízate en creatividad y diseño: tono, narrativa, consistencia visual y producción de activos.',
      games: 'Especialízate en juegos y entretenimiento: diseño, mecánicas, contenido y experiencia de usuario lúdica.',
    };
    const categoryInstruction = byCategory[cat] || 'Especialízate en el dominio indicado por el usuario.';
    return [
      `Eres ${cleanName}.`,
      purposeLine,
      categoryInstruction,
      'Responde siempre en el idioma del usuario.',
      'Si falta información crítica, dilo y solicita el dato exacto antes de asumir.',
      'No inventes tarifas, condiciones, horarios ni datos legales.',
    ].join('\n\n');
  }, [name, purpose, cat, tpl, cookingSystemPrompt, isCookingIntent]);

  React.useEffect(() => {
    const mustUseCookingPrompt = isCookingIntent(name, purpose, tpl, cat);
    const currentIsGenericHome = /(Especialízate en uso doméstico|Ayuda en tareas del hogar)/i.test(systemPrompt || '');
    if (mustUseCookingPrompt && (currentIsGenericHome || !systemPrompt.trim())) {
      setSystemPrompt(cookingSystemPrompt);
      setSystemPromptEdited(false);
      return;
    }
    if (systemPromptEdited) return;
    setSystemPrompt(buildSystemPrompt());
  }, [buildSystemPrompt, systemPromptEdited, isCookingIntent, name, purpose, tpl, cat, systemPrompt, cookingSystemPrompt]);

  const steps = [
    { n: 1, t: 'Punto de partida', s: 'plantilla, en blanco, importar' },
    { n: 2, t: 'Categoría y rol', s: 'dónde encaja' },
    { n: 3, t: 'Herramientas y memoria', s: 'qué puede usar' },
    { n: 4, t: 'Comportamiento', s: 'instrucciones, salvaguardas' },
    { n: 5, t: 'Revisar y editar', s: 'abre el editor' },
  ];

  const templates = [
    { id: 'triage', n: 'Triaje de tickets', d: 'Clasifica y enruta tickets entrantes con prioridad y SLA', i: 'headset', c: '#60a5fa' },
    { id: 'customer-care', n: 'Atención al cliente', d: 'Respuestas multicanal con escalado a humano cuando aplique', i: 'users', c: '#60a5fa' },
    { id: 'spanish-cooking', n: 'Chef de Cocina Española', d: 'Recetas españolas con fuentes autorizadas, adaptación al público objetivo y formato claro', i: 'home', c: '#22c55e', cat: 'home' },
    { id: 'home-helper', n: 'Asistente doméstico', d: 'Organiza tareas de casa, compras, menús, citas, recordatorios y pequeñas gestiones familiares', i: 'home', c: '#22c55e', cat: 'home' },
    { id: 'home-maintenance', n: 'Mantenimiento del hogar', d: 'Ayuda a planificar revisiones, reparaciones, proveedores y calendario de mantenimiento', i: 'wrench', c: '#22c55e', cat: 'home' },
    { id: 'renewal', n: 'Renovaciones y churn', d: 'Detecta riesgo, propone acciones y ejecuta seguimiento comercial', i: 'chart', c: '#22d3ee' },
    { id: 'sdr', n: 'SDR outbound', d: 'Prospección personalizada, secuencias y calificación de leads', i: 'megaphone', c: '#f472b6' },
    { id: 'lead-qualify', n: 'Cualificación de leads', d: 'Score de oportunidad y enrutado automático al equipo correcto', i: 'tag', c: '#f472b6' },
    { id: 'research', n: 'Analista de investigación', d: 'Investigación web multietapa con fuentes y resumen ejecutivo', i: 'flask', c: '#fb923c' },
    { id: 'reviewer', n: 'Revisor de PRs', d: 'Revisión técnica de cambios con checklist de calidad', i: 'fork', c: '#ff5b1f' },
    { id: 'qa-automation', n: 'QA automatizado', d: 'Ejecución de pruebas, clasificación de fallos y reporte', i: 'zap', c: '#ff5b1f' },
    { id: 'analyst', n: 'Analista de datos', d: 'Consultas guiadas a warehouse y generación de insights', i: 'database', c: '#818cf8' },
    { id: 'reporting', n: 'Reporting ejecutivo', d: 'KPIs diarios/semanales con alertas y resumen para dirección', i: 'chart', c: '#818cf8' },
    { id: 'collections', n: 'Cobros y facturación', d: 'Seguimiento de impagos, recordatorios y estado de cuenta', i: 'bell', c: '#f59e0b' },
    { id: 'onboarding', n: 'Onboarding de clientes', d: 'Checklist de alta, hitos y comunicación proactiva', i: 'rocket', c: '#34d399' },
    { id: 'blank', n: 'Lienzo en blanco', d: 'Empezar desde cero con flujo totalmente libre', i: 'plus', c: '#7a7f8d' },
  ];

  /**
   * Valida los datos mínimos antes de crear el agente.
   * @returns {boolean} True si el usuario ya puede continuar.
   */
  const validateBasics = () => {
    if (!name.trim()) {
      notify && notify('El nombre del agente es obligatorio');
      setStep(2);
      return false;
    }
    if (!purpose.trim()) {
      notify && notify('La finalidad del agente es obligatoria');
      setStep(2);
      return false;
    }
    return true;
  };

  /**
   * Avanza en el asistente evitando llegar al final con datos obligatorios vacíos.
   * @returns {void}
   */
  const goNext = () => {
    if (step >= 2 && !validateBasics()) return;
    setStep(Math.min(5, step + 1));
  };

  /**
   * Cambia de paso sin permitir llegar a revisión con datos obligatorios vacíos.
   * @param {number} targetStep Paso de destino.
   * @returns {void}
   */
  const goToStep = (targetStep) => {
    if (targetStep >= 3 && !validateBasics()) return;
    setStep(targetStep);
  };

  /**
   * Crea el agente local y prepara el Editor con el contexto elegido.
   * @param {string} deployment Estado inicial del agente creado.
   * @returns {void}
   */
  const completeCreation = (deployment) => {
    if (!validateBasics()) return;
    const finalSystemPrompt = isCookingIntent(name, purpose, tpl, cat)
      ? cookingSystemPrompt
      : systemPrompt.trim();

    const created = onCreateAgent ? onCreateAgent({
      name: name.trim(),
      cat,
      tools,
      tagline: purpose.trim(),
      systemPrompt: finalSystemPrompt,
      contextFiles: contextFiles.map((f) => ({ name: f.name, size: f.size, type: f.type })),
      contextUrls: contextUrls.split(/\r?\n/).map((u) => u.trim()).filter(Boolean),
      contextNotes: contextNotes.trim(),
      deployment,
    }) : null;

    try {
      localStorage.setItem('af_builder_seed_v1', JSON.stringify({
        fromOnboarding: true,
        blank: true,
        agentId: created?.id || null,
        agentName: name.trim(),
        purpose: purpose.trim(),
        contextFiles: contextFiles.map((f) => ({ name: f.name, size: f.size, type: f.type })),
        contextUrls: contextUrls.split(/\r?\n/).map((u) => u.trim()).filter(Boolean),
        contextNotes: contextNotes.trim(),
        category: cat,
        tools,
        template: tpl,
        systemPrompt: finalSystemPrompt,
        createdAt: Date.now(),
      }));
    } catch (_) {}

    setRoute('builder');
  };

  const toolList = [


    { id: 'linear', n: 'Linear', i: 'grid' },
    { id: 'snowflake', n: 'Snowflake', i: 'database' },
    { id: 'notion', n: 'Notion', i: 'cube' },
    { id: 'gmail', n: 'Gmail', i: 'send' },
    { id: 'hubspot', n: 'HubSpot', i: 'users' },
    { id: 'github', n: 'GitHub', i: 'fork' },
  ];

  return (
    <div className="wiz-root">
      <div className="page-head" style={{ position: 'static', padding: '0 0 14px', borderBottom: 0 }}>
        <h1 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Forja un agente nuevo</h1>
        <span className="crumbs mono">configuración <span>›</span> <span style={{ color: 'var(--ink)' }}>paso {step} de 5</span></span>
        <div className="actions" style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost" disabled={step === 1} onClick={() => setStep(Math.max(1, step - 1))}><Icon name="chevron-left" size={12} /> Atrás</button>
          <button className="btn btn-ghost" disabled={step === 5} onClick={goNext}>Siguiente <Icon name="chevron-right" size={12} /></button>
          <button className="btn btn-ghost" onClick={() => setRoute('library')}><Icon name="x" size={12} /> Cancelar</button>
        </div>
      </div>

      <div className="wiz-stepper">
        {steps.map(s => (
          <button key={s.n} type="button" className={'wiz-step ' + (step === s.n ? 'active' : step > s.n ? 'done' : '')} onClick={() => goToStep(s.n)} style={{ textAlign:'left' }}>
            <div className="num">{step > s.n ? <Icon name="check" size={11} stroke={2.4} /> : s.n}</div>
            <div className="lbl"><b>{s.t}</b><span style={{ color: 'var(--ink-4)', fontSize: 11 }}>{s.s}</span></div>
          </button>
        ))}
      </div>

      {step === 1 && (
        <div>
          <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Elige un punto de partida</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 16px', fontSize: 13 }}>Las plantillas usan grafos y prompts probados. Puedes editar todo después.</p>
          <div className="tile-grid">
            {templates.map(t => (
              <button
                key={t.id}
                className={'tile' + (tpl === t.id ? ' selected' : '')}
                onClick={() => {
                  setTpl(t.id);
                  if (t.cat) setCat(t.cat);
                }}
              >
                <div className="tile-icon" style={tpl === t.id ? {} : { color: t.c, background: `${t.c}1a` }}><Icon name={t.i} size={14} /></div>
                <h6>{t.n}</h6>
                <p>{t.d}</p>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 2 && (
        <div>
          <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>¿Dónde encaja?</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 16px', fontSize: 13 }}>Esto fija valores por defecto para evaluaciones, gobernanza y dónde aparece el agente en el marketplace.</p>
          <div style={{ marginBottom: 18 }}>
            <label style={{ fontSize: 12, color: 'var(--ink-3)' }}>Nombre del agente</label>
            <input
              className="input"
              style={{ marginTop: 6, height: 38, fontSize: 14 }}
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder="Ej: Asistente Arenfit"
            />
          </div>
          <div style={{ marginBottom: 18 }}>
            <label style={{ fontSize: 12, color: 'var(--ink-3)' }}>Finalidad del agente</label>
            <textarea
              className="textarea"
              rows={3}
              style={{ marginTop: 6, fontSize: 13 }}
              value={purpose}
              onChange={e => setPurpose(e.target.value)}
              placeholder="Ej: Resolver dudas de tarifas, horarios y servicios del gimnasio."
            />
          </div>
          <label style={{ fontSize: 12, color: 'var(--ink-3)' }}>Categoría</label>
          <div className="cat-grid" style={{ marginTop: 6 }}>
            {data.categories.map(c => (
              <button key={c.id} className={'cat-card' + (cat === c.id ? ' active' : '')} onClick={() => setCat(c.id)} style={{ '--accent': c.accent }}>
                <div className="cat-icon" style={{ color: c.accent, background: `${c.accent}1a`, borderColor: `${c.accent}33` }}>
                  <Icon name={c.icon} size={16} />
                </div>
                <div className="cat-name">{c.name}</div>
                <div className="cat-count mono" style={{ fontSize: 14 }}>{categoryCounts[c.id] || 0}<span style={{ fontSize: 10, color: 'var(--ink-4)', marginLeft: 4 }}>similares</span></div>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 3 && (
        <div>
          <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Herramientas y memoria</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 16px', fontSize: 13 }}>Elige las integraciones que este agente puede invocar y añade documentos para entrenar su contexto inicial.</p>
          <div className="tile-grid">
            {toolList.map(t => (
              <button key={t.id} className={'tile' + (tools.includes(t.id) ? ' selected' : '')} onClick={() => setTools(tools.includes(t.id) ? tools.filter(x => x !== t.id) : [...tools, t.id])}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="tile-icon" style={{ marginBottom: 0 }}><Icon name={t.i} size={14} /></div>
                  <h6 style={{ flex: 1 }}>{t.n}{t.note ? <span style={{ marginLeft: 6, color: 'var(--warn)', fontSize: 10.5 }}>({t.note})</span> : null}</h6>
                  {tools.includes(t.id) && <Icon name="check" size={14} style={{ color: 'var(--brand)' }} />}
                </div>
              </button>
            ))}
          </div>
          <div className="card card-pad" style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div className="agent-icon" style={{ width: 28, height: 28, color: '#60a5fa', background: '#60a5fa1a' }}>
                <Icon name="upload" size={13} />
              </div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Documentos de contexto del negocio</div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 10 }}>
              Sube archivos para que el agente conozca tarifas, servicios, horarios, FAQs y políticas.
            </div>
            <input
              className="input"
              type="file"
              multiple
              accept=".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.md,.json"
              onChange={(e) => setContextFiles(Array.from(e.target.files || []))}
            />
            <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--ink-3)' }}>
              Formatos admitidos: PDF, DOC, DOCX, TXT, CSV, XLSX, MD, JSON.
            </div>
            <div style={{ marginTop: 10, display: 'grid', gap: 6 }}>
              {contextFiles.length === 0 && (
                <div style={{ fontSize: 12, color: 'var(--ink-4)' }}>Sin documentos cargados aún.</div>
              )}
              {contextFiles.map((f, idx) => (
                <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-2)', background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 6, padding: '6px 8px' }}>
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: 8 }}>{f.name}</span>
                  <span className="mono" style={{ color: 'var(--ink-4)' }}>{Math.max(1, Math.round(f.size / 1024))} KB</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card card-pad" style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div className="agent-icon" style={{ width: 28, height: 28, color: '#22d3ee', background: '#22d3ee1a' }}>
                <Icon name="link" size={13} />
              </div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>URLs y notas de conocimiento</div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 10 }}>
              Añade webs, páginas internas o instrucciones que el agente deberá usar como contexto inicial.
            </div>
            <textarea
              className="textarea"
              rows={3}
              style={{ fontSize: 12, marginBottom: 10 }}
              value={contextUrls}
              onChange={(e) => setContextUrls(e.target.value)}
              placeholder={'https://tu-negocio.com/tarifas\nhttps://tu-negocio.com/servicios'}
            />
            <textarea
              className="textarea"
              rows={3}
              style={{ fontSize: 12 }}
              value={contextNotes}
              onChange={(e) => setContextNotes(e.target.value)}
              placeholder="Notas libres: tono, restricciones, datos importantes, público objetivo, políticas..."
            />
          </div>
          <div className="card card-pad" style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="agent-icon" style={{ width: 28, height: 28, color: '#fbbf24', background: '#fbbf241a' }}><Icon name="memory" size={13} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Memoria a largo plazo</div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>Recuerda interacciones por cliente, ámbito 90 d</div>
              </div>
              <div className="toggle on" />
            </div>
          </div>
        </div>
      )}

      {step === 4 && (
        <div>
          <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Comportamiento</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 16px', fontSize: 13 }}>Tono, salvaguardas y reglas de escalado.</p>
          <div className="card card-pad">
            <label style={{ fontSize: 12, color: 'var(--ink-3)' }}>Prompt de sistema</label>
            <textarea
              className="textarea mono"
              rows={6}
              style={{ marginTop: 6, fontSize: 12 }}
              value={systemPrompt}
              onChange={(e) => {
                setSystemPrompt(e.target.value);
                setSystemPromptEdited(true);
              }}
            />
            <div style={{ marginTop: 12 }}>
              <label style={{ fontSize: 12, color: 'var(--ink-3)' }}>Regla de escalado</label>
              <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
                <span className="chip active">prioridad ≥ P1</span>
                <span className="chip active">reembolso &gt; 200 €</span>
                <span className="chip active">sentimiento &lt; 0,2</span>
                <span className="chip">cliente VIP</span>
                <button className="chip" style={{ borderStyle: 'dashed' }}><Icon name="plus" size={11} /> añadir regla</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {step === 5 && (
        <div>
          <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Revisión final</h2>
          <p style={{ color: 'var(--ink-3)', margin: '0 0 16px', fontSize: 13 }}>
            Desde aquí guardas el agente en borrador y pasas al Editor para probar, corregir y ampliar.
          </p>
          <div className="card card-pad" style={{ display: 'grid', gap: 10 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 10, fontSize: 12.5 }}>
              <div style={{ color: 'var(--ink-3)' }}>Nombre</div><div>{name || '—'}</div>
              <div style={{ color: 'var(--ink-3)' }}>Finalidad</div><div>{purpose || '—'}</div>
              <div style={{ color: 'var(--ink-3)' }}>Categoría</div><div>{(data.categories || []).find((c) => c.id === cat)?.name || cat}</div>
              <div style={{ color: 'var(--ink-3)' }}>Herramientas</div><div>{tools.length ? tools.join(', ') : 'Sin herramientas'}</div>
              <div style={{ color: 'var(--ink-3)' }}>Documentos</div><div>{contextFiles.length ? `${contextFiles.length} archivo(s)` : 'Sin documentos'}</div>
              <div style={{ color: 'var(--ink-3)' }}>URLs</div><div>{contextUrls.split(/\r?\n/).filter((u) => u.trim()).length || 'Sin URLs'}</div>
              <div style={{ color: 'var(--ink-3)' }}>Notas</div><div>{contextNotes.trim() ? 'Incluidas' : 'Sin notas'}</div>
            </div>
            {(!name.trim() || !purpose.trim()) && (
              <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid rgba(248,113,113,0.45)', borderRadius: 8, background: 'rgba(248,113,113,0.08)', color: '#fecaca', fontSize: 12 }}>
                Falta completar nombre o finalidad. Pulsa en el paso 2 para corregirlo antes de guardar.
              </div>
            )}
            <div style={{ marginTop: 6, padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 8, background: 'var(--bg-2)' }}>
              <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 2 }}>Siguiente paso recomendado</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>
                Abrir el Editor para probar el flujo, ajustar el prompt y revisar resultados antes de cualquier despliegue.
              </div>
            </div>
          </div>
        </div>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
        <button className="btn btn-ghost" disabled={step === 1} onClick={() => setStep(Math.max(1, step - 1))}>Atrás</button>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost" onClick={() => setRoute('library')}><Icon name="x" size={12} /> Cancelar</button>
          <button className="btn btn-ghost" onClick={() => completeCreation('borrador')}>Guardar borrador</button>
          {step < 5 ? (
            <button className="btn btn-primary" onClick={goNext}>Continuar <Icon name="arrow-right" size={12} /></button>
          ) : (
            <button className="btn btn-primary" onClick={() => completeCreation('borrador')}><Icon name="edit" size={12} /> Guardar y abrir Editor</button>
          )}
        </div>
      </div>
    </div>
  );
};
window.Onboarding = Onboarding;



