// 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('#home') !== null;
const isLessitesPage = document.querySelector('main#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');

// 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}"]`);

        // Interaction pour la page d'accueil
        if (isHomePage) {
            showPopup(content);  // Affiche le popup
        }

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

    // Applique une couleur rouge au cercle au survol
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'red');
    }
});

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

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

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

    // Remet la couleur noire au cercle lorsqu'on quitte le survol
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'black');
    }
});

// Gérer les clics pour la page node-type-site
svgElement.addEventListener('click', function(event) {
    if (isNodeTypeSitePage) {
        if (event.target.classList.contains('site-link')) {
            const targetUrl = event.target.getAttribute('data-url');
            if (targetUrl) {
                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
            }
        }
    }
});

// Mise en évidence du cercle correspondant à la page courante pour node-type-site
if (isNodeTypeSitePage) {
    const body = document.querySelector('body');
    const pageIdMatch = body.className.match(/node-id-(\d+)/);
    if (pageIdMatch) {
        const pageId = pageIdMatch[1];
        const matchingCircle = document.querySelector(`#site-${pageId} circle`);
        if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
    }
}