botino/public/components/conversation-list.js

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

class ConversationList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.conversations = [];
    this.selected = null;
    this.tab = "chats"; // chats | users
    this.users = [];
    this.selectedUser = null;

    this.shadowRoot.innerHTML = `
      <style>
        :host { display:block; padding: var(--space-4); font-family: var(--font-sans); }
        .box {
          background: var(--panel);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          padding: var(--space-4);
          margin-bottom: var(--space-3);
          box-shadow: var(--shadow-sm);
        }
        .row { display:flex; gap: var(--space-2); align-items:center; }
        input, select, button {
          background: var(--panel);
          color: var(--text);
          border: 1px solid var(--border-hi);
          border-radius: var(--r-md);
          padding: 8px 12px;
          font: 400 var(--fs-sm)/1.4 var(--font-sans);
          transition: border-color .15s, box-shadow .15s;
        }
        input:focus, select:focus { outline:none; border-color: var(--accent); box-shadow: var(--focus-ring); }
        button { cursor:pointer; font-weight: var(--fw-medium); }
        button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
        button:focus-visible { outline:none; box-shadow: var(--focus-ring); }
        button.ghost { background:transparent; border-color: transparent; }
        button:disabled { opacity:.5; cursor:not-allowed; }
        .tabs { display:flex; gap: var(--space-2); margin-bottom: var(--space-3); }
        .tab {
          flex:1; text-align:center;
          padding: 8px 12px; border-radius: var(--r-md);
          border: 1px solid var(--border);
          cursor:pointer;
          color: var(--text-muted);
          background: var(--panel);
          font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
          transition: all .15s;
        }
        .tab:hover { color: var(--text); }
        .tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
        .list { display:flex; flex-direction:column; gap: var(--space-2); }
        .item {
          background: var(--panel);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          padding: var(--space-3) var(--space-4);
          cursor:pointer;
          transition: all .15s;
        }
        .item:hover { border-color: var(--border-hi); box-shadow: var(--shadow-sm); }
        .item.active { border-color: var(--accent); background: var(--accent-soft); }
        .title { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text); }
        .muted { color: var(--text-muted); font-size: var(--fs-sm); }
        .chips { display:flex; flex-wrap:wrap; gap: 6px; margin-top: 8px; }
        .chip {
          display:inline-flex; align-items:center; gap: 4px;
          padding: 3px 8px; border-radius:999px;
          background: var(--panel-2); border: 1px solid var(--border);
          font-size: var(--fs-xs); color: var(--text-muted);
          font-weight: var(--fw-medium);
        }
        .dot { width:8px; height:8px; border-radius:50%; }
        .ok{ background: var(--ok) } .warn{ background: var(--warn) } .err{ background: var(--err) }
        .actions { display:flex; gap: var(--space-2); justify-content:flex-end; margin-top: var(--space-2); flex-wrap:wrap; }
      </style>

      <div class="tabs">
        <div class="tab active" id="tabChats">Chats</div>
        <div class="tab" id="tabUsers">Usuarios</div>
      </div>

      <div class="box" id="filtersBox">
        <div class="row">
          <input id="q" style="flex:1" placeholder="Buscar chat_id / teléfono…" />
        </div>
        <div class="box" id="userActions" style="display:none; margin-top:8px">
          <div class="actions" style="justify-content:flex-start">
            <button class="ghost" id="uaSelect">Chat</button>
            <button class="ghost" id="uaDeleteConv">Borrar Chat</button>
            <button id="uaDeleteUser">Borrar User</button>
          </div>
        </div>
        <div class="row" style="margin-top:8px">
          <select id="status" style="flex:1">
            <option value="">Status: all</option>
            <option value="ok">ok</option>
            <option value="warn">warn</option>
            <option value="error">error</option>
          </select>
          <select id="state" style="flex:1">
            <option value="">State: all</option>
            <option>IDLE</option>
            <option>CART</option>
            <option>SHIPPING</option>
            <option>AWAITING_HUMAN</option>
          </select>
        </div>
      </div>

      <div class="list" id="list"></div>
    `;
  }

  connectedCallback() {
    this.shadowRoot.getElementById("tabChats").onclick = () => this.setTab("chats");
    this.shadowRoot.getElementById("tabUsers").onclick = () => this.setTab("users");

    this.shadowRoot.getElementById("q").oninput = () => {
      clearTimeout(this._t);
      this._t = setTimeout(() => this.refresh(), 250);
    };
    this.shadowRoot.getElementById("status").onchange = () => this.refresh();
    this.shadowRoot.getElementById("state").onchange = () => this.refresh();

    // acciones del usuario seleccionado (solo en tab Users)
    this.shadowRoot.getElementById("uaSelect").onclick = () => {
      if (!this.selectedUser) return;
      emit("ui:selectedChat", { chat_id: this.selectedUser.chat_id });
      this.setTab("chats");
    };
    this.shadowRoot.getElementById("uaDeleteConv").onclick = async () => {
      if (!this.selectedUser) return;
      const chat_id = this.selectedUser.chat_id;
      const confirmed = await modal.confirm(`¿Borrar conversación completa de ${chat_id}?`);
      if (!confirmed) return;
      await api.deleteConversation(chat_id);
      this.selectedUser = null;
      await this.refreshUsers();
    };
    this.shadowRoot.getElementById("uaDeleteUser").onclick = async () => {
      if (!this.selectedUser) return;
      const chat_id = this.selectedUser.chat_id;
      const confirmed = await modal.confirm(`¿Borrar usuario ${chat_id}, sus conversaciones y el customer en Woo?`);
      if (!confirmed) return;
      await api.deleteUser(chat_id, { deleteWoo: true });
      this.selectedUser = null;
      await this.refreshUsers();
    };

    this._unsub1 = on("conversation:upsert", (conv) => {
      if (this.tab !== "chats") return;
      const idx = this.conversations.findIndex(x => x.chat_id === conv.chat_id);
      if (idx >= 0) this.conversations[idx] = conv;
      else this.conversations.unshift(conv);
      this.render();
    });

    this.refresh();
  }

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

  dot(status) {
    const cls = status === "ok" ? "ok" : (status === "warn" ? "warn" : "err");
    return `<span class="dot ${cls}"></span>`;
  }

  async refresh() {
    try {
      if (this.tab === "users") return await this.refreshUsers();
      const q = this.shadowRoot.getElementById("q").value || "";
      const status = this.shadowRoot.getElementById("status").value || "";
      const state = this.shadowRoot.getElementById("state").value || "";
      const data = await api.conversations({ q, status, state });
      this.conversations = data.items || [];
      this.render();
    } catch (e) {
      console.warn("[conversation-list] refresh failed", e);
    }
  }

  async refreshUsers() {
    try {
      const q = this.shadowRoot.getElementById("q").value || "";
      const data = await api.users({ q, limit: 200 });
      this.users = data.items || [];
      this.render();
    } catch (e) {
      console.warn("[conversation-list] refreshUsers failed", e);
    }
  }

  setTab(tab) {
    this.tab = tab;
    this.shadowRoot.getElementById("tabChats").classList.toggle("active", tab === "chats");
    this.shadowRoot.getElementById("tabUsers").classList.toggle("active", tab === "users");
    // en users mantenemos el buscador; ocultamos filtros avanzados (status/state)
    this.shadowRoot.getElementById("filtersBox").style.display = "block";
    const adv = this.shadowRoot.getElementById("status")?.closest(".row");
    if (adv) adv.style.display = tab === "chats" ? "flex" : "none";
    const qEl = this.shadowRoot.getElementById("q");
    qEl.placeholder = tab === "users" ? "Buscar usuario (chat_id / pushName)…" : "Buscar chat_id / teléfono…";
    // acciones visibles solo en users (si no hay selección, quedan disabled)
    this.renderSelectedUserActions();
    this.refresh();
  }

  renderSelectedUserActions() {
    const box = this.shadowRoot.getElementById("userActions");
    const inUsers = this.tab === "users";
    box.style.display = inUsers ? "block" : "none";

    const hasSel = Boolean(this.selectedUser);
    const b1 = this.shadowRoot.getElementById("uaSelect");
    const b2 = this.shadowRoot.getElementById("uaDeleteConv");
    const b3 = this.shadowRoot.getElementById("uaDeleteUser");
    if (b1) b1.disabled = !hasSel;
    if (b2) b2.disabled = !hasSel;
    if (b3) b3.disabled = !hasSel;
  }

  render() {
    const list = this.shadowRoot.getElementById("list");
    list.innerHTML = "";

    if (this.tab === "users") {
      // panel de acciones
      this.renderSelectedUserActions();

      for (const u of this.users) {
        const el = document.createElement("div");
        el.className = "item" + (this.selectedUser?.chat_id === u.chat_id ? " active" : "");
        const name = u.push_name || u.chat_id.replace(/@.+$/, "");
        el.innerHTML = `
          <div class="row">
            <div style="flex:1">
              <div class="title">${name}</div>
              <div class="muted">${u.chat_id}</div>
              <div class="muted">woo_customer_id: ${u.external_customer_id || "—"}</div>
            </div>
          </div>
        `;
        el.onclick = () => {
          this.selectedUser = u;
          this.render();
        };
        list.appendChild(el);
      }
      return;
    }

    for (const c of this.conversations) {
      const el = document.createElement("div");
      el.className = "item" + (c.chat_id === this.selected ? " active" : "");
      el.innerHTML = `
        <div class="row">
          ${this.dot(c.status)}
          <div style="flex:1">
            <div class="title">${c.from}</div>
            <div class="muted">${c.chat_id}</div>
          </div>
          <button class="ghost" data-del="1">Borrar</button>
        </div>
        <div class="chips">
          <span class="chip">state: ${c.state}</span>
          <span class="chip">intent: ${c.intent}</span>
          <span class="chip">last: ${new Date(c.last_activity).toLocaleTimeString()}</span>
        </div>
      `;
      el.onclick = async (e) => {
        if (e?.target?.dataset?.del) {
          e.stopPropagation();
          const confirmed = await modal.confirm(`¿Borrar conversación completa de ${c.chat_id}?`);
          if (!confirmed) return;
          await api.deleteConversation(c.chat_id);
          if (this.selected === c.chat_id) this.selected = null;
          await this.refresh();
          return;
        }
        this.selected = c.chat_id;
        this.render();
        emit("ui:selectedChat", { chat_id: c.chat_id });
      };
      list.appendChild(el);
    }
  }
}

customElements.define("conversation-list", ConversationList);