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

class ConversationInspector extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.chatId = null;
    this.messages = [];
    this.runs = [];
    this.rowOrder = [];
    this.rowMap = new Map();
    this.heights = new Map();
    this._playing = false;
    this._playIdx = 0;
    this._timer = null;

    this.shadowRoot.innerHTML = `
      <style>
        :host { display:block; padding:12px; height:100%; overflow:hidden; }
        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; height:100%; display:flex; flex-direction:column; min-height:0; box-sizing:border-box; }
        .row { display:flex; gap:8px; align-items:center; }
        .muted { color:#8aa0b5; font-size:12px; }
        .title { font-weight:800; }
        .toolbar { display:flex; gap:8px; margin-top:8px; align-items:center; }
        button { cursor:pointer; background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
        .list { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:6px; margin-top:8px; flex:1; min-height:0; }
        .item { border:1px solid #253245; border-radius:12px; padding:8px 10px; background:#0f1520; font-size:12px; margin-bottom:12px; box-sizing:border-box; }
        .item.in { background:#0f1520; border-color:#2a3a55; }
        .item.out { background:#111b2a; border-color:#2a3a55; }
        .item.active { outline:2px solid #1f6feb; box-shadow: 0 0 0 2px rgba(31,111,235,.25); }
        .kv { display:grid; grid-template-columns:70px 1fr; gap:6px 10px; }
        .k { color:#8aa0b5; font-size:11px; letter-spacing:.4px; text-transform:uppercase; }
        .v { font-size:12px; color:#e7eef7; }
        .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
        .chip { display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:999px; background:#1d2a3a; border:1px solid #243247; font-size:11px; color:#8aa0b5; }
        .cart { margin-top:6px; font-size:11px; color:#c7d8ee; }
        .tool { margin-top:6px; font-size:11px; color:#8aa0b5; }
        .dot { width:8px; height:8px; border-radius:50%; }
        .ok { background:#2ecc71; } .warn { background:#f1c40f; } .err { background:#e74c3c; }
      </style>

      <div class="box">
        <div class="muted">Inspector</div>
        <div class="title" id="chat">—</div>
        <div class="muted" id="meta">Seleccioná una conversación.</div>
        <div class="toolbar">
          <button id="play">Play</button>
          <button id="pause">Pause</button>
          <button id="step">Step</button>
          <span class="muted" id="count"></span>
        </div>
        <div class="list" id="list"></div>
      </div>
    `;
  }

  connectedCallback() {
    this.shadowRoot.getElementById("play").onclick = () => this.play();
    this.shadowRoot.getElementById("pause").onclick = () => this.pause();
    this.shadowRoot.getElementById("step").onclick = () => this.step();

    this._unsubSel = on("ui:selectedChat", async ({ chat_id }) => {
      this.chatId = chat_id;
      await this.loadData();
    });

    this._unsubRun = on("run:created", (run) => {
      if (this.chatId && run.chat_id === this.chatId) {
        this.loadData();
      }
    });

    this._unsubLayout = on("ui:bubblesLayout", ({ chat_id, items }) => {
      if (!this.chatId || chat_id !== this.chatId) return;
      this.heights = new Map((items || []).map((it) => [it.message_id, it.height || 0]));
      this.applyHeights();
    });

    this._unsubScroll = on("ui:chatScroll", ({ chat_id, scrollTop }) => {
      if (!this.chatId || chat_id !== this.chatId) return;
      const list = this.shadowRoot.getElementById("list");
      list.scrollTop = scrollTop || 0;
    });

    this._unsubSelectMessage = on("ui:selectedMessage", ({ message }) => {
      const messageId = message?.message_id || null;
      if (messageId) this.highlight(messageId);
    });
  }

  disconnectedCallback() {
    this._unsubSel?.();
    this._unsubRun?.();
    this._unsubLayout?.();
    this._unsubScroll?.();
    this._unsubSelectMessage?.();
    this.pause();
  }

  async loadData() {
    const chatEl = this.shadowRoot.getElementById("chat");
    const metaEl = this.shadowRoot.getElementById("meta");
    const countEl = this.shadowRoot.getElementById("count");
    const list = this.shadowRoot.getElementById("list");

    chatEl.textContent = this.chatId || "—";
    metaEl.textContent = "Cargando…";
    countEl.textContent = "";
    list.innerHTML = "";

    if (!this.chatId) {
      metaEl.textContent = "Seleccioná una conversación.";
      return;
    }

    try {
      const [msgs, runs] = await Promise.all([
        api.messages({ chat_id: this.chatId, limit: 200 }),
        api.runs({ chat_id: this.chatId, limit: 200 }),
      ]);
      this.messages = msgs.items || [];
      this.runs = runs.items || [];
      this.render();
      this.applyHeights();
    } catch (e) {
      metaEl.textContent = `Error cargando: ${String(e?.message || e)}`;
      this.messages = [];
      this.runs = [];
    }
  }

  runMap() {
    const map = new Map();
    for (const r of this.runs || []) {
      map.set(r.run_id, r);
    }
    return map;
  }

  buildRows() {
    const runsById = this.runMap();
    const rows = [];
    let nextRun = null;
    for (let i = this.messages.length - 1; i >= 0; i--) {
      const msg = this.messages[i];
      const run = msg?.run_id ? runsById.get(msg.run_id) : null;
      if (run) nextRun = run;
      rows[i] = { message: msg, run, nextRun };
    }
    return rows;
  }

  formatCart(items) {
    const list = Array.isArray(items) ? items : [];
    if (!list.length) return "—";
    return list
      .map((it) => {
        const label = it.label || it.name || `#${it.product_id}`;
        const qty = it.quantity != null ? `${it.quantity}` : "?";
        const unit = it.unit || "";
        return `${label} (${qty}${unit ? " " + unit : ""})`;
      })
      .join(" · ");
  }

  toolSummary(tools = []) {
    return tools.map((t) => ({
      type: t.type || t.name || "tool",
      ok: t.ok !== false,
      error: t.error || null,
    }));
  }

  render() {
    const metaEl = this.shadowRoot.getElementById("meta");
    const countEl = this.shadowRoot.getElementById("count");
    const list = this.shadowRoot.getElementById("list");

    metaEl.textContent = `Inspector de ${this.messages.length} mensajes.`;
    countEl.textContent = this.messages.length ? `${this.messages.length} filas` : "";

    list.innerHTML = "";
    this.rowMap.clear();
    this.rowOrder = [];

    const rows = this.buildRows();
    for (const row of rows) {
      const msg = row.message;
      const run = row.run;
      const dir = msg?.direction === "in" ? "in" : "out";
      const el = document.createElement("div");
      el.className = `item ${dir}`;
      el.dataset.messageId = msg.message_id;

      const intent = run?.llm_output?.intent || "—";
      const nextState = run?.llm_output?.next_state || "—";
      const prevState = row.nextRun?.prev_state || "—";
      const basket = run?.llm_output?.basket_resolved?.items || [];
      const tools = this.toolSummary(run?.tools || []);

      const llmMeta = run?.llm_output?._llm || null;
      const llmStatus = llmMeta?.audit?.validation?.ok === false ? "warn" : "ok";
      const llmNote = llmMeta?.audit?.validation?.ok === false
        ? "NLU inválido (fallback)"
        : llmMeta?.audit?.validation?.retried
          ? "NLU ok (retry)"
          : "NLU ok";

      el.innerHTML = `
        <div class="kv">
          <div class="k">${dir === "in" ? "IN" : "OUT"}</div>
          <div class="v">${new Date(msg.ts).toLocaleString()}</div>
          <div class="k">STATE</div>
          <div class="v">${dir === "out" ? nextState : prevState}</div>
          <div class="k">INTENT</div>
          <div class="v">${dir === "out" ? intent : "—"}</div>
          <div class="k">NLU</div>
          <div class="v">${dir === "out" && llmMeta ? llmNote : "—"}</div>
        </div>
        <div class="cart"><strong>Carrito:</strong> ${dir === "out" ? this.formatCart(basket) : "—"}</div>
        <div class="chips">
          ${tools
            .map(
              (t) =>
                `<span class="chip"><span class="dot ${t.ok ? "ok" : "err"}"></span>${t.type}</span>`
            )
            .join("")}
        </div>
      `;

      el.onclick = () => {
        this.highlight(msg.message_id);
      };

      list.appendChild(el);
      this.rowMap.set(msg.message_id, el);
      this.rowOrder.push(msg.message_id);
    }
  }

  applyHeights() {
    const BUBBLE_MARGIN = 12; // same as .bubble margin-bottom in run-timeline
    const MIN_ITEM_HEIGHT = 120; // minimum height for inspector items
    
    for (const [messageId, el] of this.rowMap.entries()) {
      const bubbleHeight = this.heights.get(messageId) || 0;
      // bubbleHeight includes offsetHeight + marginBottom
      const bubbleContentHeight = Math.max(0, bubbleHeight - BUBBLE_MARGIN);
      
      // Use the max between bubble height and our minimum
      const targetHeight = Math.max(bubbleContentHeight, MIN_ITEM_HEIGHT);
      el.style.minHeight = `${targetHeight}px`;
      el.style.marginBottom = `${BUBBLE_MARGIN}px`;
    }

    // After applying, emit final heights back so bubbles can sync
    requestAnimationFrame(() => this.emitInspectorHeights());
  }

  emitInspectorHeights() {
    const items = [];
    for (const [messageId, el] of this.rowMap.entries()) {
      const styles = window.getComputedStyle(el);
      const marginBottom = parseInt(styles.marginBottom || "0", 10) || 0;
      items.push({
        message_id: messageId,
        height: (el.offsetHeight || 0) + marginBottom,
      });
    }
    emit("ui:inspectorLayout", { chat_id: this.chatId, items });
  }

  highlight(messageId) {
    for (const [id, el] of this.rowMap.entries()) {
      el.classList.toggle("active", id === messageId);
    }
    emit("ui:highlightMessage", { message_id: messageId });
    const idx = this.rowOrder.indexOf(messageId);
    if (idx >= 0) this._playIdx = idx;
  }

  play() {
    if (this._playing) return;
    this._playing = true;
    this._timer = setInterval(() => this.step(), 800);
  }

  pause() {
    this._playing = false;
    if (this._timer) clearInterval(this._timer);
    this._timer = null;
  }

  step() {
    if (!this.rowOrder.length) return;
    if (this._playIdx >= this.rowOrder.length) {
      this.pause();
      return;
    }
    const messageId = this.rowOrder[this._playIdx];
    this.highlight(messageId);
    this._playIdx += 1;
  }
}

customElements.define("conversation-inspector", ConversationInspector);