/* =====================================================================
   medien-welt.js — gemeinsame Render-Logik für die 3 Welten-Medienseiten
   (medien-dogfather.html / medien-hasidog.html / medien-casper.html)

   Jede der 3 Seiten setzt <body data-welt="dogfather|hasidog|casper"> und
   lädt data-media.js, data-videos.js, data-aktionen.js VOR dieser Datei —
   so gibt es EIN Template/Skript für alle 3 Welten, ohne Code-Verdopplung.
   ===================================================================== */

function renderFotoItem(item) {
  const media = item.src
    ? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
    : `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
  return `<figure class="gallery-item card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption></figure>`;
}

function renderVideoItem(item) {
  const media = item.src
    ? `<video src="${item.src}" controls style="width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;"></video>`
    : `<div class="img-placeholder" style="aspect-ratio:9/16;">${item.title}<br><span class="small">Video folgt</span></div>`;
  return `<figure class="card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.title}</figcaption></figure>`;
}

function renderAktionItem(a) {
  return `
    <a class="card" href="aktion-detail.html?id=${a.id}">
      <span class="tag">${a.tag} · ${a.status}</span>
      <h3>${a.title}</h3>
      <p>${a.summary}</p>
      <span class="small" style="color:var(--accent);">Details ansehen →</span>
    </a>`;
}

function bindLightbox() {
  const lb = document.getElementById("lightbox");
  const lbContent = document.getElementById("lightbox-content");
  if (!lb || !lbContent) return;
  document.querySelectorAll("#foto-grid .gallery-item").forEach((el) => {
    el.addEventListener("click", () => {
      lbContent.innerHTML = el.innerHTML;
      lb.classList.add("open");
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  const welt = document.body.dataset.welt;
  if (!welt) return;

  const fotoGrid = document.getElementById("foto-grid");
  if (fotoGrid) {
    const fotos = (window.MEDIA || []).filter((m) => m.welt === welt);
    fotoGrid.innerHTML = fotos.map(renderFotoItem).join("") || `<p class="muted">Noch keine Fotos in dieser Welt.</p>`;
    bindLightbox();
  }

  const videoGrid = document.getElementById("video-grid");
  if (videoGrid) {
    const videos = (window.VIDEOS || []).filter((v) => v.welt === welt);
    videoGrid.innerHTML = videos.map(renderVideoItem).join("") || `<p class="muted">Noch keine Videos in dieser Welt.</p>`;
  }

  const aktionenGrid = document.getElementById("aktionen-grid");
  if (aktionenGrid) {
    const aktionen = (window.AKTIONEN || []).filter((a) => a.welt === welt);
    aktionenGrid.innerHTML = aktionen.map(renderAktionItem).join("") || `<p class="muted">Aktuell keine Events in dieser Welt.</p>`;
  }

  const lb = document.getElementById("lightbox");
  if (lb) {
    lb.addEventListener("click", (e) => {
      if (e.target === lb || e.target.closest(".lightbox-close")) lb.classList.remove("open");
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") lb.classList.remove("open");
    });
  }
});
