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; height:100%; overflow:hidden; }
        * { box-sizing:border-box; }
        .container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; overflow:hidden; }
        .col { display:flex; flex-direction:column; padding:10px 12px; border-right:1px solid #1e2a3a; min-width:0; overflow:hidden; }
        .col:last-child { border-right:none; }
        .muted { color:#8aa0b5; font-size:11px; margin-bottom:6px; }
        .row { display:flex; gap:8px; align-items:center; }
        input,textarea,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:6px; padding:6px 8px; font-size:12px; box-sizing:border-box; }
        input { width:100%; min-width:0; }
        textarea { width:100%; resize:none; height:186px; min-width:0; margin-bottom:10px;}
        button { cursor:pointer; white-space:nowrap; }
        button.primary { background:#1f6feb; border-color:#1f6feb; }
        button:disabled { opacity:.6; cursor:not-allowed; }
        .status { font-size:11px; color:#8aa0b5; margin-top:6px; }
        .inputs-col { display:flex; flex-direction:column; gap:6px; flex:1; overflow:hidden; min-width:0; }
        .field { display:flex; flex-direction:column; min-width:0; }
        .field label { font-size:10px; color:#8aa0b5; margin-bottom:2px; }
        .msg-col { display:flex; flex-direction:column; min-width:0; }
        .msg-bottom { display:flex; gap:8px; align-items:center; margin-top:6px; }
      </style>

      <div class="container">
        <div class="col">
          <div class="muted">Evolution Sim</div>
          <div class="inputs-col">
            <div class="field">
              <label>Instance</label>
              <input id="instance" value="Piaf" placeholder="tenant" />
            </div>
            <div class="field">
              <label>From (remoteJid)</label>
              <input id="evoFrom" value="5491133230322@s.whatsapp.net" placeholder="from" />
            </div>
            <div class="field">
              <label>To</label>
              <input id="evoTo" value="5491137887040@s.whatsapp.net" placeholder="to" />
            </div>
            <div class="field">
              <label>Push Name</label>
              <input id="pushName" value="test_lucas" placeholder="pushName" />
            </div>
          </div>
        </div>
        <div class="col">
          <div class="muted">Mensaje</div>
          <div class="msg-col">
            <textarea id="evoText" placeholder="Texto a enviar..."></textarea>
            <div class="msg-bottom">
              <button class="primary" id="sendEvo">Send</button>
              <button id="retry">Retry</button>
              <span class="status" id="status">—</span>
            </div>
          </div>
        </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 });
      
      // Optimistic: mostrar burbuja del usuario inmediatamente
      emit("message:optimistic", {
        chat_id: from,
        message_id: `optimistic-${Date.now()}`,
        direction: "in",
        text,
        ts: new Date().toISOString(),
        provider: "sim",
        pushName: pushName || "test_lucas",
      });

      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);