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

class DebugPanel 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; }
        .muted { color:#8aa0b5; font-size:12px; }
        .kv { display:grid; grid-template-columns:90px 1fr; gap:6px 10px; margin:10px 0 12px; }
        .k { color:#8aa0b5; font-size:12px; letter-spacing:.4px; text-transform:uppercase; }
        .v { font-size:13px; font-weight:800; color:#e7eef7; }
        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">Detalle (click en cualquier burbuja)</div>
        <div class="kv">
          <div class="k">INTENT</div><div class="v" id="intent">—</div>
          <div class="k">STATE</div><div class="v" id="state">—</div>
        </div>
        <pre id="out">—</pre>
      </div>
    `;
  }

  connectedCallback() {
    const out = this.shadowRoot.getElementById("out");
    const intentEl = this.shadowRoot.getElementById("intent");
    const stateEl = this.shadowRoot.getElementById("state");
    this._unsub = on("ui:selectedMessage", async ({ message }) => {
      if (!message) {
        out.textContent = "—";
        intentEl.textContent = "—";
        stateEl.textContent = "—";
        return;
      }
      const base = { message };
      if (message.run_id) {
        try {
          const run = await api.runById(message.run_id);
          base.run = run;
          const intent = run?.llm_output?.intent || "—";
          const state = run?.llm_output?.next_state || "—";
          intentEl.textContent = intent;
          stateEl.textContent = state;
        } catch (e) {
          base.run_error = String(e?.message || e);
          intentEl.textContent = "—";
          stateEl.textContent = "—";
        }
      } else {
        intentEl.textContent = "—";
        stateEl.textContent = "—";
      }
      out.textContent = JSON.stringify(base, null, 2);
    });
  }

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

customElements.define("debug-panel", DebugPanel);