/* ============================================================
   public/js/buildings/bazaar.js
   Bazaar – eigenes Parchment-Popup (wie Gaststätte)
============================================================ */

let baz_initialized = false;

/* ── CSS einmalig laden ── */
function loadCSS() {
  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);
  }
}

/* ── Popup-Element erzeugen falls noch nicht vorhanden ── */
function ensurePopup() {
  if (document.getElementById("bazaar-popup")) return;

  const popup = document.createElement("div");
  popup.id = "bazaar-popup";
  popup.className = "qm-popup";
  popup.innerHTML = `
    <div class="qm-popup-header">
      <span class="qm-popup-title">Bazaar</span>
      <span class="qm-popup-close" id="bazaar-close">✕</span>
    </div>
    <div class="mp-body-wrap">
      <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>
      <div class="mp-content">
        <div class="mp-panel active" id="mp-content-1">
          <div class="mp-col-header">Händler</div>
          <div class="mp-panel-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-panel-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-panel-body">
            <span class="mp-coming-soon">Demnächst verfügbar…</span>
          </div>
        </div>
      </div>
    </div>
  `;
  document.body.appendChild(popup);

  /* Schließen-Button */
  popup.querySelector("#bazaar-close").addEventListener("click", closeBazaar);

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

  /* Drag-fähig machen */
  const header = popup.querySelector(".qm-popup-header");
  let isDragging = false, startX, startY, startLeft, startTop;
  header.style.cursor = "grab";
  header.addEventListener("mousedown", (e) => {
    if (e.target.classList.contains("qm-popup-close")) return;
    isDragging = true;
    header.style.cursor = "grabbing";
    const rect = popup.getBoundingClientRect();
    startX = e.clientX; startY = e.clientY;
    startLeft = rect.left; startTop = rect.top;
    popup.style.transform = "none";
    popup.style.left = startLeft + "px";
    popup.style.top  = startTop  + "px";
    e.preventDefault();
  });
  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
    popup.style.left = (startLeft + (e.clientX - startX)) + "px";
    popup.style.top  = (startTop  + (e.clientY - startY)) + "px";
  });
  document.addEventListener("mouseup", () => {
    if (!isDragging) return;
    isDragging = false;
    header.style.cursor = "grab";
  });
}

function closeBazaar() {
  document.getElementById("bazaar-popup")?.classList.remove("active");
  document.getElementById("qm-overlay")?.classList.remove("active");
}

/* ── Öffentliche Funktion ── */
export function loadBazaar() {
  loadCSS();
  ensurePopup();

  const popup  = document.getElementById("bazaar-popup");
  const overlay = document.getElementById("qm-overlay");

  popup.style.left = "50%";
  popup.style.top  = "50%";
  popup.style.transform = "translate(-50%, -50%) scale(1)";
  popup.classList.add("active");
  overlay?.classList.add("active");
}