botino/public/components/chat-simulator.js

import { api } from "../lib/api.js";
import { emit, on } from "../lib/bus.js";

class ChatSimulator extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this._lastPayload = null;
    this._sending = false;
    this.shadowRoot.innerHTML = `
      <style>
        :host { display:block; padding:12px; }
        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
        .muted { color:#8aa0b5; font-size:12px; }
        .row { display:flex; gap:8px; align-items:center; }
        input,textarea,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
        textarea { width:100%; min-height:70px; resize:vertical; }
        button { cursor:pointer; }
        button.primary { background:#1f6feb; border-color:#1f6feb; }
        button:disabled { opacity:.6; cursor:not-allowed; }
        .status { margin-top:8px; font-size:12px; color:#8aa0b5; }
      </style>

      <div class="box">
        <div class="muted">Evolution Sim (único chat)</div>
        <div class="row" style="margin-top:8px">
          <input id="instance" style="flex:1" value="Piaf" placeholder="tenant/instance key" />
        </div>
        <div class="row" style="margin-top:8px">
          <input id="evoFrom" style="flex:1" value="5491133230322@s.whatsapp.net" placeholder="from (remoteJid)" />
        </div>
        <div class="row" style="margin-top:8px">
          <input id="evoTo" style="flex:1" value="5491137887040@s.whatsapp.net" placeholder="to (destino receptor)" />
        </div>
        <div class="row" style="margin-top:8px">
          <input id="pushName" style="flex:1" value="test_lucas" placeholder="pushName (opcional)" />
        </div>
        <div class="muted" style="margin-top:7px">Enviar mensaje</div>
        <textarea id="evoText" style="margin-top:8px" placeholder="Texto a enviar por Evolution…"></textarea>
        <div class="row" style="margin-top:8px">
          <button class="primary" id="sendEvo" style="flex:1">Send</button>
          <button id="retry" style="width:140px">Retry last</button>
        </div>
        <div class="status" id="status">—</div>
      </div>
    `;
  }

  connectedCallback() {
    const evoInstanceEl = this.shadowRoot.getElementById("instance");
    const evoFromEl = this.shadowRoot.getElementById("evoFrom");
    const evoToEl = this.shadowRoot.getElementById("evoTo");
    const evoPushEl = this.shadowRoot.getElementById("pushName");
    const evoTextEl = this.shadowRoot.getElementById("evoText");
    const sendEvoEl = this.shadowRoot.getElementById("sendEvo");
    const retryEl = this.shadowRoot.getElementById("retry");
    const statusEl = this.shadowRoot.getElementById("status");

    const genId = () =>
      (self.crypto?.randomUUID?.() || `${Date.now()}${Math.random()}`)
        .replace(/-/g, "")
        .slice(0, 22)
        .toUpperCase();

    const buildPayload = ({ text, from, to, instance, pushName }) => {
      const nowSec = Math.floor(Date.now() / 1000);
      return {
        body: {
          event: "messages.upsert",
          instance,
          data: {
            key: {
              remoteJid: from,
              fromMe: false,
              id: genId(),
              participant: "",
              addressingMode: "pn",
            },
            pushName: pushName || "test_lucas",
            status: "DELIVERY_ACK",
            message: { conversation: text },
            messageType: "conversation",
            messageTimestamp: nowSec,
            instanceId: genId(),
            source: "sim",
            to,
          },
          date_time: new Date().toISOString(),
          sender: from,
          server_url: "http://localhost",
          apikey: "SIM",
        },
      };
    };

    const setSending = (v) => {
      this._sending = Boolean(v);
      sendEvoEl.disabled = this._sending;
      retryEl.disabled = this._sending;
      statusEl.textContent = this._sending ? "Enviando…" : "—";
    };

    const sendAction = async ({ payloadOverride = null } = {}) => {
      const instance = evoInstanceEl.value.trim() || "Piaf";
      const from = evoFromEl.value.trim() || "5491133230322@s.whatsapp.net"; // cliente
      const to = evoToEl.value.trim() || "5491137887040@s.whatsapp.net"; // canal/destino
      const text = evoTextEl.value.trim();
      const pushName = evoPushEl.value.trim();

      if (!from || !text) {
        alert("Falta from o text");
        return;
      }

      // Optimistic: que aparezca en la columna izquierda al instante
      emit("conversation:upsert", {
        chat_id: from,
        from: pushName || "test_lucas",
        state: "IDLE",
        intent: "other",
        status: "ok",
        last_activity: new Date().toISOString(),
        last_run_id: null,
      });
      emit("ui:selectedChat", { chat_id: from });

      const payload = payloadOverride || buildPayload({ text, from, to, instance, pushName });
      this._lastPayload = { ...payload, body: { ...payload.body, data: { ...payload.body.data, key: { ...payload.body.data.key, id: genId() } } } };
      setSending(true);
      try {
        const data = await api.simEvolution(payload);
        console.log("[evolution sim] webhook response:", data);

        if (!data.ok) {
          statusEl.textContent = "Error enviando (ver consola)";
          return;
        }

        evoTextEl.value = "";
        evoTextEl.focus();
      } catch (e) {
        statusEl.textContent = `Error: ${String(e?.message || e)}`;
      } finally {
        setSending(false);
      }
    };

    sendEvoEl.onclick = sendAction;
    retryEl.onclick = () => {
      const chat_id = evoFromEl.value.trim() || "5491133230322@s.whatsapp.net";
      setSending(true);
      api
        .retryLast(chat_id)
        .then((r) => {
          if (!r?.ok) statusEl.textContent = `Retry error: ${r?.error || "unknown"}`;
          else statusEl.textContent = "Retry enviado.";
        })
        .catch((e) => (statusEl.textContent = `Retry error: ${String(e?.message || e)}`))
        .finally(() => setSending(false));
    };
    retryEl.disabled = false;

    evoTextEl.addEventListener("keydown", (e) => {
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        sendAction();
      }
    });

    this._unsub = on("conversation:upsert", (c) => {
      const chat_id = evoFromEl.value.trim() || "5491133230322@s.whatsapp.net";
      if (c.chat_id === chat_id) {
        // placeholder: podrías reflejar estado/intent acá si querés
      }
    });
  }

  disconnectedCallback() {
    this._unsub?.();
  }

  append(who, text) {
    void who;
    void text;
  }
}

customElements.define("chat-simulator", ChatSimulator);