/* Gaby · dock flotante + panel de conversación.
   Gaby es presencia: habla en serif; tú respondes en sans. Campo gentil. */

const { close: closeIcon, send: sendIcon } = window.GabyIcons;

function GabyDock({ open, setOpen, face, ring }) {
  const Portrait = window.GabyPortrait;
  const D = window.GABY_DATA.gabyPanel;
  const [msgs, setMsgs] = React.useState(D.mensajes);
  const [draft, setDraft] = React.useState("");
  const bodyRef = React.useRef(null);

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

  const reply = async (text) => {
    const t = (text || "").trim();
    if (!t) return;

    // 1. Pinta el mensaje de Cinthia inmediatamente
    setMsgs((m) => [...m, { de: "me", texto: t }]);
    setDraft("");

    // 2. Muestra typing mientras llega la respuesta
    setMsgs((m) => [...m, { de: "gaby", texto: "…", _typing: true }]);

    try {
      const res = await fetch("/api/gaby/say", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: t,
          userId: "cinthia",
          history: msgs
            .filter((m) => !m._typing)
            .slice(-20)
            .map((m) => ({ de: m.de, texto: m.texto })),
        }),
      });

      if (!res.ok) throw new Error("HTTP " + res.status);
      const data = await res.json();

      // 3. Reemplaza el typing por la respuesta real
      setMsgs((m) => [
        ...m.filter((x) => !x._typing),
        { de: "gaby", texto: data.reply, acciones: data.acciones, intent: data.intent },
      ]);

      // 4. Si Gaby devolvió acciones, despachar al store de la app
      // (Dashboard / Pendientes / Agenda / Personal leen desde acá)
      if (Array.isArray(data.acciones) && data.acciones.length && window.GABY_DISPATCH) {
        for (const a of data.acciones) window.GABY_DISPATCH(a);
      }
    } catch (e) {
      setMsgs((m) => [
        ...m.filter((x) => !x._typing),
        { de: "gaby", texto: "Algo se me trabó. Inténtalo de nuevo y si sigue, le digo a Francisco." },
      ]);
    }
  };

  return (
    <>
      {open && (
        <div className="cy-glass cy-panel">
          <div className="cy-panel__head">
            <Portrait size={40} face={face} ring={ring} showRing={false} />
            <div>
              <div className="cy-panel__name">Gaby</div>
              <div className="cy-panel__status cy-mono">AQUÍ, CONTIGO</div>
            </div>
            <button className="cy-panel__close" onClick={() => setOpen(false)} aria-label="Cerrar">
              {closeIcon({})}
            </button>
          </div>

          <div className="cy-panel__body" ref={bodyRef}>
            {msgs.map((m, i) => (
              <div key={i} className={"cy-msg" + (m.de === "me" ? " cy-msg--me" : "")}>{m.texto}</div>
            ))}
          </div>

          <div className="cy-panel__foot">
            <input className="cy-input" placeholder="Escríbele a Gaby…" value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") reply(draft); }} />
            <button className="cy-send" onClick={() => reply(draft)} aria-label="Enviar">
              {sendIcon({})}
            </button>
          </div>
        </div>
      )}

      <div className="cy-dock">
        {!open && (
          <div className="cy-dock__bubble">{window.GABY_DATA.gabyPanel.saludo}</div>
        )}
        <button className="cy-avatar-btn" onClick={() => setOpen((o) => !o)} aria-label="Abrir a Gaby">
          {!open && <span className="cy-avatar-dot" />}
          <Portrait size={72} face={face} ring={ring} />
        </button>
      </div>
    </>
  );
}

window.GabyDock = GabyDock;