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">Simulador WhatsApp (local)</div>
        <div class="row" style="margin-top:8px">
          <input id="from" style="flex:1" value="+5491100000000" placeholder="+54911xxxxxxxx" />
        </div>
        <div class="row" style="margin-top:8px">
          <input id="chat" style="flex:1" value="sim:+5491100000000" placeholder="chat_id" />
          <button id="reset">Reset</button>
        </div>
      </div>

      <div class="box">
        <div class="muted">Chat</div>
        <div class="chatlog" id="log"></div>
        <textarea id="text" placeholder="Escribí como cliente…"></textarea>
        <div class="row" style="margin-top:8px">
          <button class="primary" id="send" style="flex:1">Send</button>
        </div>
      </div>

      <div class="box">
        <div class="muted">Última respuesta (raw)</div>
        <pre id="raw">—</pre>
      </div>
    `;
  }

  connectedCallback() {
    const fromEl = this.shadowRoot.getElementById("from");
    const chatEl = this.shadowRoot.getElementById("chat");
    const resetEl = this.shadowRoot.getElementById("reset");
    const sendEl = this.shadowRoot.getElementById("send");

    resetEl.onclick = () => {
      this.shadowRoot.getElementById("log").innerHTML = "";
      this.shadowRoot.getElementById("raw").textContent = "—";
      const phone = (fromEl.value || "+5491100000000").trim();
      chatEl.value = `sim:${phone}`;
      this.append("bot", "Chat reseteado (solo UI). Enviá un mensaje para generar runs.");
    };

    sendEl.onclick = async () => {
      const text = this.shadowRoot.getElementById("text").value.trim();
      if (!text) return;

      const from_phone = fromEl.value.trim();
      const chat_id = chatEl.value.trim();
      if (!from_phone || !chat_id) return alert("Falta teléfono o chat_id");

      this.append("user", text);
      this.shadowRoot.getElementById("text").value = "";

      const data = await api.simSend({ chat_id, from_phone, text });
      this.shadowRoot.getElementById("raw").textContent = JSON.stringify(data, null, 2);

      if (!data.ok) {
        this.append("bot", "Error en simulación.");
        return;
      }

      this.append("bot", data.reply);
      emit("ui:selectedChat", { chat_id });
    };

    // si querés, cuando llega un upsert de conversación simulada, podés auto-seleccionarla
    this._unsub = on("conversation:upsert", (c) => {
      const chat_id = this.shadowRoot.getElementById("chat").value.trim();
      if (c.chat_id === chat_id) {
        // no-op, pero 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);