// Panel de chat EGO — conectado al backend real (/api/chat), que ejecuta el
// pipeline de seguridad de 6 capas (persona, KB de la guía, validación).
const { useState: useChatState, useEffect: useChatEffect, useRef: useChatRef } = React;

// Identificador de conversación estable por navegador (continuidad de historial).
function egoUid() {
  let id = localStorage.getItem("ego-chat-uid");
  if (!id) {
    id = "web-" + Math.random().toString(36).slice(2);
    localStorage.setItem("ego-chat-uid", id);
  }
  return id;
}

const EGO_RULES = `Eres EGO, el asistente amable de TechResearchStudies para contribuidores que graban video egocéntrico (en primera persona). Tu única fuente de verdad es la GUÍA de abajo.

Reglas:
- Responde SIEMPRE en español, con tono de coach amistoso: claro, alentador, frases cortas. Sin tecnicismos.
- Sé breve: 1–3 frases casi siempre. Usa listas cortas solo si ayudan.
- Responde solo con información de la guía. Si la guía no cubre la pregunta, o el tema es de pagos específicos / problemas de cuenta / errores de la app, dilo honestamente y termina tu respuesta con el marcador exacto [HUB] para conectar con una persona del Hub.
- Si el usuario pide hablar con una persona, confirma amablemente y termina con [HUB].
- Cuando ayude, señala la sección de la página (por ejemplo: «mira “La cinta de cabeza” aquí arriba»).
- Nunca inventes modelos de teléfono, montos de pago ni plazos.

GUÍA:
`;

const EGO_SUGGESTIONS = [
  "¿Mi teléfono sirve?",
  "¿Puedo grabar sentado?",
  "¿Cómo me pagan?",
  "¿Cómo me pongo la cinta?",
  "¿Qué hace que rechacen un video?",
];

const EGO_GREETING =
  "¡Hola! Soy EGO 👋 Estoy aquí para ayudarte a grabar material que se acepte (y se pague). Pregúntame lo que quieras sobre la app, la cinta, tu teléfono o los pagos.";

function EgoAvatar({ size }) {
  return (
    <span className="ego-avatar" style={size ? { width: size, height: size } : null}>
      <span className="ego-lens"></span>
    </span>
  );
}

function HubCard() {
  return (
    <div className="hub-card">
      <div className="hub-title">Te conecto con una persona</div>
      <p>Tu contacto del Hub puede ayudarte con configuración, la app y pagos.</p>
      <a className="btn solid small" href="https://www.techresearchstudies.com/contact-us" target="_blank" rel="noopener">Contactar a mi Hub</a>
    </div>
  );
}

function RegisterLink() {
  return (
    <div className="ego-register">
      <span>¿Listo para grabar?</span>
      <a href="https://form.typeform.com/to/vkeyUZXs" target="_blank" rel="noopener">Empezar ahora →</a>
    </div>
  );
}

function EgoChat({ mobileOpen, onToggleMobile }) {
  const KEY = "ego-chat-v1";
  const [msgs, setMsgs] = useChatState(() => {
    try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { return []; }
  });
  const [input, setInput] = useChatState("");
  const [busy, setBusy] = useChatState(false);
  const scrollRef = useChatRef(null);

  useChatEffect(() => { localStorage.setItem(KEY, JSON.stringify(msgs)); }, [msgs]);
  useChatEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [msgs, busy, mobileOpen]);

  const send = async (text) => {
    const t = (text || input).trim();
    if (!t || busy) return;
    setInput("");
    setMsgs((m) => [...m, { role: "user", text: t }]);
    setBusy(true);
    try {
      // The backend owns the persona + guide KB + safety pipeline and tracks
      // history per user_id, so we just send the latest message.
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: t, user_id: egoUid() }),
      });
      const data = await res.json();
      let reply = data && data.reply ? String(data.reply) : "";
      let hub = false;
      // The persona ends with the [HUB] marker when handing off to a person.
      if (reply.includes("[HUB]")) { hub = true; reply = reply.replace(/\[HUB\]/g, "").trim(); }
      setMsgs((m) => [...m, { role: "assistant", text: reply, hub }]);
    } catch (e) {
      setMsgs((m) => [...m, {
        role: "assistant",
        text: "Uy, no pude responder ahora mismo. Inténtalo de nuevo en un momento — o contacta a tu Hub.",
        hub: true,
      }]);
    } finally {
      setBusy(false);
    }
  };

  const reset = () => { setMsgs([]); };

  return (
    <section className={"ego-panel" + (mobileOpen ? " open" : "")} data-screen-label="Chat EGO" aria-label="Chat con EGO">
      <header className="ego-header" onClick={onToggleMobile}>
        <EgoAvatar />
        <div className="ego-id">
          <strong>EGO</strong>
          <span><i className="online-dot"></i> Tu IA para grabar bien y cobrar</span>
        </div>
        <div className="ego-header-actions">
          {msgs.length > 0 ? (
            <button className="ego-new" title="Nueva conversación" aria-label="Nueva conversación" onClick={(e) => { e.stopPropagation(); reset(); }}>+</button>
          ) : null}
          <button className="ego-collapse" aria-label={mobileOpen ? "Minimizar chat" : "Abrir chat"} onClick={(e) => { e.stopPropagation(); onToggleMobile(); }}>
            <span className="chat-glyph" aria-hidden="true"><i></i><i></i><i></i></span>
            <span className="ego-collapse-label">{mobileOpen ? "Cerrar" : "Chat"}</span>
            <span className="caret"></span>
          </button>
        </div>
      </header>

      <div className="ego-scroll" ref={scrollRef}>
        <div className="msg bot">
          <EgoAvatar size={26} />
          <div className="bubble">{EGO_GREETING}</div>
        </div>
        {msgs.length === 0 ? (
          <div className="ego-suggestions">
            {EGO_SUGGESTIONS.map((s) => (
              <button key={s} className="chip" onClick={() => send(s)}>{s}</button>
            ))}
          </div>
        ) : null}
        {msgs.length === 0 ? <RegisterLink /> : null}
        {msgs.map((m, i) =>
          m.role === "user" ? (
            <div className="msg user" key={i}><div className="bubble">{m.text}</div></div>
          ) : (
            <div className="msg bot" key={i}>
              <EgoAvatar size={26} />
              <div className="bubble-wrap">
                <div className="bubble">{m.text}</div>
                {m.hub ? <HubCard /> : null}
              </div>
            </div>
          )
        )}
        {busy ? (
          <div className="msg bot">
            <EgoAvatar size={26} />
            <div className="bubble typing"><span></span><span></span><span></span></div>
          </div>
        ) : null}
      </div>

      <footer className="ego-input">
        <input
          type="text"
          value={input}
          placeholder="Escribe tu pregunta…"
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") send(); }}
          aria-label="Mensaje para EGO"
        />
        <button className="send-btn" onClick={() => send()} disabled={busy || !input.trim()} aria-label="Enviar">
          <span className="send-arrow"></span>
        </button>
      </footer>
    </section>
  );
}

Object.assign(window, { EgoChat, EgoAvatar });