<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>TransportMel - Horaires</title>
    <link rel="icon" type="image/x-icon" href="../../img/TMel.ico">
    <link rel="icon" type="image/png" href="../../img/TMel.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* Base styles */
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            overflow-y: auto; /* Assure que la barre de défilement est visible si nécessaire */
        }

        /* Basic animation for spinner */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Loading spinner */
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #d10246;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        /* Card styles */
        #passagesList > div {
            transition: all 0.2s ease;
            border-left: 4px solid #d10246;
        }

        #passagesList > div:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* Departure status styles */
        .depart-proche {
            color: #f59e0b;
            font-weight: 600;
            padding-left: 8px;
            border-left: 3px solid #f59e0b;
        }
        
        .depart-imminent {
            color: #d10246;
            font-weight: 700;
            padding-left: 8px;
            border-left: 3px solid #d10246;
        }

        /* Form elements styling */
        select, input[type="search"] {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            border-color: #d10246;
        }

        select:focus, input[type="search"]:focus {
            box-shadow: 0 0 0 3px rgba(209, 2, 70, 0.2);
            outline: none;
        }

        /* Main header styling */
        main section:first-child {
            border-top: 4px solid #d10246;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        main section:first-child:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* Gradient text for title */
        .text-red-600 {
            background: linear-gradient(90deg, #d10246, #f87171);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Simple hover effect for logo */
        nav img {
            transition: transform 0.2s ease;
        }

        nav img:hover {
            transform: scale(1.05);
        }

        /* Departure list items */
        .bg-gray-100 {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .bg-gray-100:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Stats styling */
        .mt-6.text-center div {
            display: inline-block;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            background-color: rgba(209, 2, 70, 0.08);
            border-radius: 0.5rem;
        }

        .mt-6.text-center span {
            font-weight: 600;
            color: #d10246;
        }

        /* Simple back to top button */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: #d10246;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.2s ease;
            opacity: 0;
            z-index: 999;
        }

        .back-to-top.visible {
            opacity: 0.8;
        }

        .back-to-top:hover {
            opacity: 1;
            transform: translateY(-3px);
        }

        /* Map container */
        #transit-map {
            border-radius: 0.5rem !important;
            border: 1px solid #e5e7eb !important;
        }

        #followVehicles, #showAllStops {
            background-color: #d10246;
            color: white;
            transition: opacity 0.2s ease;
        }

        #followVehicles:hover, #showAllStops:hover {
            opacity: 0.9;
        }

        /* Refresh icon */
        .refresh-icon {
            display: inline-block;
            animation: spin 2s linear infinite;
            animation-play-state: paused;
        }

        .refresh-icon.spinning {
            animation-play-state: running;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">
    <nav class="bg-white shadow fixed w-full z-10">
        <div class="max-w-6xl mx-auto py-4 px-6 flex justify-between items-center">
            <a href="../">
                <img src="../../img/TR_MEL.png" alt="Logo TransportMel" class="h-10">
            </a>
        </div>
    </nav>

    <div class="alert bg-red-100 text-red-700 p-4 rounded mt-16 mx-4 fixed w-auto z-50 hidden" id="alert">
        <span id="alert-icon"><i class="fas fa-exclamation-triangle"></i></span>
        <span id="alert-message">Message d'alerte par défaut.</span>
    </div>

    <main class="max-w-6xl mx-auto py-20 px-4">
        <section class="text-center bg-white shadow rounded-lg p-6 mb-6">
            <h1 class="text-3xl text-red-600 mb-4">Vos horaires en temps réel</h1>
            <p class="text-lg">Grrrr, on a tout fait, en mieux ! Découvre tes prochains passages des bus ⏬</p>
        </section>

        <div class="flex justify-between mb-4">
            <select id="transportType" aria-label="Type de transport" class="border border-red-500 rounded-md p-2">
                <option value="">Tous les transports</option>
                <option value="bus">Bus</option>
                <option value="tram">Tram</option>
                <option value="métro">Métro</option>
            </select>
            <select id="lineFilter" aria-label="Filtrer par ligne" class="border border-red-500 rounded-md p-2">
                <option value="">Toutes les lignes</option>
                <!-- Options de lignes seront ajoutées par JavaScript -->
            </select>
        </div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/622876ffa34c2456412a2fe3/1ird8i25j';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
        <div class="flex flex-col items-center mb-6">
            <input type="search" id="searchStation" placeholder="Rechercher une station..." aria-label="Rechercher une station" class="border border-red-500 rounded-full p-2 w-full max-w-md mb-2" />
            <div class="feedback-message text-blue-500 mt-2" id="feedbackMessage" role="alert">Chargement des horaires...</div>
            <div class="loading-spinner hidden" id="loadingSpinner"></div>
        </div>

        <section class="traffic-status">
            <div id="passagesList" role="list" class="grid grid-cols-1 gap-4"></div>
            <div class="status-container mt-6" id="serviceStatusContainer"></div>
        </section>

        <div class="mt-6 text-center">
            <h4 class="font-bold">Statistiques :</h4>
            <div>Départs imminents : <span id="imminentCount">0</span></div>
            <div>Départs à l'heure : <span id="onTimeCount">0</span></div>
            <div>Départs retardés : <span id="delayedCount">0</span></div>
        </div>
    </main>

    <!-- Bouton retour en haut -->
    <div class="back-to-top" id="backToTop">
        <i class="fas fa-arrow-up"></i>
    </div>

    <script>
    
        class TransitApp {
        
            constructor() {
                this.allPassages = [];
                this.allStops = [];
                this.API_PASSAGES_URL = 'https://data.lillemetropole.fr/data/ogcapi/collections/ilevia:prochains_passages/items?f=json&limit=-1';
                this.API_STOPS_URL = 'https://data.lillemetropole.fr/geoserver/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=dsp_ilevia%3Aphysical_stop&OUTPUTFORMAT=application%2Fjson';

                this.stats = {
                    imminent: 0,
                    onTime: 0,
                    delayed: 0
                };

                this.initializeElements();
                this.setupEventListeners();
                this.init();
                setInterval(() => this.refreshData(), 80000);
            }

            initializeElements() {
                this.elements = {
                    searchInput: document.getElementById('searchStation'),
                    passagesList: document.getElementById('passagesList'),
                    alertElement: document.getElementById('alert'),
                    feedbackMessage: document.getElementById('feedbackMessage'),
                    transportType: document.getElementById('transportType'),
                    lineFilter: document.getElementById('lineFilter'),
                    serviceStatusContainer: document.getElementById('serviceStatusContainer'),
                    loadingSpinner: document.getElementById('loadingSpinner'),
                    backToTop: document.getElementById('backToTop')
                };
            }

            setupEventListeners() {
                this.elements.searchInput.addEventListener('input', () => this.searchPassages());
                this.elements.transportType.addEventListener('change', () => this.filterPassages());
                this.elements.lineFilter.addEventListener('change', () => this.filterPassages());
                
                // Bouton retour en haut
                this.elements.backToTop.addEventListener('click', () => {
                    window.scrollTo({top: 0, behavior: 'smooth'});
                });
                
                // Afficher/masquer le bouton au scroll
                window.addEventListener('scroll', () => {
                    if (window.scrollY > 300) {
                        this.elements.backToTop.classList.add('visible');
                    } else {
                        this.elements.backToTop.classList.remove('visible');
                    }
                });
            }

            async fetchAPI(url) {
                try {
                    this.showLoading(true);
                    const response = await fetch(url);
                    if (!response.ok) throw new Error('Erreur réseau');
                    return await response.json();
                } catch (error) {
                    console.error('Erreur lors de la récupération des données :', error);
                    this.showAlert("Une erreur s'est produite lors de la récupération des données.");
                } finally {
                    this.showLoading(false);
                }
            }

            showLoading(isLoading) {
                this.elements.loadingSpinner.style.display = isLoading ? 'block' : 'none';
                this.elements.feedbackMessage.style.display = isLoading ? 'block' : 'none';
            }

            async getPassages() {
                const data = await this.fetchAPI(this.API_PASSAGES_URL);
                return data.records
                    .filter(record => !['ATSE', 'ATFA', 'ATWA', 'ASTU'].includes(record.code_ligne))
                    .map(record => ({
                        properties: {
                            code_ligne: record.code_ligne,
                            nom_station: record.nom_station,
                            heure_estimee_depart: record.heure_estimee_depart,
                            code_arret_physique: record.code_arret_physique,
                            sens_ligne: record.sens_ligne,
                            latitude: record.latitude,
                            longitude: record.longitude,
                            type_transport: record.type_transport || (record.code_ligne.startsWith('T') ? 'tram' : 'bus')
                        }
                    }));
            }

            async getStops() {
                const data = await this.fetchAPI(this.API_STOPS_URL);
                return data.features.map(feature => ({
                    properties: {
                        nom_court: feature.properties.nom_court,
                        code_arret_physique: feature.properties.code_arret_physique,
                        code_ligne: feature.properties.code_ligne,
                        latitude: feature.geometry.coordinates[1],
                        longitude: feature.geometry.coordinates[0],
                        code_postal: feature.properties.code_postal || '',
                        ville: feature.properties.ville || ''
                    }
                }));
            }

            async init() {
                this.allPassages = await this.getPassages();
                this.allStops = await this.getStops();

                const stopsMap = new Map(this.allStops.map(stop => [stop.properties.code_arret_physique, stop]));

                this.allPassages = this.allPassages.map(passage => {
                    const stop = stopsMap.get(passage.properties.code_arret_physique);
                    return {
                        ...passage,
                        properties: {
                            ...passage.properties,
                            ...stop ? {
                                nom_court: stop.properties.nom_court,
                                code_postal: stop.properties.code_postal,
                                ville: stop.properties.ville
                            } : {}
                        }
                    };
                });

                this.populateLineFilter();
                this.displayGroupedPassages(this.allPassages);
                await this.getServiceStatus();
            }

            refreshData() {
                // Activer l'animation de tous les icônes de rafraîchissement
                document.querySelectorAll('.refresh-icon').forEach(icon => {
                    icon.classList.add('spinning');
                });
                
                // Réinitialiser l'animation après la mise à jour
                setTimeout(() => {
                    this.init().then(() => {
                        document.querySelectorAll('.refresh-icon').forEach(icon => {
                            icon.classList.remove('spinning');
                        });
                    });
                }, 500);
            }

            populateLineFilter() {
                const uniqueLines = new Set(this.allPassages.map(p => p.properties.code_ligne));
                this.elements.lineFilter.innerHTML += Array.from(uniqueLines).map(line => `<option value="${line}">${line}</option>`).join('');
            }

            async fetchServiceStatus() {
                // Implémenter la fonction pour récupérer les statuts de service si nécessaire.
            }

            displayServiceStatus(statuses) {
                this.elements.serviceStatusContainer.innerHTML = ''; 
                statuses.forEach(status => {
                    const statusElement = document.createElement('div');
                    statusElement.className = 'bg-blue-100 border border-blue-400 rounded-lg p-2';
                    statusElement.textContent = `${status.line} - ${status.message}`;
                    if (status.level === 'alert') {
                        statusElement.classList.add('text-red-600'); 
                    }
                    this.elements.serviceStatusContainer.appendChild(statusElement);
                });
            }

            calculateDistance(lat1, lon1, lat2, lon2) {
                const R = 6371; 
                const dLat = this.degreesToRadians(lat2 - lat1);
                const dLon = this.degreesToRadians(lon2 - lon1);
                const a =
                    Math.sin(dLat / 2) ** 2 +
                    Math.cos(this.degreesToRadians(lat1)) * Math.cos(this.degreesToRadians(lat2)) *
                    Math.sin(dLon / 2) ** 2;
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                return R * c; 
            }

            degreesToRadians(degrees) {
                return degrees * (Math.PI / 180);
            }

            formatTime(date) {
                const adjustedDate = new Date(new Date(date).getTime() - 7200000); 
                const options = { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Paris' };
                return adjustedDate.toLocaleTimeString('fr-FR', options);
            }

            calculateWaitTime(departureTime) {
                const now = new Date(); 
                const departureDate = new Date(departureTime);
                departureDate.setHours(departureDate.getHours() - 2); 

                const waitTimeInMinutes = Math.floor((departureDate - now) / 1000 / 60);
                return waitTimeInMinutes === 0 ? -2 : (waitTimeInMinutes < 0 ? -1 : waitTimeInMinutes);
            }

            evaluatePassage(passage) {
                const waitTime = this.calculateWaitTime(passage.properties.heure_estimee_depart);
                if (waitTime === -2) {
                    this.stats.delayed++;
                    return 'already-passed'; 
                } else if (waitTime === -1) {
                    this.stats.imminent++;
                    return 'imminent'; 
                } else {
                    this.stats.onTime++;
                    return 'on-time';
                }
            }

            searchPassages() {
                const query = this.elements.searchInput.value.toLowerCase();
                const filtered = this.allPassages.filter(passage =>
                    passage.properties.nom_station.toLowerCase().includes(query) ||
                    passage.properties.code_ligne.toLowerCase().includes(query)
                );
                this.displayGroupedPassages(filtered);
            }

            filterPassages() {
                const transportType = this.elements.transportType.value;
                const lineCode = this.elements.lineFilter.value;

                const filtered = this.allPassages.filter(passage => {
                    const matchesTransport = transportType ? passage.properties.type_transport === transportType : true;
                    const matchesLine = lineCode ? passage.properties.code_ligne === lineCode : true;
                    return matchesTransport && matchesLine;
                });
                this.displayGroupedPassages(filtered);
            }

            displayGroupedPassages(passages) {
                if (!Array.isArray(passages) || passages.length === 0) {
                    this.elements.passagesList.innerHTML = '<p class="text-center p-4 bg-white shadow rounded-lg">Aucun passage à afficher.</p>';
                    return;
                }

                const grouped = passages.reduce((acc, passage) => {
                    const station = passage.properties.nom_station;
                    const horaireDepart = passage.properties.heure_estimee_depart;
                    const destination = passage.properties.sens_ligne || 'Inconnu';
                    const indice = passage.properties.code_ligne;

                    if (!acc.has(station)) {
                        acc.set(station, { horaires: {}, lignes: new Set() });
                    }

                    const stationData = acc.get(station);
                    stationData.lignes.add(indice);
                    
                    if (!stationData.horaires[indice]) {
                        stationData.horaires[indice] = [];
                    }

                    stationData.horaires[indice].push({ heure: horaireDepart, destination });

                    return acc;
                }, new Map());

                this.elements.passagesList.innerHTML = '';

                // Animation séquentielle des cartes
                let index = 0;
                grouped.forEach((value, station) => {
                    const passageCard = this.createPassageCard(station, value);
                    passageCard.style.animationDelay = `${index * 0.1}s`;
                    this.elements.passagesList.appendChild(passageCard);
                    index++;
                });

                this.updateStatsDisplay();
            }
                        
            populateNextDepartures(container, horaires) {
                const departuresGrouping = {};
            
                // Regroupement par ligne et destination
                for (const [line, departures] of Object.entries(horaires)) {
                    departures.forEach(({ heure, destination }) => {
                        const waitTime = this.calculateWaitTime(heure);
                        const nextDeparture = this.formatTime(heure);
                        const passageClass = this.evaluatePassage({ properties: { heure_estimee_depart: heure } });
            
                        const key = `${line}-${destination}`; // Clé unique pour le regroupement
            
                        // Initialiser le regroupement si ce n'est pas déjà fait
                        if (!departuresGrouping[key]) {
                            departuresGrouping[key] = [];
                        }
            
                        departuresGrouping[key].push({ nextDeparture, waitTime, passageClass });
                    });
                }
            
                const displayedCount = Math.min(Object.keys(departuresGrouping).length, 50); // Limite à 50 groupes
                let count = 0;
            
                for (const groupKey of Object.keys(departuresGrouping)) {
                    if (count >= displayedCount) break; // Limite atteinte
            
                    const groupInfo = departuresGrouping[groupKey];
            
                    // Déterminer la classe de couleur selon le temps d'attente
                    let mainDepartureClass = '';
                    if (groupInfo[0].waitTime <= 1) { // Départ imminent (dans 5 minutes)
                        mainDepartureClass = 'depart-imminent'; // Rouge
                    } else if (groupInfo[0].waitTime <= 5) { // Départ proche (entre 6 et 15 minutes)
                        mainDepartureClass = 'depart-proche'; // Orange
                    }
            
                    // Création d'un élément déroulant pour afficher ou masquer les détails
                    const groupElement = document.createElement('div');
                    groupElement.className = `bg-gray-100 border border-gray-300 rounded-md p-2 my-1 ${mainDepartureClass}`;
            
                    // Création de l'icône pour indiquer plusieurs départs
                    const multipleDeparturesIcon = groupInfo.length > 1 
                        ? `<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-2 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                           </svg>` 
                        : '';
            
                    // Affichage de la ligne et de la destination
                    groupElement.innerHTML = `
    <span class="flex items-center cursor-pointer">
        <img src="../../img/${this.escapeHTML(groupKey.split('-')[0])}.svg" 
             alt="Ligne ${this.escapeHTML(groupKey.split('-')[0])}" 
             class="w-6 h-auto mr-2"
             onerror="this.onerror=null; this.src='https://transportmel.fr/img/B.png';">
        <b class="text-black">${this.escapeHTML(groupKey.split('-')[1])}</b>
        <span class="ml-auto font-bold">${groupInfo[0].nextDeparture} (${this.getWaitTimeText(groupInfo[0].waitTime)})</span>
        ${multipleDeparturesIcon}
    </span>
                        <div class="additional-departures hidden mt-2 pl-8">
                            ${groupInfo.slice(1).map(dep => `
                                <div class="flex justify-between">
                                    <span>${dep.nextDeparture} (${this.getWaitTimeText(dep.waitTime)})</span>
                                </div>
                            `).join('')}
                            ${groupInfo.length > 1 ? `<span class="text-sm text-gray-600">+ ${groupInfo.length - 1} autre(s) départ(s) similaire(s)</span>` : ''}
                        </div>
                    `;
            
                    // Ajout de l'événement de clic pour afficher/masquer
                    if (groupInfo.length > 1) {
                        groupElement.querySelector('.flex.items-center').addEventListener('click', () => {
                            const additionalDepartures = groupElement.querySelector('.additional-departures');
                            additionalDepartures.classList.toggle('hidden');
                        });
                    }
            
                    container.appendChild(groupElement);
                    count++;
                }
            }
            createPassageCard(station, data) {
                const passageCard = document.createElement('div');
                passageCard.className = 'bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition duration-300 ease-in-out border-l-4 border-red-500';
            
                const linesArray = Array.from(data.lignes).map(line => `<span class="font-medium text-red-600">${this.escapeHTML(line)}</span>`).join(', ');
            
                passageCard.innerHTML = `
                    <div class="passage-details mb-4">
                        <h3 class="font-bold text-xl text-gray-800 flex items-center">
                            <img src="../../img/B.png" class="w-8 h-auto mr-2" alt="Icone ligne"> 
                            <span class="text-red-600">➥ ${this.escapeHTML(station)}</span>
                            <span class="line-indices text-md text-gray-500 ml-2">(${linesArray})</span>
                        </h3>
                    </div>
                    <div class="next-departures">
                        <h4 class="font-semibold text-lg text-gray-800 border-b pb-2 mb-2">Prochains départs</h4>
                        <div class="wait-time-container grid grid-cols-1 gap-2"></div>
                    </div>
                    <div class="text-center mt-4 text-sm text-gray-500">
                        <i class="fas fa-sync-alt refresh-icon mr-2"></i>
                        Informations mises à jour en temps réel
                    </div>
                `;
            
                const nextDeparturesElement = passageCard.querySelector('.wait-time-container');
                this.populateNextDepartures(nextDeparturesElement, data.horaires);
            
                return passageCard;
            }
            
            getWaitTimeText(waitTime) {
                if (waitTime === -2) return "Départ déjà réalisé";
                if (waitTime === -1) return "Départ proche";
                return `Dans : ${waitTime} min`;
            }

            escapeHTML(str) {
                const div = document.createElement('div');
                div.textContent = str;
                return div.innerHTML;
            }

            updateStatsDisplay() {
                document.getElementById('imminentCount').innerText = this.stats.imminent;
                document.getElementById('onTimeCount').innerText = this.stats.onTime;
                document.getElementById('delayedCount').innerText = this.stats.delayed;
            }

            showAlert(message) {
                this.elements.alertElement.style.display = 'block';
                this.elements.alertElement.textContent = message;
                setTimeout(() => {
                    this.elements.alertElement.style.display = 'none';
                }, 5000);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const app = new TransitApp();
        });
        
        
class TransitMap {
    constructor(app) {
        this.app = app;
        this.map = null;
        this.markers = new Map();
        this.vehicleMarkers = new Map();
        this.routes = new Map();
        this.selectedLine = null;
        
        // Ajout de la référence au script Leaflet dans la page
        this.loadLeafletScript();
    }
    
    loadLeafletScript() {
        // Vérifier si Leaflet est déjà chargé
        if (window.L) {
            this.initializeMap();
            return;
        }
        
        // Charger le CSS de Leaflet
        const leafletCSS = document.createElement('link');
        leafletCSS.rel = 'stylesheet';
        leafletCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css';
        document.head.appendChild(leafletCSS);
        
        // Charger le JS de Leaflet
        const leafletScript = document.createElement('script');
        leafletScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js';
        leafletScript.onload = () => this.initializeMap();
        document.head.appendChild(leafletScript);
    }
    
    initializeMap() {
        // Créer le conteneur de la carte s'il n'existe pas
        if (!document.getElementById('transit-map')) {
            const mapContainer = document.createElement('div');
            mapContainer.id = 'transit-map';
            mapContainer.style.height = '300px';
            mapContainer.style.marginBottom = '20px';
            mapContainer.style.borderRadius = '8px';
            mapContainer.style.border = '2px solid #d10246';
            
            // Insérer avant la liste des passages
            const passagesList = document.getElementById('passagesList');
            passagesList.parentNode.insertBefore(mapContainer, passagesList);
            
            // Ajouter les contrôles de la carte
            const mapControls = document.createElement('div');
            mapControls.className = 'flex justify-between items-center mb-2 bg-white p-2 rounded-md shadow';
            mapControls.innerHTML = `
                <div>
                    <button id="followVehicles" class="px-3 py-1 bg-red-500 text-white rounded mr-2">
                        <i class="fas fa-bus"></i> Suivre les véhicules
                    </button>
                    <button id="showAllStops" class="px-3 py-1 bg-blue-500 text-white rounded">
                        <i class="fas fa-map-marker-alt"></i> Tous les arrêts
                    </button>
                </div>
                <div>
                    <select id="lineSelector" class="border border-gray-300 rounded p-1">
                        <option value="">Sélectionner une ligne</option>
                    </select>
                </div>
            `;
            mapContainer.parentNode.insertBefore(mapControls, mapContainer);
            
            // Initialiser les gestionnaires d'événements
            setTimeout(() => {
                document.getElementById('followVehicles').addEventListener('click', () => this.toggleVehicleTracking());
                document.getElementById('showAllStops').addEventListener('click', () => this.showAllStops());
                document.getElementById('lineSelector').addEventListener('change', (e) => this.selectLine(e.target.value));
                this.populateLineSelector();
            }, 100);
        }
        
        // Initialiser la carte avec le centre sur Lille
        this.map = L.map('transit-map').setView([50.6311, 3.0575], 12);
        
        // Ajouter la couche OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
        
        // Initialiser les données
        this.loadMapData();
        
        // Démarrer la mise à jour périodique des positions des véhicules
        setInterval(() => this.updateVehiclePositions(), 30000);
    }
    
    populateLineSelector() {
        const lineSelector = document.getElementById('lineSelector');
        const uniqueLines = new Set(this.app.allPassages.map(p => p.properties.code_ligne));
        
        uniqueLines.forEach(line => {
            const option = document.createElement('option');
            option.value = line;
            option.textContent = line;
            lineSelector.appendChild(option);
        });
    }
    
    loadMapData() {
        // Afficher tous les arrêts disponibles
        this.showAllStops();
    }
    
    showAllStops() {
        // Effacer les marqueurs existants
        this.clearMarkers();
        
        // Regrouper les arrêts pour éviter les doublons
        const uniqueStops = new Map();
        
        this.app.allStops.forEach(stop => {
            const props = stop.properties;
            const key = `${props.nom_court}-${props.latitude}-${props.longitude}`;
            
            if (!uniqueStops.has(key) && props.latitude && props.longitude) {
                uniqueStops.set(key, {
                    nom: props.nom_court,
                    lat: props.latitude,
                    lng: props.longitude,
                    lignes: new Set([props.code_ligne].filter(Boolean))
                });
            } else if (uniqueStops.has(key) && props.code_ligne) {
                uniqueStops.get(key).lignes.add(props.code_ligne);
            }
        });
        
        // Ajouter les marqueurs pour chaque arrêt unique
        uniqueStops.forEach((stop, key) => {
            const lignesStr = Array.from(stop.lignes).join(', ');
            
            const marker = L.marker([stop.lat, stop.lng]).addTo(this.map);
            marker.bindPopup(`<b>${stop.nom}</b><br>Lignes: ${lignesStr}`);
            
            this.markers.set(key, marker);
        });
        
        // Ajuster la vue pour montrer tous les arrêts
        if (this.markers.size > 0) {
            const bounds = [];
            this.markers.forEach(marker => {
                bounds.push(marker.getLatLng());
            });
            this.map.fitBounds(L.latLngBounds(bounds), { padding: [50, 50] });
        }
    }
    
    selectLine(lineCode) {
        if (!lineCode) {
            this.showAllStops();
            this.selectedLine = null;
            return;
        }
        
        this.selectedLine = lineCode;
        this.clearMarkers();
        
        // Filtrer les arrêts pour cette ligne
        const lineStops = this.app.allStops.filter(stop => stop.properties.code_ligne === lineCode);
        
        if (lineStops.length === 0) {
            alert(`Aucun arrêt trouvé pour la ligne ${lineCode}`);
            return;
        }
        
        // Créer un tableau pour stocker les coordonnées dans l'ordre
        const routeCoordinates = [];
        const stopCoordinates = new Map();
        
        // Ajouter les marqueurs pour les arrêts de cette ligne
        lineStops.forEach(stop => {
            const props = stop.properties;
            if (!props.latitude || !props.longitude) return;
            
            const key = `${props.nom_court}-${props.latitude}-${props.longitude}`;
            
            const marker = L.marker([props.latitude, props.longitude]).addTo(this.map);
            marker.bindPopup(`<b>${props.nom_court}</b><br>Ligne: ${lineCode}`);
            
            this.markers.set(key, marker);
            
            // Stocker les coordonnées pour le tracé de ligne
            stopCoordinates.set(props.nom_court, [props.latitude, props.longitude]);
        });
        
        // Dessiner la ligne entre les arrêts (simplification - en réalité il faudrait connaître l'ordre exact)
        // Pour une implémentation réelle, il faudrait obtenir le tracé exact des lignes depuis une API
        
        // Version simplifiée - tracer une ligne directe entre les arrêts
        const coordinates = Array.from(stopCoordinates.values());
        if (coordinates.length > 1) {
            const polyline = L.polyline(coordinates, {
                color: this.getLineColor(lineCode),
                weight: 4,
                opacity: 0.7
            }).addTo(this.map);
            
            this.routes.set(lineCode, polyline);
        }
        
        // Ajuster la vue pour montrer tous les arrêts de cette ligne
        if (this.markers.size > 0) {
            const bounds = [];
            this.markers.forEach(marker => {
                bounds.push(marker.getLatLng());
            });
            this.map.fitBounds(L.latLngBounds(bounds), { padding: [50, 50] });
        }
        
        // Simuler la position des véhicules sur cette ligne
        this.simulateVehiclePositions(lineCode, coordinates);
    }
    
    getLineColor(lineCode) {
        // Associer des couleurs cohérentes aux lignes
        const colorMap = {
            'L1': '#D50000',
            'L2': '#FFD600',
            'R': '#0D47A1',
            'T': '#33691E',
            'C': '#6200EA',
            'Z': '#F57F17'
        };
        
        // Déterminer la couleur en fonction du premier caractère du code de ligne
        const prefix = lineCode.charAt(0);
        return colorMap[prefix] || '#3388ff';
    }
    
    simulateVehiclePositions(lineCode, coordinates) {
        // Nettoyer les marqueurs de véhicules existants
        this.clearVehicleMarkers();
        
        if (!coordinates || coordinates.length < 2) return;
        
        // Créer quelques véhicules simulés le long du parcours
        const numVehicles = Math.min(3, Math.floor(coordinates.length / 2));
        
        for (let i = 0; i < numVehicles; i++) {
            // Positionner le véhicule à différents points du parcours
            const position = Math.floor((coordinates.length - 1) * (i / numVehicles));
            const vehiclePosition = coordinates[position];
            
            // Créer une icône de bus/tram personnalisée
            const vehicleIcon = L.divIcon({
                html: `<div style="background-color: ${this.getLineColor(lineCode)}; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; font-weight: bold;">${lineCode}</div>`,
                className: 'vehicle-marker',
                iconSize: [24, 24]
            });
            
            // Ajouter le marqueur du véhicule
            const marker = L.marker(vehiclePosition, { icon: vehicleIcon }).addTo(this.map);
            marker.bindPopup(`<b>Ligne ${lineCode}</b><br>En direction de: ${this.getDirectionForLine(lineCode)}`);
            
            this.vehicleMarkers.set(`${lineCode}-${i}`, {
                marker: marker,
                lineCode: lineCode,
                position: position,
                coordinates: coordinates,
                direction: 1, // 1 = avant, -1 = arrière
                speed: 0.05 + (Math.random() * 0.1) // Vitesse aléatoire pour la simulation
            });
        }
    }
    
    getDirectionForLine(lineCode) {
        // Récupérer une destination pour cette ligne à partir des données de passage
        const linePassages = this.app.allPassages.filter(p => p.properties.code_ligne === lineCode);
        if (linePassages.length > 0 && linePassages[0].properties.sens_ligne) {
            return linePassages[0].properties.sens_ligne;
        }
        return "Terminus";
    }
    
    updateVehiclePositions() {
        if (!this.selectedLine) return;
        
        this.vehicleMarkers.forEach((vehicle, key) => {
            // Mettre à jour la position du véhicule
            vehicle.position += vehicle.speed * vehicle.direction;
            
            // Changer de direction si on atteint les extrémités
            if (vehicle.position >= vehicle.coordinates.length - 1) {
                vehicle.direction = -1;
                vehicle.position = vehicle.coordinates.length - 1;
            } else if (vehicle.position <= 0) {
                vehicle.direction = 1;
                vehicle.position = 0;
            }
            
            // Calculer la nouvelle position
            const index = Math.floor(vehicle.position);
            const remainder = vehicle.position - index;
            
            let newPos;
            if (index < vehicle.coordinates.length - 1) {
                // Interpolation linéaire entre deux points
                const p1 = vehicle.coordinates[index];
                const p2 = vehicle.coordinates[index + 1];
                newPos = [
                    p1[0] + (p2[0] - p1[0]) * remainder,
                    p1[1] + (p2[1] - p1[1]) * remainder
                ];
            } else {
                newPos = vehicle.coordinates[index];
            }
            
            // Mettre à jour la position du marqueur
            vehicle.marker.setLatLng(newPos);
        });
    }
    
    toggleVehicleTracking() {
        const button = document.getElementById('followVehicles');
        const isTracking = button.classList.contains('bg-green-500');
        
        if (isTracking) {
            // Arrêter le suivi
            button.classList.replace('bg-green-500', 'bg-red-500');
            this.clearVehicleMarkers();
        } else {
            // Activer le suivi
            button.classList.replace('bg-red-500', 'bg-green-500');
            
            // Si une ligne est sélectionnée, simuler ses véhicules
            if (this.selectedLine) {
                const lineStops = this.app.allStops.filter(stop => stop.properties.code_ligne === this.selectedLine);
                const coordinates = lineStops
                    .filter(stop => stop.properties.latitude && stop.properties.longitude)
                    .map(stop => [stop.properties.latitude, stop.properties.longitude]);
                
                this.simulateVehiclePositions(this.selectedLine, coordinates);
            } else {
                // Sinon demander à l'utilisateur de sélectionner une ligne
                alert('Veuillez d\'abord sélectionner une ligne pour suivre les véhicules.');
                button.classList.replace('bg-green-500', 'bg-red-500');
            }
        }
    }
    
    clearMarkers() {
        // Supprimer tous les marqueurs d'arrêts
        this.markers.forEach(marker => {
            this.map.removeLayer(marker);
        });
        this.markers.clear();
        
        // Supprimer tous les tracés de ligne
        this.routes.forEach(route => {
            this.map.removeLayer(route);
        });
        this.routes.clear();
    }
    
    clearVehicleMarkers() {
        // Supprimer tous les marqueurs de véhicules
        this.vehicleMarkers.forEach(vehicle => {
            this.map.removeLayer(vehicle.marker);
        });
        this.vehicleMarkers.clear();
    }
}
    </script>
</body>
</html>