server_photo_s85js/public/js/bottomSheet.js

// ===============================
// BOTTOM SHEET — foto + attività
// ===============================

const bottomSheet = document.getElementById("bottomSheet");
const sheetGallery = document.getElementById("sheetGallery");
let optionsSheetRef = document.getElementById("optionsSheet");

// Overlay difensivo
let sheetOverlay = document.getElementById("sheetOverlay");
if (!sheetOverlay) {
  sheetOverlay = document.createElement("div");
  sheetOverlay.id = "sheetOverlay";
  sheetOverlay.className = "sheet-overlay";
  document.body.appendChild(sheetOverlay);
}

// ===============================
// APRI BOTTOM SHEET (foto + attività)
// ===============================
function openBottomSheet(itemList) {
  const list = Array.isArray(itemList) ? itemList : [];

  // 0 o 1 elemento → apri modal direttamente
  if (list.length <= 1) {
    const item = list[0];
    if (item) {
      closeBottomSheet();

      if (state.mode === "photos") {
        window.openModalFromList?.([item], 0);
      } else {
        window.openActivityModal?.(item);
      }
    }
    return;
  }

  // 2+ elementi → strip
  sheetGallery.innerHTML = "";

  list.forEach((item, index) => {
    const div = document.createElement("div");
    div.className = "sheet-item";
    div.tabIndex = 0;

    // ===============================
    // FOTO
    // ===============================
    if (state.mode === "photos") {
      const { preview } = mediaUrlsFromPhoto(item);

      const img = document.createElement("img");
      img.className = "sheet-thumb";
      img.src = preview;
      img.alt = item?.name || "";
      img.loading = "lazy";

      const openFromIndex = () => {
        closeBottomSheet();
        window.openModalFromList?.(list, index);
      };

      div.addEventListener("click", openFromIndex);
      div.addEventListener("keydown", (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          openFromIndex();
        }
      });

      div.appendChild(img);
    }

    // ===============================
    // ATTIVITÀ
    // ===============================
else {
  div.classList.add("activity-sheet-item");

  const routeBox = document.createElement("div");
  routeBox.className = "activity-sheet-route";

  routeBox.innerHTML = `
    <div class="activity-route-placeholder">
      <span>...</span>
    </div>
  `;

  window.renderActivityRouteThumb?.(routeBox, item);

  /*const label = document.createElement("div");
  label.className = "activity-sheet-label";
  label.textContent = item.display_name || "Attività";
*/
const label = document.createElement("div");
label.className = "activity-sheet-label";
label.textContent =
  item.display_name ||
  item.route_name ||
  item.title ||
  item.name ||
  "Attività";

  const openFromIndex = () => {
    closeBottomSheet();
    window.openActivityModal?.(item, list, index);
  };

  div.addEventListener("click", openFromIndex);

  div.appendChild(routeBox);
  div.appendChild(label);
}


  sheetGallery.appendChild(div);
});

bottomSheet.classList.add("open");
sheetOverlay.classList.add("open");

}

// ===============================
// AGGIORNA CONTENUTO BOTTOM SHEET
// ===============================
function refreshBottomSheet(itemList) {
  const list = Array.isArray(itemList) ? itemList : [];

  if (!bottomSheet.classList.contains("open")) {
    return;
  }

  sheetGallery.innerHTML = "";

  list.forEach((item, index) => {

    const div = document.createElement("div");
    div.className = "sheet-item";
    div.tabIndex = 0;

    // FOTO
    if (state.mode === "photos") {

      const { preview } = mediaUrlsFromPhoto(item);

      const img = document.createElement("img");
      img.className = "sheet-thumb";
      img.src = preview;
      img.alt = item?.name || "";
      img.loading = "lazy";

      div.appendChild(img);

      div.onclick = () => {
        closeBottomSheet();
        window.openModalFromList?.(list, index);
      };

    }

    // ATTIVITÀ
    else {

      div.classList.add("activity-sheet-item");

      const routeBox = document.createElement("div");
      routeBox.className = "activity-sheet-route";

      routeBox.innerHTML = `
        <div class="activity-route-placeholder">
          <span>...</span>
        </div>
      `;

      window.renderActivityRouteThumb?.(routeBox, item);

      const label = document.createElement("div");
      label.className = "activity-sheet-label";
      label.textContent =
        item.display_name ||
        item.route_name ||
        item.title ||
        item.name ||
        "Attività";

      div.appendChild(routeBox);
      div.appendChild(label);

      div.onclick = () => {
        closeBottomSheet();
        window.openActivityModal?.(item, list, index);
      };
    }

    sheetGallery.appendChild(div);
  });
}

// ===============================
// CHIUDI BOTTOM SHEET
// ===============================
function closeBottomSheet() {
  bottomSheet.classList.remove("open");
  sheetOverlay.classList.remove("open");
}

// ===============================
// OPTIONS SHEET (versione bottomSheet)
// ===============================
function openOptionsSheetFromBottom() {
  optionsSheetRef?.classList.add("open");
  sheetOverlay.classList.add("open");
}

function closeOptionsSheetFromBottom() {
  optionsSheetRef?.classList.remove("open");
  sheetOverlay.classList.remove("open");
}

// ===============================
// CHIUSURA CLICCANDO FUORI
// ===============================
sheetOverlay.addEventListener("click", () => {
  closeBottomSheet();
  closeOptionsSheetFromBottom();

  // PATCH: spegni overlay quando chiudi il bottomsheet
  sheetOverlay.classList.remove("open");
  sheetOverlay.style.pointerEvents = "none";
});


// ===============================
// CHIUSURA TOCCANDO LA MANIGLIA
// ===============================
document.querySelectorAll(".sheet-header").forEach(header => {
  header.addEventListener("click", () => {
    closeBottomSheet();
    closeOptionsSheetFromBottom();

    // PATCH: spegni overlay quando chiudi il bottomsheet
    sheetOverlay.classList.remove("open");
    sheetOverlay.style.pointerEvents = "none";
  });
});

// ===============================
// EXPORT GLOBALI
// ===============================
window.openBottomSheet = openBottomSheet;
window.closeBottomSheet = closeBottomSheet;

window.openOptionsSheetFromBottom = openOptionsSheetFromBottom;
window.closeOptionsSheetFromBottom = closeOptionsSheetFromBottom;

window.BottomSheet = {
  open: openBottomSheet,
  close: closeBottomSheet,
  openOptions: openOptionsSheetFromBottom,
  closeOptions: closeOptionsSheetFromBottom
};

window.refreshBottomSheet = refreshBottomSheet;