// 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(s) nom(s) de site dans le champ .field_field_site
//     // Ici on part sur le premier (simple à gérer, extensible ensuite si besoin)
//     const siteNameNode = document.querySelector('.field_field_site > div:not(.field) div');

//     if (siteNameNode) {
//         const rawSiteName = siteNameNode.textContent || '';
        
//         // Normalisation basique pour éviter les soucis d'espaces / accents insécables
//         const normalize = (str) =>
//             str.replace(/\u00a0/g, ' ')      // remplace les espaces insécables
//                .replace(/\s+/g, ' ')        // compresse les espaces multiples
//                .trim()
//                .toLowerCase();

//         const targetName = normalize(rawSiteName);

//         const circles = svgElement.querySelectorAll('circle.site-link');

//         circles.forEach(circle => {
//             const contentHtml = circle.getAttribute('data-content') || '';

//             // On crée un élément temporaire pour parser le HTML de data-content
//             const tmp = document.createElement('div');
//             tmp.innerHTML = contentHtml;

//             // En général, le nom est dans le <strong>
//             const strong = tmp.querySelector('strong');
//             const circleNameRaw = strong ? strong.textContent : tmp.textContent;
//             const circleName = normalize(circleNameRaw || '');

//             if (circleName === targetName) {
//                 currentPageCircle = circle;
//                 currentPageCircle.setAttribute('fill', 'red'); // surligne le 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 pour la page node-type-site uniquement
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
            }
        }
    }
});

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

    
}