// Sélection des éléments principaux
const svgElement = document.querySelector('#sites-map-container svg');
const popup = document.querySelector('#sites-map-container #popup');
const popupContent = document.querySelector('#sites-map-container #popup-content');
const modalBackground = document.querySelector('#sites-map-container #modal-background');

// Vérification de la page courante
const isHomePage = document.querySelector('main#home') !== null;
const isLessitesPage = document.querySelector('div#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
const isCandidaturePage = document.querySelector('main#pour_candidater') !== null;
const isNodeTypeProjetPage = document.body.classList.contains('node-type-projet');
const isNodeTypeRessourcePage = document.body.classList.contains('node-type-ressource');


// Identifier le cercle de la page courante pour node-type-site
let currentPageCircle = null;
let lastHoveredCircle = null; // Variable pour conserver le dernier cercle survolé

if (isNodeTypeSitePage) {
    const body = document.querySelector('body');
    const pageIdMatch = body.className.match(/node-id-(\d+)/);
    if (pageIdMatch) {
        const pageId = pageIdMatch[1];
        currentPageCircle = document.querySelector(`#site-${pageId} circle`);
        if (currentPageCircle) {
            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle correspondant
        }
    }
}
// Identifier le cercle du SITE lié quand on est sur une page node-type-projet
if (isNodeTypeProjetPage && svgElement) {
    // On récupère le lien vers le site lié dans le bloc "Site lié"
    const linkedSiteLink = document.querySelector('.field_field_site_projet article.node-type-site a[href*="/sites/"]');

    if (linkedSiteLink) {
        // On normalise le chemin (sans domaine) de l'URL du site
        const sitePath = new URL(linkedSiteLink.getAttribute('href'), window.location.origin).pathname;

        // On cherche le cercle dont le data-url pointe vers le même site
        const correspondingCircle = Array.from(svgElement.querySelectorAll('circle.site-link')).find(circle => {
            const circleUrl = circle.getAttribute('data-url');
            if (!circleUrl) return false;

            const circlePath = new URL(circleUrl, window.location.origin).pathname;
            return circlePath === sitePath;
        });

        if (correspondingCircle) {
            currentPageCircle = correspondingCircle;
            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle du site lié
        }
    }
}

// Identifier le cercle du SITE lié quand on est sur une page node-type-ressource
if (isNodeTypeRessourcePage && svgElement) {
    // On récupère le nom du site dans le bloc "Site(s)"
    const siteField = document.querySelector('.field_field_site');
    if (siteField && siteField.children[1]) {
        // children[0] = label "Site(s)", children[1] = wrapper du nom
        const siteName = siteField.children[1].textContent.trim(); // ex : "Corbeil-Essonnes, quartier des Tarterêts"

        // On cherche le cercle dont le data-content contient ce nom
        const correspondingCircle = Array.from(svgElement.querySelectorAll('circle.site-link')).find(circle => {
            const content = circle.getAttribute('data-content') || '';
            return content.includes(siteName);
        });

        if (correspondingCircle) {
            currentPageCircle = correspondingCircle;
            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle du site lié
        }
    }
}




// Fonction pour afficher le popup
function showPopup(content) {
    popupContent.innerHTML = content;
    popup.style.display = 'block';
    modalBackground.style.display = 'block';
}

// Fonction pour fermer le popup
function closePopup() {
    popup.style.display = 'none';
    modalBackground.style.display = 'none';
}

// Gérer le survol des cercles en fonction de la page
svgElement.addEventListener('mouseover', function(event) {
    if (event.target.classList.contains('site-link')) {
        const content = event.target.getAttribute('data-content');
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
        const correspondingProjetRow = document.querySelector(`.node-type-projet[data-id="${dataId}"]`);


        // Interaction pour la page d'accueil
        if (isHomePage) {
            showPopup(content);  // Affiche le popup
            if (lastHoveredCircle && lastHoveredCircle !== event.target) {
                lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
            }
            event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
            lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
        
        }
            // Interaction pour la page de candidature
            if (isCandidaturePage) {
            showPopup(content);  // Affiche le popup
            if (lastHoveredCircle && lastHoveredCircle !== event.target) {
                lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
            }
            event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
            lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
        }

        // Interaction pour la page #lessites
        if (isLessitesPage && correspondingRow && correspondingProjetRow) {
            correspondingRow.style.border = '2px solid red';  // Bordure rouge autour du .views-row correspondant
        }
    }

    // Applique une couleur rouge au cercle au survol, sauf pour le cercle de la page courante
    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
        event.target.setAttribute('fill', 'red');
    }
});

