// Configuration des critères d'emojis pour les marqueurs de carte
window.EMOJI_CRITERIA = {
    // Emoji mammouth pour les événements contenant "mammouth"
    mammoth: {
        emoji: '🦣',
        criteria: (name, description, what) => {
            const text = (name + ' ' + description).toLowerCase();
            return text.includes('mammouth');
        }
    },
    // Emoji notes de musique pour orchestres, concerts, fanfares ou types musicaux
    music: {
        emoji: '🎵',
        criteria: (name, description, what) => {
            const text = (name + ' ' + description + ' ' + what).toLowerCase();
            return text.includes('orchestr') || text.includes('concert') || 
                   text.includes('fanfare') || text.includes('music');
        }
    },
    // Emoji éclair pour les types contenant "power"
    power: {
        emoji: '⚡',
        criteria: (name, description, what) => {
            return (what || '').toLowerCase().includes('power');
        }
    },
    // Emoji vélo pour les types contenant "bike"
    bike: {
        emoji: '🚴',
        criteria: (name, description, what) => {
            return (what || '').toLowerCase().includes('bike');
        }
    },
    // Emoji casque de chantier pour les travaux
    construction: {
        emoji: '🏗️️',
        criteria: (name, description, what) => {
            const text = (name + ' ' + description + ' ' + what).toLowerCase();
            return text.includes('travaux');
        }
    },
    // Emoji soleil pour les types contenant "daylight"
    daylight: {
        emoji: '☀️',
        criteria: (name, description, what) => {
            return (what || '').toLowerCase().includes('daylight');
        }
    },
    // Emoji carte pour les types contenant "community.osm"
    osm_community: {
        emoji: '🗺️',
        criteria: (name, description, what) => {
            return (what || '').toLowerCase().includes('community.osm');
        }
    }
};

// Fonction pour déterminer l'emoji approprié pour un événement
function getEventEmoji(properties) {
    const name = properties.name || properties.label || '';
    const description = properties.description || '';
    const what = properties.what || '';


    if (what.includes('accident')) return 'PAF!';
    if (what.includes('incident')) return '⚠️';
    if (what.includes('traffic')) return '🚗';

    // Parcourir les critères dans l'ordre de priorité
    for (const [key, config] of Object.entries(window.EMOJI_CRITERIA)) {
        if (config.criteria(name, description, what)) {
            return config.emoji;
        }
    }

    // Emoji par défaut selon le type d'événement
    if (what.includes('weather')) return '🌤️';
    if (what.includes('gathering')) return '👥';

    return ' '; // Emoji par défaut
}

// Variables globales
let map;
let eventMarkers = [];
let eventTypeCounts = {};
let allEvents = [];

// Initialisation de la carte
document.addEventListener('DOMContentLoaded', function() {
    initMap();
    loadEvents();
});

function initMap() {
    // Initialiser la carte MapLibre
    map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: [2.3522, 48.8566], // Paris par défaut
        zoom: 4
    });

    // Ajouter les contrôles de navigation
    map.addControl(new maplibregl.NavigationControl());

    // Ajouter le contrôle de géolocalisation
    map.addControl(new maplibregl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        },
        trackUserLocation: true,
        showUserHeading: true
    }));
}

function loadEvents() {
    fetch('https://api.openeventdatabase.org/event?')
        .then(response => response.json())
        .then(data => {
            if (data.features && data.features.length > 0) {
                allEvents = data.features;
                processEvents();
                createEventTypeFilters();
                addEventsToMap();
                updateEventInfo();
            } else {
                document.getElementById('event-info').innerHTML = '<p>No events found</p>';
            }
        })
        .catch(error => {
            console.error('Error loading events:', error);
            document.getElementById('event-info').innerHTML = '<p>Error loading events</p>';
        });
}

function processEvents() {
    eventTypeCounts = {};
    allEvents.forEach(event => {
        const eventType = event.properties.what || 'unknown';
        eventTypeCounts[eventType] = (eventTypeCounts[eventType] || 0) + 1;
    });
}

