/* =====================================================================
   gallery.js — filterbare Mediengalerie + Lightbox (für medien.html)

   MEDIA-Array unten mit echten Bildern befüllen sobald verfügbar
   (assets/img/...). Bis dahin rendert jeder Eintrag ohne "src" einen
   Platzhalter-Block mit passendem Alt-Text, damit die Struktur schon
   steht und nur noch Bilder eingehängt werden müssen.
   ===================================================================== */

const MEDIA = [
  { id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "" },
  { id: 2, category: "dogfather", alt: "Dogfather beim Stream", src: "" },
  { id: 3, category: "team", alt: "Team Dogi Gruppenbild", src: "" },
  { id: 4, category: "team", alt: "Patrick (Scout)", src: "" },
  { id: 5, category: "team", alt: "Bananenstift (Scout)", src: "" },
  { id: 6, category: "team", alt: "VanVan", src: "" },
  { id: 7, category: "hasidog", alt: "HasiDog Logo/Maskottchen", src: "" },
  { id: 8, category: "hasidog", alt: "Husky Casper", src: "" },
  { id: 9, category: "hasidog", alt: "Casper & Kater Simba", src: "" },
  { id: 10, category: "manager", alt: "Spicy Media Logo", src: "" },
  { id: 11, category: "aktionen", alt: "Weihnachtsaktion Portugal", src: "" },
  { id: 12, category: "aktionen", alt: "VanVan Teddys Merch", src: "" },
  // TODO: echte Bilder aus den vom User gelieferten Assets ergänzen
  // (assets/img/... Pfad eintragen, dann wird automatisch das Bild
  // statt des Platzhalters angezeigt).
];

function renderGalleryItem(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" data-category="${item.category}" data-index="${item.id}">
      ${media}
      <figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption>
    </figure>`;
}

function initGallery() {
  const grid = document.getElementById("gallery-grid");
  const filterBar = document.getElementById("gallery-filters");
  if (!grid || !filterBar) return;

  const categories = ["alle", ...new Set(MEDIA.map((m) => m.category))];
  filterBar.innerHTML = categories
    .map(
      (c, i) =>
        `<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c[0].toUpperCase() + c.slice(1)}</button>`
    )
    .join("");

  function draw(filter) {
    const items = filter === "alle" ? MEDIA : MEDIA.filter((m) => m.category === filter);
    grid.innerHTML = items.map(renderGalleryItem).join("") || `<p class="muted">Keine Bilder in dieser Kategorie.</p>`;
    bindLightbox();
  }

  filterBar.addEventListener("click", (e) => {
    const btn = e.target.closest(".filter-btn");
    if (!btn) return;
    filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
    btn.classList.add("active");
    draw(btn.dataset.filter);
  });

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

  draw("alle");

  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");
    });
  }
}

document.addEventListener("DOMContentLoaded", initGallery);