// Gérer la sortie de survol des cercles en fonction de la page, avec exception pour le cercle de la page courante
svgElement.addEventListener('mouseout', function(event) {
    // Ignorer le mouseout pour le cercle correspondant à la page courante dans node-type-site
    if (event.target === currentPageCircle) {
        return;
    }

    if (event.target.classList.contains('site-link')) {
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
        const correspondingProjetRow = document.querySelector(`.node-type-projet[data-id="${dataId}"]`);


        // Ferme le popup pour la page d'accueil
        if (isHomePage || isCandidaturePage) {
            // closePopup();
            return;
        }

        // Supprime la bordure rouge autour du .views-row pour la page #lessites
        if (isLessitesPage && correspondingRow && correspondingProjetRow) {
            correspondingRow.style.border = 'none';
        }
    }

    // Remet la couleur noire au cercle lorsqu'on quitte le survol, sauf pour le cercle de la page courante
    if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
        event.target.setAttribute('fill', 'black');
    }
});



// Gérer les clics sur les cercles de la carte
if (svgElement) {
    svgElement.addEventListener('click', function(event) {
      const target = event.target;
  
      if (!target.classList || !target.classList.contains('site-link')) {
        return;
      }
  
      // On récupère les URLs
      const missionUrl  = target.getAttribute('data-mission-photo-url');
      const fallbackUrl = target.getAttribute('data-url');
  
      // 1) Page RESSOURCE : priorité à la mission photo
      if (isNodeTypeRessourcePage) {
        event.preventDefault(); // empêche le <a href="..."> d'agir
  
        if (missionUrl) {
          window.location.href = missionUrl;          // Aller directement à la mission photo
        } else if (fallbackUrl) {
          window.location.href = fallbackUrl;         // Sinon, on garde le comportement actuel
        }
        return;
      }
  
      // 2) Page SITE : comportement actuel
      if (isNodeTypeSitePage) {
        if (fallbackUrl) {
          event.preventDefault();
          window.location.href = fallbackUrl;
        }
        return;
      }
  
      // 3) Page PROJET : comportement actuel
      if (isNodeTypeProjetPage) {
        if (fallbackUrl) {
          event.preventDefault();
          window.location.href = fallbackUrl;
        }
        return;
      }
  
      // 4) Autres pages : si tu veux un comportement par défaut
      // if (fallbackUrl) {
      //   event.preventDefault();
      //   window.location.href = fallbackUrl;
      // }
    });
  }
  

// Fonction pour gérer l'agrandissement de views-row au survol des cercles
if (isLessitesPage) {
    const circles = svgElement.querySelectorAll('circle.site-link');
    
    circles.forEach(circle => {
        // Récupérer l'URL du projet depuis le `data-url` du cercle
        const projectUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;

        circle.addEventListener('mouseover', function() {
            // Sélectionner le .views-row correspondant
            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
                const rowLink = row.querySelector('a[href]');
                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
            });

            // Si un .views-row correspondant est trouvé, on augmente sa taille
            if (correspondingRow) {
                correspondingRow.style.transform = 'scale(1.05)';
                correspondingRow.style.transition = 'transform 0.2s ease'; // Animation fluide
            }
        });

        circle.addEventListener('mouseout', function() {
            // Sélectionner le .views-row correspondant
            const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
                const rowLink = row.querySelector('a[href]');
                return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
            });

            // Remettre la taille d'origine du .views-row
            if (correspondingRow) {
                correspondingRow.style.transform = 'scale(1)'; // Taille d'origine
            }
        });
    });

    // Gérer le survol des .views-row pour surligner le cercle correspondant
    const viewsRows = document.querySelectorAll('.views-row');

    viewsRows.forEach(row => {
        // Récupère l'URL du projet dans le premier lien <a>
        const link = row.querySelector('a[href]');
        if (!link) return; // Passe si aucun lien n'est trouvé
        const projectUrl = new URL(link.getAttribute('href'), window.location.origin).pathname;

        row.addEventListener('mouseover', function() {
            // Sélectionne le cercle qui a la même URL dans data-url
            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
                return circleUrl === projectUrl;
            });

            // Si un cercle correspondant est trouvé, le mettre en rouge
            if (correspondingCircle) {
                correspondingCircle.setAttribute('fill', 'red');  // Surligne le cercle correspondant
            }
        });

        row.addEventListener('mouseout', function() {
            // Sélectionne le cercle qui a la même URL dans data-url
            const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
                const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
                return circleUrl === projectUrl;
            });

            // Remettre le cercle à sa couleur initiale
            if (correspondingCircle && correspondingCircle !== currentPageCircle) {
                correspondingCircle.setAttribute('fill', 'black');  // Remet le cercle à sa couleur initiale
            }
        });
    });

    
}

