// public/js/galleryRenderer.js
// Creazione degli elementi DOM per foto e attività.

(() => {
  "use strict";

  const INITIAL_EAGER_IMAGES = 20;
  const HIGH_PRIORITY_IMAGES = 8;

  function createPhotoTile(item, sectionItems, itemIndex, globalIndex) {
    const tile = document.createElement("div");
    tile.className = "thumb";
    tile.id = `photo_${item.id}`;
    if (item.deleted_at) tile.classList.add("soft-deleted");

    const gridThumb = window.toAbsoluteUrl(
      item.thub1 || item.thub2 || item.path,
      item.name,
      "thumbs",
      item.cartella
    );
    const modalPreview = window.toAbsoluteUrl(
      item.thub2 || item.thub1 || item.path,
      item.name,
      "thumbs",
      item.cartella
    );
    const original = window.toAbsoluteUrl(
      item.path,
      item.name,
      "original",
      item.cartella
    );

    const image = document.createElement("img");
    image.src = gridThumb;
    image.alt = item?.name || "";
    image.loading = globalIndex < INITIAL_EAGER_IMAGES ? "eager" : "lazy";
    image.decoding = "async";
    if (globalIndex < HIGH_PRIORITY_IMAGES) image.fetchPriority = "high";
    tile.appendChild(image);

    if (item?.mime_type?.startsWith("video/")) {
      const play = document.createElement("div");
      play.className = "play-icon";
      play.textContent = "▶";
      tile.appendChild(play);
    }

    tile.addEventListener("click", () => {
      window.closeBottomSheet?.();
      if (typeof window.openModalFromList === "function") {
        window.openModalFromList(sectionItems, itemIndex);
      } else {
        window.openModal?.(original, modalPreview, item);
      }
    });

    return tile;
  }

  function createActivityTile(item, sectionItems, itemIndex) {
    const tile = document.createElement("div");
    tile.className = "activity-tile";
    tile.id = `activity_${String(item.id || "").replaceAll("/", "_")}`;
    if (item.deleted_at) tile.classList.add("soft-deleted");

    const routeBox = document.createElement("div");
    routeBox.className = "activity-route-thumb loading";
    routeBox.innerHTML = '<div class="activity-route-placeholder"><span>Caricamento percorso...</span></div>';
    tile.appendChild(routeBox);
    window.ActivityThumbs?.renderRouteThumb(routeBox, item);

    const label = document.createElement("div");
    label.className = "activity-label";
    label.textContent = item.display_name || item.route_name || item.title || item.name || "(senza nome)";
    tile.appendChild(label);

    const metaText = window.GalleryUtils?.formatActivityMeta(item) || "";
    if (metaText) {
      const meta = document.createElement("div");
      meta.className = "activity-meta";
      meta.textContent = metaText;
      tile.appendChild(meta);
    }

    tile.addEventListener("click", () => {
      window.closeBottomSheet?.();
      window.openActivityModal?.(item, sectionItems, itemIndex);
    });

    return tile;
  }

  function renderGallery(sections) {
    const gallery = document.getElementById("gallery");
    if (!gallery) return;

    const fragment = document.createDocumentFragment();
    let globalPhotoIndex = 0;

    for (const section of sections) {
      const heading = document.createElement("h2");
      heading.className = "gallery-section-title";
      heading.textContent = section.label;
      fragment.appendChild(heading);

      const container = document.createElement("div");
      container.className = "gallery-section";

      section.items.forEach((item, itemIndex) => {
        const tile = window.state?.mode === "photos"
          ? createPhotoTile(item, section.items, itemIndex, globalPhotoIndex++)
          : createActivityTile(item, section.items, itemIndex);
        container.appendChild(tile);
      });

      fragment.appendChild(container);
    }

    gallery.replaceChildren(fragment);
  }

  window.GalleryRenderer = Object.freeze({ renderGallery });
  window.renderGallery = renderGallery;
})();