/* Agent IA chat — powered by window.claude.complete */

const SYSTEM_PROMPT = `Eres "Stratium AI", el agente de la web de Stratium — una consultora B2B española de ingeniería operativa e IA aplicada, con sede en Elche (Alicante). Respondes en español, tono corporativo pero directo, sin jerga hueca. Respuestas BREVES (máx 3 frases cortas, puedes usar saltos de línea para listar). Conoces:

METODOLOGÍA (4 fases):
1. Diagnóstico (2 sem): mapa de procesos, priorización por impacto/coste.
2. Diseño (2-3 sem): arquitectura técnica, selección de stack, KPIs.
3. Despliegue (4-10 sem): implementación en sprints, agentes IA, integraciones.
4. Optimización continua: observabilidad, mejora iterativa, SLAs.

SERVICIOS: Auditoría operativa · Agentes de IA · Automatización de flujos · Arquitectura de datos.

STACK TÍPICO: Python, TypeScript, LangGraph, OpenAI/Anthropic/Gemini, Temporal, DuckDB/BigQuery, Docker, Kubernetes. Integraciones con SAP, Sage, HubSpot, Salesforce, Odoo, Holded.

CLIENTES: B2B pequeñas, medianas y grandes en España, facturación desde 250K€, entre 5 y 500 empleados. 32 empresas transformadas. 12 plazas/trimestre. ROI medio 3.6x a 12 meses.

PRECIOS (rangos reales en España 2024):
- Diagnóstico: 2.500–4.500€ (2 semanas)
- Diseño: 3.000–6.000€ (2–3 semanas)
- Despliegue: 8.000–22.000€ por sprint (4–10 semanas)
- Operación: desde 850€/mes en retainer
La sesión estratégica de 30 min es GRATUITA.

CONTACTO: contacto@stratium.es · WhatsApp +34 641 955 502 · sede en Elche (Alicante) · reservar en Calendly: https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium

Si te preguntan algo fuera de ámbito: responde brevemente y redirige a la metodología. Si te piden presupuesto: da el rango real y recomienda reservar la sesión gratuita en Calendly.`;

function AgentChat() {
  const [messages, setMessages] = React.useState([
    { role: 'agent', content: 'Soy el agente de Stratium. Pregúntame sobre la metodología, el stack técnico, tiempos de despliegue o cómo trabajaríamos contigo.' }
  ]);
  const [input, setInput] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const bodyRef = React.useRef(null);

  const suggestions = [
    '¿Cómo es vuestra metodología?',
    '¿Qué stack técnico usáis?',
    '¿Cómo garantizáis la seguridad de mis datos?',
    '¿Cuánto tarda un primer despliegue?',
    '¿En qué industrias trabajáis?'
  ];

  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, busy]);

  const send = async (text) => {
    const q = (text || input).trim();
    if (!q || busy) return;
    const next = [...messages, { role: 'user', content: q }];
    setMessages(next);
    setInput('');
    setBusy(true);
    try {
      const history = next.map(m => ({ role: m.role === 'agent' ? 'assistant' : 'user', content: m.content }));
      let reply;
      // En producción usa /api/chat (Gemini). En entorno de prototipo usa window.claude si existe.
      const hasClaudeSandbox = typeof window !== 'undefined'
        && window.claude
        && typeof window.claude.complete === 'function';
      if (hasClaudeSandbox) {
        reply = await window.claude.complete({
          messages: [
            { role: 'user', content: SYSTEM_PROMPT + '\n\n---\n\nConversación:\n' + history.map(h => (h.role === 'user' ? 'Usuario: ' : 'Stratium: ') + h.content).join('\n\n') + '\n\nResponde como Stratium a la última pregunta del usuario. Máx 3 frases.' }
          ]
        });
      } else {
        const res = await fetch('/api/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ system: SYSTEM_PROMPT, messages: history })
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
        const data = await res.json();
        reply = data.reply || data.text || '';
        if (!reply) throw new Error('Empty reply');
      }
      setMessages(m => [...m, { role: 'agent', content: reply }]);
    } catch (e) {
      setMessages(m => [...m, { role: 'agent', content: 'He tenido un problema de conexión. Escríbeme directamente a contacto@stratium.es o WhatsApp +34 641 955 502.' }]);
    } finally {
      setBusy(false);
    }
  };

  return (
    <section className="section" id="agente">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 05</span>AGENTE</span>
        <div className="section-head">
          <h2 className="section-title reveal reveal-delay-1">
            Pregunta al <em>agente.</em><br/>
            Nosotros construimos lo mismo para ti.
          </h2>
          <p className="section-lede reveal reveal-delay-2">
            Este agente conoce nuestra metodología, stack y casos. Usa el mismo patrón RAG que desplegamos en los proyectos: base propietaria, guardrails, trazabilidad. <b>Pruébalo</b>.
          </p>
        </div>

        <div className="agent-panel reveal">
          <div className="agent-hd">
            <span className="title">
              <span className="avatar">S</span>
              Stratium AI · v2.1
            </span>
            <span className="status">Operacional</span>
          </div>
          <div className="agent-body" ref={bodyRef}>
            {messages.map((m, i) => (
              <div key={i} className={'agent-msg ' + m.role}>
                <div className="avatar">{m.role === 'user' ? 'TU' : 'AI'}</div>
                <div className="bubble">
                  {m.content.split('\n').map((line, j) => <p key={j}>{line}</p>)}
                </div>
              </div>
            ))}
            {busy && (
              <div className="agent-msg">
                <div className="avatar">AI</div>
                <div className="agent-typing"><span className="dot"></span><span className="dot"></span><span className="dot"></span></div>
              </div>
            )}
          </div>
          <div className="agent-suggestions">
            {suggestions.map((s, i) => (
              <button key={i} className="agent-sug" onClick={() => send(s)} disabled={busy}>{s}</button>
            ))}
          </div>
          <div className="agent-input">
            <span className="prompt">▶</span>
            <input
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && send()}
              placeholder="Pregúntame sobre la metodología, stack, seguridad..."
              disabled={busy}
            />
            <button onClick={() => send()} disabled={busy || !input.trim()}>
              {busy ? 'Pensando…' : 'Enviar ↵'}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AgentChat });