function createEventTypeFilters() {
    const filterList = document.getElementById('filter-list');
    filterList.innerHTML = '';

    const sortedTypes = Object.keys(eventTypeCounts).sort();

    sortedTypes.forEach(eventType => {
        const count = eventTypeCounts[eventType];
        const li = document.createElement('li');

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = `filter-${eventType}`;
        checkbox.checked = true;
        checkbox.addEventListener('change', filterEvents);

        const label = document.createElement('label');
        label.htmlFor = `filter-${eventType}`;
        label.textContent = `${eventType} (${count})`;

        li.appendChild(checkbox);
        li.appendChild(label);
        filterList.appendChild(li);
    });

    // Boutons de sélection
    document.getElementById('select-all').addEventListener('click', () => {
        document.querySelectorAll('#filter-list input[type="checkbox"]').forEach(cb => {
            cb.checked = true;
        });
        filterEvents();
    });

    document.getElementById('deselect-all').addEventListener('click', () => {
        document.querySelectorAll('#filter-list input[type="checkbox"]').forEach(cb => {
            cb.checked = false;
        });
        filterEvents();
    });
}

function addEventsToMap() {
    // Supprimer les marqueurs existants
    eventMarkers.forEach(marker => marker.remove());
    eventMarkers = [];

    // Ajouter les nouveaux marqueurs avec emojis
    allEvents.forEach(event => {
        const coordinates = event.geometry.coordinates;
        const properties = event.properties;

        // Créer l'élément marqueur avec emoji et forme de goutte
        const el = document.createElement('div');
        el.className = 'custom-marker';

        // Créer la forme de goutte en arrière-plan avec emoji
        el.innerHTML = `
            <div class="marker-drop">
                <div class="marker-emoji">${getEventEmoji(properties)}</div>
            </div>
        `;

        // Créer le contenu de la popup
        const popupContent = createPopupContent(properties);

        // Créer la popup
        const popup = new maplibregl.Popup({
            closeButton: true,
            closeOnClick: true
        }).setHTML(popupContent);

        // Créer et ajouter le marqueur
        const marker = new maplibregl.Marker(el)
            .setLngLat(coordinates)
            .setPopup(popup)
            .addTo(map);

        eventMarkers.push({
            marker: marker,
            eventType: properties.what || 'unknown',
            element: el
        });
    });

    // Ajuster la vue pour inclure tous les événements
    if (allEvents.length > 0) {
        const bounds = new maplibregl.LngLatBounds();
        allEvents.forEach(event => {
            bounds.extend(event.geometry.coordinates);
        });
        map.fitBounds(bounds, { padding: 50, maxZoom: 12 });
    }
}

function createPopupContent(properties) {
    const title = properties.label || properties.name || 'Événement';
    const what = properties.what || 'Non spécifié';
    const description = properties.description || 'Aucune description disponible';
    const eventId = properties.id;

    return `
        <div class="event-popup">
            ${eventId ? 
                `<h3 style="margin-top: 0; color: #0078ff; cursor: pointer; text-decoration: underline;" onclick="window.location.href='/demo/edit/${eventId}'" title="Cliquer pour modifier l'événement">${title}</h3>` :
                `<h3 style="margin-top: 0; color: #0078ff;">${title}</h3>`
            }
            <p><strong>Type:</strong> ${what}</p>
            <p><strong>Description:</strong> ${description}</p>
            ${eventId ? 
                `<div style="margin-top: 10px;">
                    <a href="/demo/edit/${eventId}" style="color: #0078ff; font-weight: bold; margin-right: 10px;">✏️ Modifier</a>
                    <a href="/demo/by_id/${eventId}" style="color: #0078ff; font-weight: bold;">👁️ Détails</a>
                </div>` :
                `<p><small style="color: #666;">ID non disponible</small></p>`
            }
        </div>
    `;
}

function filterEvents() {
    const checkedTypes = Array.from(
        document.querySelectorAll('#filter-list input[type="checkbox"]:checked')
    ).map(cb => cb.id.replace('filter-', ''));

    eventMarkers.forEach(({ marker, eventType, element }) => {
        if (checkedTypes.includes(eventType)) {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    });

    updateEventInfo();
}

function updateEventInfo() {
    const checkedTypes = Array.from(
        document.querySelectorAll('#filter-list input[type="checkbox"]:checked')
    ).map(cb => cb.id.replace('filter-', ''));

    const visibleCount = checkedTypes.reduce((sum, type) => {
        return sum + (eventTypeCounts[type] || 0);
    }, 0);

    const totalCount = allEvents.length;

    document.getElementById('event-info').innerHTML = `
        <p>Showing ${visibleCount} of ${totalCount} events</p>
        <p>Event types: ${checkedTypes.length} selected</p>
    `;
}