{% load traduction_tags %}
<!-- Carte interactive des universités -->
{% if map_settings and map_settings.is_active %}
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-primary mb-4">{{ map_settings|translate:'title' }}</h2>
            {% if map_settings.subtitle %}
            <p class="text-gray-600 max-w-2xl mx-auto">{{ map_settings|translate:'subtitle' }}</p>
            {% endif %}
        </div>

        <!-- Cadre contenant la carte et la liste -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Conteneur de la carte -->
            <div id="university-map" style="height: {{ map_settings.map_height }}px;"></div>

            <!-- Légende -->
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-center gap-6 text-sm text-gray-600">
                <div class="flex items-center">
                    <span class="w-4 h-4 rounded-full mr-2" style="background-color: {{ map_settings.coordinator_marker_color }};"></span>
                    {% trans_text 'Université coordinatrice' 'Coordinator University' 'Koordinator-Universität' %}
                </div>
                <div class="flex items-center">
                    <span class="w-4 h-4 rounded-full mr-2" style="background-color: {{ map_settings.marker_color }};"></span>
                    {% trans_text 'Université partenaire' 'Partner University' 'Partneruniversität' %}
                </div>
            </div>

            <!-- Liste des universités -->
            <div class="p-6 border-t border-gray-100">
                <div id="university-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    <!-- Liste chargée dynamiquement -->
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Charger les données des universités
    fetch('{% url "universities:map_data" %}')
        .then(response => response.json())
        .then(data => {
            initMap(data);
        })
        .catch(error => console.error('Erreur chargement carte:', error));
});

// Stockage global des marqueurs par ID
let universityMarkers = {};
let mapInstance = null;

function initMap(data) {
    const settings = data.settings;
    const universities = data.universities;

    // Initialiser la carte
    mapInstance = L.map('university-map').setView(settings.center, settings.zoom);

    // Ajouter les tuiles
    L.tileLayer(settings.tile_url, {
        attribution: settings.attribution,
        maxZoom: 18
    }).addTo(mapInstance);

    // Créer les icônes personnalisées
    function createMarkerIcon(color, isCoordinator) {
        const size = isCoordinator ? 40 : 32;
        return L.divIcon({
            className: 'custom-marker',
            html: `<div style="
                background-color: ${color};
                width: ${size}px;
                height: ${size}px;
                border-radius: 50% 50% 50% 0;
                transform: rotate(-45deg);
                border: 3px solid white;
                box-shadow: 0 2px 5px rgba(0,0,0,0.3);
                ${isCoordinator ? 'animation: pulse 2s infinite;' : ''}
            "></div>`,
            iconSize: [size, size],
            iconAnchor: [size/2, size],
            popupAnchor: [0, -size]
        });
    }

    // Ajouter le style d'animation
    const style = document.createElement('style');
    style.textContent = `
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
            100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
        }
        .custom-marker {
            background: transparent !important;
            border: none !important;
        }
        .university-card {
            transition: all 0.2s ease;
        }
        .university-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
    `;
    document.head.appendChild(style);

    // Ajouter les marqueurs
    const markers = [];
    universities.forEach(uni => {
        const color = uni.is_coordinator ? settings.coordinator_marker_color : settings.marker_color;
        const icon = createMarkerIcon(color, uni.is_coordinator);

        const marker = L.marker([uni.latitude, uni.longitude], { icon: icon })
            .addTo(mapInstance);

        // Contenu du popup
        const popupContent = `
            <div style="min-width: 200px; text-align: center;">
                ${uni.logo_url ? `<img src="${uni.logo_url}" alt="${uni.name}" style="max-height: 50px; max-width: 150px; margin: 0 auto 10px;">` : ''}
                <h3 style="font-weight: bold; color: #1e3a5f; margin-bottom: 5px;">${uni.name}</h3>
                <p style="color: #666; font-size: 14px; margin-bottom: 8px;">${uni.city}, ${uni.country}</p>
                ${uni.is_coordinator ? '<span style="background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">{% trans_text "Coordinateur" "Coordinator" "Koordinator" %}</span>' : ''}
                <div style="margin-top: 10px;">
                    <a href="${uni.url}" style="color: #1e3a5f; text-decoration: none; font-weight: 500;">{% trans_text "Voir le détail" "View details" "Details anzeigen" %} &rarr;</a>
                </div>
            </div>
        `;

        marker.bindPopup(popupContent);
        markers.push(marker);

        // Stocker le marqueur par ID
        universityMarkers[uni.id] = marker;
    });

    // Ajuster la vue pour inclure tous les marqueurs
    if (markers.length > 0) {
        const group = L.featureGroup(markers);
        mapInstance.fitBounds(group.getBounds().pad(0.1));
    }

    // Générer la liste des universités
    renderUniversityList(universities, settings);
}

function renderUniversityList(universities, settings) {
    const listContainer = document.getElementById('university-list');
    if (!listContainer) return;

    // Trier: coordinateur en premier, puis par nom
    const sortedUniversities = [...universities].sort((a, b) => {
        if (a.is_coordinator && !b.is_coordinator) return -1;
        if (!a.is_coordinator && b.is_coordinator) return 1;
        return a.name.localeCompare(b.name);
    });

    listContainer.innerHTML = sortedUniversities.map(uni => {
        const borderColor = uni.is_coordinator ? settings.coordinator_marker_color : settings.marker_color;
        return `
            <a href="${uni.url}"
               class="university-card flex items-center p-3 bg-gray-50 rounded-lg border-l-4 cursor-pointer"
               style="border-left-color: ${borderColor};"
               data-university-id="${uni.id}"
               onmouseenter="showUniversityPopup(${uni.id})"
               onmouseleave="hideUniversityPopup(${uni.id})">
                ${uni.logo_url
                    ? `<img src="${uni.logo_url}" alt="${uni.name}" class="w-12 h-12 object-contain mr-3 flex-shrink-0">`
                    : `<div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center mr-3 flex-shrink-0">
                         <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                         </svg>
                       </div>`
                }
                <div class="min-w-0 flex-1">
                    <h4 class="font-medium text-gray-900 text-sm truncate">${uni.name}</h4>
                    <p class="text-xs text-gray-500 truncate">${uni.city}, ${uni.country}</p>
                    ${uni.is_coordinator ? '<span class="inline-block mt-1 text-xs px-2 py-0.5 bg-amber-100 text-amber-700 rounded">{% trans_text "Coordinateur" "Coordinator" "Koordinator" %}</span>' : ''}
                </div>
            </a>
        `;
    }).join('');
}

function showUniversityPopup(universityId) {
    const marker = universityMarkers[universityId];
    if (marker && mapInstance) {
        marker.openPopup();
        // Optionnel: centrer la carte sur le marqueur
        // mapInstance.panTo(marker.getLatLng());
    }
}

function hideUniversityPopup(universityId) {
    const marker = universityMarkers[universityId];
    if (marker) {
        marker.closePopup();
    }
}
</script>
{% endif %}