export async function loadArena() {
  const ui = document.querySelector(".building-ui");

  ui.innerHTML = `
<div id="arena-ui">

  <div class="arena-title">⚔️ Kampfarena</div>
  <p class="arena-subtitle">Wähle deinen Kampfmodus</p>

  <div class="arena-modes">

    <div class="arena-mode-card" data-mode="1v1">
      <div class="arena-mode-icon">🗡️</div>
      <div class="arena-mode-label">1v1</div>
      <div class="arena-mode-desc">Einzelkampf – Beweis deine Stärke im Duell</div>
    </div>

    <div class="arena-mode-card" data-mode="2v2">
      <div class="arena-mode-icon">⚔️</div>
      <div class="arena-mode-label">2v2</div>
      <div class="arena-mode-desc">Verbünde dich mit einem Kameraden im Kampf</div>
    </div>

    <div class="arena-mode-card" data-mode="4v4">
      <div class="arena-mode-icon">🛡️</div>
      <div class="arena-mode-label">4v4</div>
      <div class="arena-mode-desc">Schlachtruf – Führe deine Truppe zum Sieg</div>
    </div>

  </div>

</div>
`;

  initArenaModes();
}

function initArenaModes() {
  document.querySelectorAll(".arena-mode-card").forEach((card) => {
    card.addEventListener("click", () => {
      const mode = card.dataset.mode;
      if (mode === "1v1") {
        const margin = 50;
        const width = window.screen.width - margin * 2;
        const height = window.screen.height - margin * 2;
        const tab = window.open(
          "/arena/1v1",
          "_blank",
          `width=${width},height=${height},left=${margin},top=${margin}`,
        );
        tab?.focus();
      } else {
        console.log("Arena Modus gewählt:", mode);
      }
    });
  });
}