botino/public/components/ops-shell.js

import { emit, on } from "../lib/bus.js";
import { navigateToView, navigateToItem } from "../lib/router.js";

class OpsShell extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this._currentView = "chat";
    this._currentParams = {};

    this.shadowRoot.innerHTML = `
      <style>
        :host { --bg:#0b0f14; --panel:#121823; --muted:#8aa0b5; --text:#e7eef7; --line:#1e2a3a; --blue:#1f6feb; }
        * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
        .app { height:100vh; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
        header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
        header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
        .nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
        .nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
        .nav-btn:hover { border-color:var(--blue); color:var(--text); }
        .nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
        .spacer { flex:1; }
        .status { font-size:12px; color:var(--muted); }
        
        /* Layout para chat activo (2 columnas: burbujas + inspector) */
        .layout-chat { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 310px; min-height:0; overflow:hidden; }
        .col { border-right:1px solid var(--line); min-height:0; overflow:hidden; }
        .chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--line); }
        .chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--line); }
        .inspectorTop { grid-column:2; grid-row:1; border-right:none; }
        
        /* Layout para CRUDs */
        .layout-crud { height:100%; display:block; min-height:0; overflow:hidden; }
        
        .view { display:none; flex:1; min-height:0; overflow:hidden; }
        .view.active { display:flex; flex-direction:column; }
      </style>

      <div class="app">
        <header>
          <h1>Bot Ops Console</h1>
          <nav class="nav">
            <a class="nav-btn active" href="/chat" data-view="chat">Chat</a>
            <a class="nav-btn" href="/conversaciones" data-view="conversations">Conversaciones</a>
            <a class="nav-btn" href="/usuarios" data-view="users">Usuarios</a>
            <a class="nav-btn" href="/productos" data-view="products">Productos</a>
            <a class="nav-btn" href="/equivalencias" data-view="aliases">Equivalencias</a>
            <a class="nav-btn" href="/crosssell" data-view="crosssell">Cross-sell</a>
            <a class="nav-btn" href="/cantidades" data-view="quantities">Cantidades</a>
            <a class="nav-btn" href="/pedidos" data-view="orders">Pedidos</a>
            <a class="nav-btn" href="/test" data-view="test">Test</a>
          </nav>
          <div class="spacer"></div>
          <div class="status" id="sseStatus">SSE: connecting…</div>
        </header>

        <div id="viewChat" class="view active">
          <div class="layout-chat">
            <div class="col chatTop"><run-timeline></run-timeline></div>
            <div class="col inspectorTop"><conversation-inspector></conversation-inspector></div>
            <div class="col chatBottom"><chat-simulator></chat-simulator></div>
          </div>
        </div>

        <div id="viewConversations" class="view">
          <div class="layout-crud">
            <conversations-crud></conversations-crud>
          </div>
        </div>

        <div id="viewUsers" class="view">
          <div class="layout-crud">
            <users-crud></users-crud>
          </div>
        </div>

        <div id="viewProducts" class="view">
          <div class="layout-crud">
            <products-crud></products-crud>
          </div>
        </div>

        <div id="viewAliases" class="view">
          <div class="layout-crud">
            <aliases-crud></aliases-crud>
          </div>
        </div>

        <div id="viewCrosssell" class="view">
          <div class="layout-crud">
            <recommendations-crud rule-type="crosssell"></recommendations-crud>
          </div>
        </div>

        <div id="viewQuantities" class="view">
          <div class="layout-crud">
            <quantities-crud></quantities-crud>
          </div>
        </div>

        <div id="viewOrders" class="view">
          <div class="layout-crud">
            <orders-crud></orders-crud>
          </div>
        </div>

        <div id="viewTest" class="view">
          <div class="layout-crud">
            <test-panel></test-panel>
          </div>
        </div>
      </div>
    `;
  }

  connectedCallback() {
    this._unsub = on("sse:status", (s) => {
      const el = this.shadowRoot.getElementById("sseStatus");
      el.textContent = s.ok ? "SSE: connected" : "SSE: disconnected (retrying…)";
    });

    // Listen for view switch requests from other components
    this._unsubSwitch = on("ui:switchView", ({ view }) => {
      if (view) this.setView(view, {}, { updateUrl: true });
    });

    // Listen for router changes (popstate, initial load)
    this._unsubRouter = on("router:change", ({ view, params }) => {
      this.setView(view, params, { updateUrl: false });
    });

    // Navigation - intercept clicks on nav links
    const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
    for (const btn of navBtns) {
      btn.onclick = (e) => {
        e.preventDefault();
        const view = btn.dataset.view;
        this.setView(view, {}, { updateUrl: true });
      };
    }
  }

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

  setView(viewName, params = {}, { updateUrl = true } = {}) {
    this._currentView = viewName;
    this._currentParams = params;

    // Update nav buttons
    const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
    for (const btn of navBtns) {
      btn.classList.toggle("active", btn.dataset.view === viewName);
    }

    // Update views
    const views = this.shadowRoot.querySelectorAll(".view");
    for (const view of views) {
      const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
      view.classList.toggle("active", isActive);
    }

    // Update URL if requested
    if (updateUrl) {
      if (params.id) {
        navigateToItem(viewName, params.id);
      } else {
        navigateToView(viewName);
      }
    }

    // Emit event for components that need to know about route params
    emit("router:viewChanged", { view: viewName, params });
  }
}

customElements.define("ops-shell", OpsShell);