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

class RunTimeline extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.chatId = null;

    this.shadowRoot.innerHTML = `
      <style>
        :host { display:block; padding:12px; }
        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
        .row { display:flex; gap:8px; align-items:center; }
        .muted { color:#8aa0b5; font-size:12px; }
        .title { font-weight:800; }
        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">Conversación</div>
        <div class="title" id="chat">—</div>
        <div class="muted" id="meta">Seleccioná una conversación.</div>
      </div>

      <div class="box">
        <div class="muted">Último run (raw)</div>
        <pre id="run">—</pre>
      </div>

      <div class="box">
        <div class="muted">Invariantes</div>
        <pre id="inv">—</pre>
      </div>
    `;
  }

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

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

  disconnectedCallback() {
    this._unsubSel?.();
    this._unsubRun?.();
  }

  async loadLatest() {
    this.shadowRoot.getElementById("chat").textContent = this.chatId || "—";
    this.shadowRoot.getElementById("meta").textContent = "Cargando…";

    const data = await api.runs({ chat_id: this.chatId, limit: 1 });
    const run = (data.items || [])[0];

    if (!run) {
      this.shadowRoot.getElementById("meta").textContent = "Sin runs aún.";
      this.shadowRoot.getElementById("run").textContent = "—";
      this.shadowRoot.getElementById("inv").textContent = "—";
      return;
    }
    this.show(run);
  }

  show(run) {
    this.shadowRoot.getElementById("chat").textContent = run.chat_id;
    this.shadowRoot.getElementById("meta").textContent =
      `run_id=${run.run_id} • ${run.latency_ms}ms • ${new Date(run.ts).toLocaleString()}`;

    this.shadowRoot.getElementById("run").textContent = JSON.stringify(run, null, 2);
    this.shadowRoot.getElementById("inv").textContent = JSON.stringify(run.invariants, null, 2);
  }
}

customElements.define("run-timeline", RunTimeline);