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.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; }
        .chatlog { display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; padding-right:6px; margin-top:8px; }
        .msg { max-width:90%; padding:8px 10px; border-radius:12px; border:1px solid #253245; background:#0f1520; font-size:13px; }
        .msg.user { align-self:flex-end; }
        .msg.bot { align-self:flex-start; border-color:#1f6feb; }
        pre { white-space:pre-wrap; word-break:break-word; background:#0f1520; border:1px solid #253245; border-radius:10px; padding:10px; margin:0; font-size:12px; color:#d7e2ef; }
      </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="SimUser" placeholder="pushName (opcional)" />
        </div>
        <div class="muted" style="margin-top:8px">Chat</div>
        <div class="chatlog" id="log"></div>
        <textarea id="evoText" placeholder="Texto a enviar por Evolution…"></textarea>
        <div class="row" style="margin-top:8px">
          <button class="primary" id="sendEvo" style="flex:1">Send</button>
        </div>
      </div>

      <div class="box">
        <div class="muted">Última respuesta (raw)</div>
        <pre id="raw">—</pre>
      </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 sendAction = async () => {
      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;
      }

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

      const payload = {
        body: {
          event: "messages.upsert",
          instance,
          data: {
            key: {
              // remoteJid debe ser el cliente (buyer)
              remoteJid: from,
              fromMe: false,
              id: genId(),
              participant: "",
              addressingMode: "pn",
            },
            pushName: pushName || "SimUser",
            status: "DELIVERY_ACK",
            message: { conversation: text },
            messageType: "conversation",
            messageTimestamp: nowSec,
            instanceId: genId(),
            source: "sim",
          },
          date_time: new Date().toISOString(),
          sender: from,
          server_url: "http://localhost",
          apikey: "SIM",
        },
      };

      const data = await api.simEvolution(payload);
      this.shadowRoot.getElementById("raw").textContent = JSON.stringify(data, null, 2);
      console.log("[evolution sim] webhook response:", data);

      if (!data.ok) {
        this.append("bot", "Error en Evolution Sim.");
        return;
      }

      emit("ui:selectedChat", { chat_id: from });
      this.append("user", text);
      this.append("bot", `[Evolution] enviado (sim): ${text}`);
      evoTextEl.value = "";
    };

    sendEvoEl.onclick = sendAction;

    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) {
    const log = this.shadowRoot.getElementById("log");
    const el = document.createElement("div");
    el.className = "msg " + (who === "user" ? "user" : "bot");
    el.textContent = text;
    log.appendChild(el);
    log.scrollTop = log.scrollHeight;
  }
}

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