// Generisches Modal fuer Board-/Monitor-Detailansichten (Visualization.md 4.5: "Modals sind
// reines HTML/CSS/JS ohne fremde UI-Bibliothek, per <dialog>-Element ... umgesetzt"). Dieses
// Modul kuemmert sich nur um Erzeugen/Oeffnen/Schliessen des <dialog>-Elements; welchen Inhalt
// es zeigt, entscheidet der Aufrufer (office-render.js) per renderBody-Callback.

let dialogEl = null;

function ensureDialog() {
  if (dialogEl) {
    return dialogEl;
  }

  dialogEl = document.createElement("dialog");
  dialogEl.className = "office-modal";
  dialogEl.innerHTML = `
    <form method="dialog" class="office-modal-form">
      <header class="office-modal-header">
        <h2 class="office-modal-title"></h2>
        <button type="submit" class="office-modal-close" aria-label="Schliessen">&times;</button>
      </header>
      <div class="office-modal-body"></div>
    </form>
  `;
  document.body.appendChild(dialogEl);
  return dialogEl;
}

/**
 * Oeffnet das Modal mit einem Titel und laesst den Aufrufer den Body fuellen.
 *
 * @param {{title: string}} content
 * @param {(body: HTMLElement, content: object) => void} renderBody
 */
export function openModal(content, renderBody) {
  const dialog = ensureDialog();
  dialog.querySelector(".office-modal-title").textContent = content.title;

  const body = dialog.querySelector(".office-modal-body");
  body.replaceChildren();
  renderBody(body, content);

  if (typeof dialog.showModal === "function") {
    dialog.showModal();
  } else {
    // Fallback fuer Umgebungen ohne <dialog>-Unterstuetzung (z.B. sehr alte Browser).
    dialog.setAttribute("open", "");
  }
}

export function closeModal() {
  if (dialogEl === null) {
    return;
  }
  if (typeof dialogEl.close === "function") {
    dialogEl.close();
  } else {
    dialogEl.removeAttribute("open");
  }
}