// ===============================
// MAPPA GLOBALE (marker personalizzati)
// ===============================

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

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

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

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

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

  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; // la prima foto del gruppo

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

    // 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 (serve per il cluster)
      marker.photoData = photo;

      marker.on("click", () => {
        // QUI poi apriremo il pannello inferiore
        openModal(
          `https://prova.patachina.it/${photo.path}`,
          photo.thub2
            ? `https://prova.patachina.it/${photo.thub2}`
            : `https://prova.patachina.it/${photo.thub1}`,
          photo
        );
      });

      globalMarkers.addLayer(marker);
    });
  }

  setTimeout(() => globalMap.invalidateSize(), 200);
}