/* ============================================================
   public/js/quickmenu/bazaar.js
   Marktplatz – Tab-Layout (wie Gaststätte)
============================================================ */

let baz_initialized = false;

export async function loadBazaar() {
  const body = document.getElementById("qm-body-basar");
  if (!body) return;

  if (baz_initialized) return;
  baz_initialized = true;

  /* CSS einmalig laden */
  if (!document.querySelector('link[href="/css/bazaar.css"]')) {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "/css/bazaar.css";
    document.head.appendChild(link);
  }

  body.innerHTML = `
    <div class="mp-wrap">

      <!-- Linke Tab-Leiste -->
      <aside class="mp-tabs" id="mp-tabs">
        <button class="mp-tab mp-tab-active" data-tab="mp-content-1">
          <span class="mp-tab-dot"></span>
          <span>Händler</span>
        </button>
        <button class="mp-tab" data-tab="mp-content-2">
          <span class="mp-tab-dot"></span>
          <span>Auktionen</span>
        </button>
        <button class="mp-tab" data-tab="mp-content-3">
          <span class="mp-tab-dot"></span>
          <span>Tauschbörse</span>
        </button>
      </aside>

      <!-- Inhalts-Bereich -->
      <div class="mp-content">

        <div class="mp-panel active" id="mp-content-1">
          <div class="mp-col-header">Händler</div>
          <div class="mp-body">
            <span class="mp-coming-soon">Demnächst verfügbar…</span>
          </div>
        </div>

        <div class="mp-panel" id="mp-content-2">
          <div class="mp-col-header">Auktionen</div>
          <div class="mp-body">
            <span class="mp-coming-soon">Demnächst verfügbar…</span>
          </div>
        </div>

        <div class="mp-panel" id="mp-content-3">
          <div class="mp-col-header">Tauschbörse</div>
          <div class="mp-body">
            <span class="mp-coming-soon">Demnächst verfügbar…</span>
          </div>
        </div>

      </div>
    </div>
  `;

  /* Tab-Klick */
  body.querySelectorAll(".mp-tab").forEach((btn) => {
    btn.addEventListener("click", () => {
      body.querySelectorAll(".mp-tab").forEach((t) => t.classList.remove("mp-tab-active"));
      body.querySelectorAll(".mp-panel").forEach((p) => p.classList.remove("active"));
      btn.classList.add("mp-tab-active");
      document.getElementById(btn.dataset.tab)?.classList.add("active");
    });
  });
}