// ===============================
// MAPPA GLOBALE (marker personalizzati + bottom sheet)
// ===============================

document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);

function openGlobalMap() {
  const mapDiv = document.getElementById("globalMap");
  const gallery = document.getElementById("gallery");

  const isOpen = mapDiv.classList.contains("open");

  // Toggle mappa
  if (isOpen) {
    mapDiv.classList.remove("open");
    gallery.classList.remove("hidden");
    closeBottomSheet();
    return;
  }

  mapDiv.classList.add("open");
  gallery.classList.add("hidden");

  // Inizializza solo la prima volta
  if (!globalMap) {
    globalMap = L.map("globalMap").setView([42.5, 12.5], 6);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19
    }).addTo(globalMap);

    // ===============================
    // CLUSTER PERSONALIZZATI
    // ===============================
    globalMarkers = L.markerClusterGroup({
      iconCreateFunction: function (cluster) {
        const markers = cluster.getAllChildMarkers();
        const representative = markers[0].photoData;

        return L.divIcon({
          html: `
            <div class="photo-cluster">
              <img class="cluster-back" src="https://prova.patachina.it/${representative.thub1}">
              <img class="cluster-front" src="https://prova.patachina.it/${representative.thub1}">
            </div>
          `,
          className: "",
          iconSize: [56, 56]
        });
      }
    });

    globalMap.addLayer(globalMarkers);

    // ===============================
    // CLICK SUI CLUSTER → BOTTOM SHEET
    // ===============================
    globalMarkers.on("clusterclick", function (a) {
      const markers = a.layer.getAllChildMarkers();
      const photos = markers.map(m => m.photoData);

      openBottomSheet(photos);
    });

    // ===============================
    // MARKER SINGOLI PERSONALIZZATI
    // ===============================
    photosData.forEach(photo => {
      if (!photo.gps || !photo.gps.lat || !photo.gps.lng) return;

      const markerIcon = L.divIcon({
        html: `
          <div class="photo-marker">
            <img src="https://prova.patachina.it/${photo.thub1}">
          </div>
        `,
        className: "",
        iconSize: [48, 48]
      });

      const marker = L.marker([photo.gps.lat, photo.gps.lng], {
        icon: markerIcon
      });

      // Salviamo i dati della foto nel marker
      marker.photoData = photo;

      // CLICK SU MARKER → BOTTOM SHEET CON 1 FOTO
      marker.on("click", () => {
        openBottomSheet([photo]);
      });

      globalMarkers.addLayer(marker);
    });
  }

  // Fix dimensioni mappa
  setTimeout(() => globalMap.invalidateSize(), 200);
}