my_gallery/app.js

// ===============================
// CONFIG
// ===============================
const API_URL = 'https://prova.patachina.it/photos';

let photosData = [];
let currentPhoto = null;

// Mappa globale
let globalMap = null;
let globalMarkers = null;

// ===============================
// DEBUG INIZIALE
// ===============================
console.log("app.js caricato correttamente");


// ===============================
// FETCH DELLE FOTO
// ===============================
async function loadPhotos() {
  console.log("Inizio fetch:", API_URL);

  let res;
  try {
    res = await fetch(API_URL);
  } catch (e) {
    console.error("Errore fetch:", e);
    return;
  }

  console.log("Status fetch:", res.status);

  const text = await res.text();
  console.log("Risposta grezza (prime 200 chars):", text.substring(0, 200));

  try {
    photosData = JSON.parse(text);
    console.log("JSON parse OK, numero foto:", photosData.length);
  } catch (e) {
    console.error("Errore nel parse JSON:", e);
    return;
  }

  renderGallery(photosData);
}


// ===============================
// RENDER GALLERIA
// ===============================
function renderGallery(photos) {
  console.log("Render gallery, foto:", photos.length);

  const gallery = document.getElementById('gallery');
  gallery.innerHTML = '';

  photos.forEach(photo => {
    const thumbDiv = document.createElement('div');
    thumbDiv.className = 'thumb';

    const img = document.createElement('img');
    img.src = `https://prova.patachina.it/${photo.thub1}`;
    img.alt = photo.name || '';
    img.loading = "lazy";

    thumbDiv.appendChild(img);

    // ICONA PLAY SE È VIDEO
    if (photo.mime_type.startsWith("video/")) {
      const play = document.createElement("div");
      play.className = "play-icon";
      play.textContent = "▶";
      thumbDiv.appendChild(play);
    }

    // Fallback se thub2 manca
    const preview = photo.thub2
      ? `https://prova.patachina.it/${photo.thub2}`
      : `https://prova.patachina.it/${photo.thub1}`;

    thumbDiv.addEventListener('click', () => {
      openModal(
        `https://prova.patachina.it/${photo.path}`,
        preview,
        photo
      );
    });

    gallery.appendChild(thumbDiv);
  });
}


// ===============================
// MODALE (FOTO + VIDEO)
// ===============================
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modalClose');

function openModal(srcOriginal, srcPreview, photo) {
  currentPhoto = photo;

  const container = document.getElementById("modalMediaContainer");
  container.innerHTML = ""; // pulizia

  if (photo.mime_type.startsWith("video/")) {
    const video = document.createElement("video");
    video.src = srcOriginal;
    video.controls = true;
    video.autoplay = true;
    video.style.maxWidth = "100%";
    video.style.maxHeight = "100%";
    container.appendChild(video);
  } else {
    const img = document.createElement("img");
    img.src = srcPreview;
    img.style.maxWidth = "100%";
    img.style.maxHeight = "100%";
    img.style.objectFit = "contain";
    container.appendChild(img);

    const full = new Image();
    full.src = srcOriginal;
    full.onload = () => {
      img.src = srcOriginal;
    };
  }

  modal.classList.add('open');
}

function closeModal() {
  modal.classList.remove('open');
  document.getElementById("modalMediaContainer").innerHTML = "";
}

modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
  if (e.target === modal) closeModal();
});


// ===============================
// PANNELLO INFO + MAPPA
// ===============================
const infoPanel = document.getElementById('infoPanel');
const infoBtn = document.getElementById('modalInfoBtn');

infoBtn.addEventListener('click', () => {
  if (!currentPhoto) return;

  const gps = currentPhoto.gps || { lat: '-', lng: '-', alt: '-' };
  const folder = currentPhoto.path.split('/').slice(2, -1).join('/');

  infoPanel.innerHTML = `
    <h3>Informazioni</h3>

    <div class="info-row"><b>Nome:</b> ${currentPhoto.name}</div>
    <div class="info-row"><b>Data:</b> ${currentPhoto.taken_at}</div>

    <div class="info-row"><b>Latitudine:</b> ${gps.lat}</div>
    <div class="info-row"><b>Longitudine:</b> ${gps.lng}</div>
    <div class="info-row"><b>Altitudine:</b> ${gps.alt} m</div>

    <div class="info-row"><b>Dimensioni:</b> ${currentPhoto.width} × ${currentPhoto.height}</div>
    <div class="info-row"><b>Peso:</b> ${(currentPhoto.size_bytes / 1024 / 1024).toFixed(2)} MB</div>
    <div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div>

    <div class="info-row"><b>Cartella:</b> ${folder}</div>

    ${gps.lat !== '-' ? '<div id="infoMap" class="info-map"></div>' : ''}
  `;

  infoPanel.classList.add('open');

  if (gps.lat !== '-' && gps.lng !== '-') {
    setTimeout(() => {
      const map = L.map('infoMap', {
        zoomControl: false,
        attributionControl: false
      }).setView([gps.lat, gps.lng], 13);

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

      L.marker([gps.lat, gps.lng]).addTo(map);
    }, 50);
  }
});

document.addEventListener('click', (e) => {
  if (!infoPanel.classList.contains('open')) return;

  const clickedInsidePanel = infoPanel.contains(e.target);
  const clickedInfoBtn = infoBtn.contains(e.target);

  if (!clickedInsidePanel && !clickedInfoBtn) {
    infoPanel.classList.remove('open');
  }
});


// ===============================
// MAPPA GLOBALE
// ===============================
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);

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

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

  if (isOpen) {
    // Chiudi mappa → mostra gallery
    mapDiv.classList.remove("open");
    gallery.classList.remove("hidden");
    return;
  }

  // Apri mappa → nascondi gallery
  mapDiv.classList.add("open");
  gallery.classList.add("hidden");

  // Inizializza mappa 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);

    globalMarkers = L.markerClusterGroup();
    globalMap.addLayer(globalMarkers);

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

      const marker = L.marker([photo.gps.lat, photo.gps.lng]);

      marker.on("click", () => {
        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);
    });
  }

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


// ===============================
// AVVIO
// ===============================
loadPhotos();