{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
    <!-- MapLibre GL -->
    <link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">

    <style>
        .badge {
            font-size: 0.75rem;
        }

        .card-title {
            font-size: 1rem;
        }

        .form-select, .form-control {
            font-size: 0.9rem;
        }

        /* Boutons de filtre statuts : même largeur et centrage du texte */
        #statusFilterPanel .btn-outline-primary {
            width: 110px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }

        /* === CARTE === */
        #map-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 2000;
            background: #fff;
        }
        #map-overlay.active {
            display: block;
        }
        #intervention-map {
            width: 100%;
            height: 100%;
        }
        #map-close-btn {
            position: absolute;
            top: 0.6rem; right: 0.6rem;
            z-index: 2100;
        }
        /* FAB bouton carte : au-dessus du footer */
        #map-fab-btn {
            position: fixed;
            bottom: 4.5rem;
            right: 1rem;
            z-index: 1050;
            border-radius: 50%;
            width: 3.25rem;
            height: 3.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            padding: 0;
        }
        .maplibregl-popup-content a {
            color: #0d6efd;
            font-weight: 600;
            text-decoration: none;
        }
        .maplibregl-popup-content a:hover {
            text-decoration: underline;
        }
        .maplibregl-popup-content {
            font-size: 0.88rem;
            padding: 10px 12px;
            max-width: 300px;
        }
        .maplibregl-popup-close-button {
            font-size: 1.1rem;
            padding: 2px 6px;
        }
        /* Boutons de la toolbar carte plus grands (mobile-friendly) */
        #map-overlay .maplibregl-ctrl-group button {
            width: 42px;
            height: 42px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        #map-overlay .maplibregl-ctrl-group button span {
            display: block;
            width: 32px;
            height: 32px;
            background-size: 32px 32px;
            background-position: center;
            background-repeat: no-repeat;
            flex-shrink: 0;
        }
    </style>

{% endblock extra_head %}

{% block title %}
    {% translate "Interventions" %}
{% endblock title %}


{% block content %}

    <!-- Messages -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show mt-2" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Filtres -->
    <form method="get" class="d-flex flex-column gap-2 mb-3" data-no-overlay>
        {% if not hide_filters or can_add_structures_repair or can_add_intervention_mobile %}
        <div class="d-flex justify-content-between align-items-center mb-2">
            {% if not hide_filters %}
            <div class="form-check m-0">
                <input
                    type="checkbox"
                    class="form-check-input"
                    name="mine"
                    id="filter-mine"
                    value="1"
                    {% if show_mine_only %}checked{% endif %}
                    data-autosubmit
                >
                <label class="form-check-label" for="filter-mine">
                    <i class="bi bi-person"></i> {% translate "Mes interventions" %}
                </label>
            </div>
            {% endif %}
            <div class="d-flex align-items-center gap-2{% if hide_filters %} ms-auto{% endif %}">
                {% if can_add_structures_repair %}
                <a href="{% url 'mobile:add_repair_intervention_mobile' %}"
                   class="btn btn-primary btn-sm"
                   title="{% translate 'Ajouter une intervention de réparation' %}">
                    <i class="bi bi-plus-lg"></i>
                </a>
                {% endif %}
                {% if can_add_intervention_mobile %}
                <a href="{% url 'mobile:choose_maintain_type_for_intervention_mobile' %}"
                   class="btn btn-primary btn-sm"
                   title="{% translate 'Ajouter une intervention' %}">
                    <i class="bi bi-plus-lg"></i>
                </a>
                {% endif %}
                {% if status_filters and not hide_filters %}
                <button id="toggle-status-filter"
                        class="btn btn-outline-secondary btn-sm"
                        type="button"
                        aria-expanded="false"
                        aria-controls="statusFilterPanel"
                        title="{% translate 'Filtrer par statut' %}">
                    <i class="bi bi-funnel"></i>
                    <span id="statusCountBadge" class="badge text-bg-primary ms-1 d-none">0</span>
                </button>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% if status_filters and not hide_filters %}
        <div id="statusFilterPanel" class="collapse mt-2">
            <p class="mb-1 fw-semibold small text-uppercase text-muted">{% translate "Statuts" %}</p>
            <div class="d-flex flex-wrap gap-2">
                {% for status in status_filters %}
                {% with field_id="status-filter-"|add:status.key %}
                <input
                    type="checkbox"
                    class="btn-check"
                    name="status"
                    id="{{ field_id }}"
                    value="{{ status.key }}"
                    {% if status.checked %}checked{% endif %}
                    data-status-filter
                    autocomplete="off"
                >
                <label class="btn btn-outline-primary btn-sm" for="{{ field_id }}">{{ status.label }}</label>
                {% endwith %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Champ de recherche -->
        <div class="input-group">
            <button type="button" class="btn btn-outline-secondary" id="clearSearch" title="{% translate 'Effacer' %}" aria-label="{% translate 'Effacer la recherche' %}">
                <i class="bi bi-x"></i>
            </button>

            <input
                type="text"
                name="q"
                id="searchInput"
                class="form-control"
                value="{{ request.GET.q|default:'' }}"
                placeholder="{% translate 'Code ou titre' %}"
                autocomplete="off"
                enterkeyhint="search"
                aria-label="{% translate 'Rechercher par code ou titre' %}"
            >

            <button type="submit" class="btn btn-primary" id="submitSearch" title="{% translate 'Rechercher' %}" aria-label="{% translate 'Rechercher' %}">
                <i class="bi bi-search"></i>
            </button>
        </div>
        <input type="hidden" name="sort" id="sort-hidden" value="{{ current_sort|default:'' }}">
        {% if not hide_filters %}
        <input type="hidden" name="maintain_type" id="maintain-type-hidden" value="{{ selected_maintain_type|default:'' }}">
        {% endif %}
    </form>

    {% if show_maintain_type_tabs %}
    <!-- Onglets par type de maintenance -->
    <div class="btn-group w-100 mb-2" role="group" aria-label="{% translate 'Type de maintenance' %}" id="maintainTypeTabs">
        {% if 'corrective' in allowed_maintain_types %}
        <button type="button" class="btn btn-outline-danger maintain-type-btn {% if selected_maintain_type == 'corrective' %}active{% endif %}" data-maintain-type="corrective">
            {% translate "Corr" %}
            <span class="badge bg-danger ms-1" id="badge-corrective">{{ maintain_type_counts.corrective }}</span>
        </button>
        {% endif %}
        {% if 'preventive' in allowed_maintain_types %}
        <button type="button" class="btn btn-outline-warning maintain-type-btn {% if selected_maintain_type == 'preventive' %}active{% endif %}" data-maintain-type="preventive">
            {% translate "Prév" %}
            <span class="badge bg-warning text-dark ms-1" id="badge-preventive">{{ maintain_type_counts.preventive }}</span>
        </button>
        {% endif %}
        {% if 'ameliorative' in allowed_maintain_types %}
        <button type="button" class="btn btn-outline-success maintain-type-btn {% if selected_maintain_type == 'ameliorative' %}active{% endif %}" data-maintain-type="ameliorative">
            {% translate "Amél" %}
            <span class="badge bg-success ms-1" id="badge-ameliorative">{{ maintain_type_counts.ameliorative }}</span>
        </button>
        {% endif %}
    </div>
    {% endif %}

    <!-- Liste des interventions -->
    <div id="interventions-list">
        {% include 'interventions/_interventions_list_mobile.html' %}
    </div>

    <!-- Bouton flottant carte -->
    <button id="map-fab-btn" class="btn btn-primary" title="{% translate 'Voir la carte' %}" aria-label="{% translate 'Voir la carte' %}">
        <i class="bi bi-map fs-5"></i>
    </button>

    <!-- Overlay pleine page : carte -->
    <div id="map-overlay" role="dialog" aria-modal="true" aria-label="{% translate 'Carte des interventions' %}">
        <button id="map-close-btn" class="btn btn-primary shadow-sm" aria-label="{% translate 'Fermer la carte' %}">
            <i class="bi bi-x-lg"></i>
        </button>
        <div id="intervention-map"></div>
    </div>

    <!-- Modal GPS -->
    {% include "interventions/includes/_gps_navigation_modal.html" %}
{% endblock content %}

{% block extra_scripts %}
    <script src="{% static 'interventions/mobile/gps_navigation.js' %}"></script>
    <script>
        /* =========================
        1) SUBMIT AJAX + PERSISTANCE DES PARAMS (dont 'sort')
        ========================= */
        (function () {
            const form = document.querySelector('form[method="get"]');
            if (!form) return;

            const input = document.getElementById('searchInput');
            const clearBtn = document.getElementById('clearSearch');
            const submitButton = document.getElementById('submitSearch');
            const listContainer = document.getElementById('interventions-list');
            const autoSubmitTargets = form.querySelectorAll('[data-autosubmit]');
            
            function getSortHidden() { return document.getElementById('sort-hidden'); }
            function getSortSelect() { return listContainer?.querySelector('#sort-select') || null; }
            function currentSortValue() {
                return (getSortHidden()?.value || getSortSelect()?.value || '').trim();
            }


            // Délégation d’événement (sur document) pour capter les <select> recréés
            document.addEventListener('change', (e) => {
                const t = e.target;
                if (t && t.matches('#sort-select')) {
                const val = (t.value || '').trim();
                const sortHidden = getSortHidden();
                if (sortHidden) sortHidden.value = val;
                // Optionnel: persister dans l’URL pour garder l’état (back/refresh)
                updateUrlParam('sort', val);
                submitForm(false); // AJAX
                }
            });

            function updateUrlParam(key, val) {
                const u = new URL(window.location.href);
                if (val) u.searchParams.set(key, val);
                else u.searchParams.delete(key);
                history.replaceState(null, '', u.toString());
            }

            (function initSortFromUrl() {
                const u = new URL(window.location.href);
                const initial = (u.searchParams.get('sort') || '').trim();
                const sortHidden = getSortHidden();
                if (sortHidden) sortHidden.value = initial;
                const select = getSortSelect();
                if (select && initial) select.value = initial;
            })();

        
            let typingTimer = null;
            let requestCounter = 0;
            let inflightRequests = 0;
            const DELAY = 400; // ms

            async function submitForm(preserveFocus) {
                const requestId = ++requestCounter;
                inflightRequests += 1;
                setRefreshLoading(true);

                const sortHidden = getSortHidden();
                const liveSel = getSortSelect();
                if (liveSel) sortHidden.value = (liveSel.value || '').trim();

                const formData = new FormData(form);
                const params = new URLSearchParams();
                for (const [key, value] of formData.entries()) {
                    if (value !== '') params.append(key, value);
                }

                const sortVal = currentSortValue();
                if (sortVal) params.set('sort', sortVal); else params.delete('sort');

                const queryString = params.toString();
                const action = form.getAttribute('action') || window.location.pathname;
                const targetUrl = queryString ? `${action}?${queryString}` : action;

                try {
                    const response = await fetch(targetUrl, {
                    method: 'GET',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    if (!response.ok) throw new Error(`HTTP ${response.status}`);
                    const payload = await response.json();
                    if (requestId !== requestCounter) return;

                    if (payload.html !== undefined && listContainer) {
                        listContainer.innerHTML = payload.html;

                        initCardsIfNeeded();
                        wireRefreshButton(listContainer);

                        const select = getSortSelect();
                        if (select) select.value = sortVal;
                    }

                    // Update maintain type badges if counts are returned
                    if (payload.maintain_type_counts) {
                        const counts = payload.maintain_type_counts;
                        const badgeCorr = document.getElementById('badge-corrective');
                        const badgePrev = document.getElementById('badge-preventive');
                        const badgeAmel = document.getElementById('badge-ameliorative');
                        if (badgeCorr) badgeCorr.textContent = counts.corrective || 0;
                        if (badgePrev) badgePrev.textContent = counts.preventive || 0;
                        if (badgeAmel) badgeAmel.textContent = counts.ameliorative || 0;
                    }

                    // Mettre à jour les marqueurs de la carte
                    if (payload.markers !== undefined) {
                        document.dispatchEvent(new CustomEvent('interventions-markers-updated', {
                            detail: { markers: payload.markers }
                        }));
                    }

                    const historyUrl = queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname;
                    window.history.replaceState(null, '', historyUrl);

                    if (preserveFocus && input) {
                    input.focus({ preventScroll: true });
                    const len = input.value.length;
                    if (typeof input.setSelectionRange === 'function') input.setSelectionRange(len, len);
                    }
                } catch (error) {
                    form.removeEventListener('submit', handleSubmit);
                    form.submit(); // fallback full reload
                } finally {
                    inflightRequests = Math.max(0, inflightRequests - 1);
                    if (inflightRequests === 0) setRefreshLoading(false);
                }
            }

            function wireRefreshButton(root = document) {
                const btn = root.querySelector('#refresh-list');
                if (!btn || btn._refreshInitDone) return;
                btn._refreshInitDone = true;
                btn.addEventListener('click', () => {
                    btn.classList.remove('active');
                    btn.blur();
                    submitForm(false);
                });
            }

            function setRefreshLoading(isLoading) {
                const btn = document.querySelector('#refresh-list');
                const icon = document.querySelector('#refresh-icon');
                const spinner = document.querySelector('#refresh-spinner');

                if (btn) {
                    btn.classList.remove('active');
                    btn.blur();
                    btn.disabled = isLoading;
                    btn.setAttribute('aria-busy', isLoading ? 'true' : 'false');
                }

                if (icon) icon.classList.toggle('d-none', isLoading);
                if (spinner) spinner.classList.toggle('d-none', !isLoading);
            }

            async function handleSubmit(event) {
                event.preventDefault();
                const preserveFocus = !!input && (document.activeElement === input || event.submitter === submitButton);
                await submitForm(preserveFocus);
            }

            form.addEventListener('submit', handleSubmit);

            wireRefreshButton();

            if (input) {
                input.addEventListener('input', () => {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(() => {
                    const value = (input.value || '').trim();
                    if (value.length === 0 || value.length >= 2) submitForm(true);
                }, DELAY);
                });
            }

            if (clearBtn) {
                clearBtn.addEventListener('click', () => {
                if (input) {
                    input.value = '';
                    input.focus({ preventScroll: true });
                    submitForm(true);
                } else {
                    submitForm(false);
                }
                });
            }

            autoSubmitTargets.forEach((el) => {
                el.addEventListener('change', () => submitForm(false));
            });

            // Statuts : toujours au moins 1 coché + autosubmit
            const statusCheckboxes = Array.from(form.querySelectorAll('input[data-status-filter]'));
            statusCheckboxes.forEach((checkbox) => {
                checkbox.addEventListener('change', (event) => {
                if (!event.target.checked) {
                    const otherChecked = statusCheckboxes.some((cb) => cb !== event.target && cb.checked);
                    if (!otherChecked) {
                    event.target.checked = true;
                    return;
                    }
                }
                submitForm(false); // tri conservé via 'sort-hidden'
                });
            });
        })();

        

        /* =========================
        2) BADGE DES STATUTS + COLLAPSE
        ========================= */
        (function () {
        const form = document.querySelector('form[method="get"]');
        if (!form) return;

        const panel  = document.getElementById('statusFilterPanel');
        const btn    = document.getElementById('toggle-status-filter');
        const badge  = document.getElementById('statusCountBadge');
        const checks = Array.from(form.querySelectorAll('input[data-status-filter]'));

        const collapse = panel ? bootstrap.Collapse.getOrCreateInstance(panel, { toggle: false }) : null;

        function updateStatusCountBadge() {
            const count = checks.filter(c => c.checked).length;
            if (!badge) return;
            if (count > 0) { badge.textContent = count; badge.classList.remove('d-none'); }
            else { badge.classList.add('d-none'); }
        }

        if (btn && collapse) {
            btn.addEventListener('click', () => collapse.toggle());
            panel.addEventListener('shown.bs.collapse', () => btn.setAttribute('aria-expanded', 'true'));
            panel.addEventListener('hidden.bs.collapse', () => btn.setAttribute('aria-expanded', 'false'));
        }

        checks.forEach(cb => cb.addEventListener('change', updateStatusCountBadge));
        updateStatusCountBadge(); // init
        })();

        /* =========================
        3) ONGLETS TYPE DE MAINTENANCE
        ========================= */
        (function () {
        const form = document.querySelector('form[method="get"]');
        const maintainTypeTabs = document.getElementById('maintainTypeTabs');
        if (!form || !maintainTypeTabs) return;

        const maintainTypeHidden = document.getElementById('maintain-type-hidden');
        const buttons = Array.from(maintainTypeTabs.querySelectorAll('.maintain-type-btn'));

        buttons.forEach((btn) => {
            btn.addEventListener('click', () => {
                const maintainType = btn.dataset.maintainType || '';
                
                // Update active state
                buttons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // Update hidden field
                if (maintainTypeHidden) maintainTypeHidden.value = maintainType;
                
                // Trigger form submit (via custom event that the main IIFE will handle)
                form.dispatchEvent(new CustomEvent('maintain-type-change'));
            });
        });

        // Listen for maintain-type-change event
        form.addEventListener('maintain-type-change', () => {
            form.dispatchEvent(new Event('submit', { cancelable: true }));
        });
        })();

        /* =========================
        4) CARTES CLIQUABLES
        ========================= */
        function showLoadingOverlay() {
            const overlay = document.getElementById('loading-overlay');
            if (overlay) {
                overlay.classList.add('active');
                overlay.setAttribute('aria-hidden', 'false');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.card[data-href]').forEach(card => {
            card.style.cursor = 'pointer';
            card.addEventListener('click', e => {
                if (e.target.closest('a, button, input, label, .form-check')) return;
                showLoadingOverlay();
                window.location.href = card.dataset.href;
            });
        });
        });

        function initCardsIfNeeded() {
            document.querySelectorAll('.card[data-href]').forEach(card => {
                if (card._clickInitDone) return;
                card._clickInitDone = true;
                card.style.cursor = 'pointer';
                card.addEventListener('click', e => {
                    if (e.target.closest('a, button, input, label, .form-check')) return;
                    showLoadingOverlay();
                    window.location.href = card.dataset.href;
                });
            });
        }

    </script>

    <!-- MapLibre GL JS -->
    <script src="{% static 'common/maplibre-gl.js' %}"></script>
    <script src="{% static 'interventions/status_colors.js' %}"></script>
    <script>
    (function () {
        /* === États textuels foncés === */
        const STATUS_TEXT_DARK = new Set(['to_be_approved', 'to_be_planned', 'assigned', 'on_pause', 'processed', 'to_be_corrected', 'corrected', 'canceled']);

        /* === État local === */
        let currentMarkers = {{ markers_json|safe }};
        let map = null;
        let fitOnOpen = true;
        const SOURCE_ID = 'interventions-points';
        const LAYER_ID  = 'interventions-circles';

        function hexColor(status, bsColor, isAssigned) {
            if (status === 'to_be_processed' && isAssigned) {
                return INTERVENTION_STATUS_COLORS.to_be_processed_assigned || '#d81b60';
            }
            if (status && INTERVENTION_STATUS_COLORS[status]) {
                return INTERVENTION_STATUS_COLORS[status];
            }
            const fallbackMap = {
                'secondary': '#757575',
                'danger':    '#f4511e',
                'warning':   '#ffb74d',
                'primary':   '#3182ce',
                'info':      '#26a69a',
                'success':   '#388e3c',
                'dark':      '#37474f',
            };
            return fallbackMap[bsColor] || '#757575';
        }

        function isTextDark(status, bsColor) {
            if (status) {
                return STATUS_TEXT_DARK.has(status);
            }
            return bsColor === 'warning' || bsColor === 'info';
        }

        /* --- Conversion tableau de marqueurs → GeoJSON FeatureCollection --- */
        function toGeoJSON(markersData) {
            return {
                type: 'FeatureCollection',
                features: markersData.map(m => ({
                    type: 'Feature',
                    geometry: { type: 'Point', coordinates: [m.lon, m.lat] },
                    properties: {
                        id:           m.id,
                        code:         m.code,
                        title:        m.title,
                        status_label: m.status_label,
                        status_color: m.status_color,
                        status:       m.status,
                        is_assigned:  m.is_assigned,
                        maintain_type: m.maintain_type,
                        url:          m.url,
                        fill:         hexColor(m.status, m.status_color, m.is_assigned),
                    },
                })),
            };
        }

        /* --- Construction du contenu popup (plusieurs interventions au même endroit) --- */
        function buildPopupHtml(features) {
            return features.map((f, idx) => {
                const p      = f.properties;
                const fill   = hexColor(p.status, p.status_color, p.is_assigned);
                const txtCol = isTextDark(p.status, p.status_color) ? '#000' : '#fff';
                const sep    = idx > 0 ? '<hr style="margin:5px 0">' : '';
                const coords = f.geometry && f.geometry.coordinates ? f.geometry.coordinates : null;
                const gpsBtn = (coords && coords.length >= 2) ? 
                    `<button type="button" class="btn btn-sm btn-outline-primary border-0 p-0 ms-2" title="Itinéraire GPS" onclick="openGpsNavigation('${coords[1]}', '${coords[0]}', '${p.code}', false, event)">
                        <i class="bi bi-sign-turn-right-fill"></i>
                    </button>` : '';
                return `${sep}
                    <div style="margin:2px 0">
                        <a href="${p.url}">${p.code}</a>
                        <span style="display:inline-block;background:${fill};color:${txtCol};
                               border-radius:4px;padding:1px 6px;font-size:0.7rem;margin-left:4px">
                            ${p.status_label}
                        </span>
                        ${gpsBtn}
                        <div style="font-size:0.82rem;color:#555;margin-top:2px">${p.title}</div>
                    </div>`;
            }).join('');
        }

        /* --- Mise à jour des données de la source --- */
        function updateSource(markersData) {
            if (!map) return;
            const geojson = toGeoJSON(markersData);
            const src = map.getSource(SOURCE_ID);
            if (src) {
                src.setData(geojson);
            }
        }

        /* --- Initialisation MapLibre --- */
        function initMap() {
            if (map) return;
            map = new maplibregl.Map({
                container: 'intervention-map',
                style: window.MAP_STYLE_LIGHT,
                center: [4.35, 50.85],
                zoom: 11,
                touchPitch: false,
            });

            map.addControl(new maplibregl.NavigationControl(), 'bottom-right');

            // Bouton géolocalisation : affiche la position, zoom uniquement au clic
            map.addControl(new maplibregl.GeolocateControl({
                positionOptions: { enableHighAccuracy: true },
                trackUserLocation: false,   // pas de suivi continu
                showUserHeading: true,
                fitBoundsOptions: { maxZoom: 17 },
            }), 'bottom-right');

            map.on('load', () => {
                /* Source GeoJSON + couche cercles */
                map.addSource(SOURCE_ID, {
                    type: 'geojson',
                    data: toGeoJSON(currentMarkers),
                });

                map.addLayer({
                    id: LAYER_ID,
                    type: 'circle',
                    source: SOURCE_ID,
                    paint: {
                        'circle-radius': 9,
                        'circle-color': ['get', 'fill'],
                        'circle-opacity': 0.92,
                        'circle-stroke-width': 2,
                        'circle-stroke-color': '#fff',
                    },
                });

                /* Curseur pointer au survol */
                map.on('mouseenter', LAYER_ID, () => { map.getCanvas().style.cursor = 'pointer'; });
                map.on('mouseleave', LAYER_ID, () => { map.getCanvas().style.cursor = ''; });

                /* Popup au clic : regroupe toutes les interventions à proximité du point tapé */
                map.on('click', LAYER_ID, (e) => {
                    const features = map.queryRenderedFeatures(e.point, { layers: [LAYER_ID] });
                    if (!features.length) return;

                    // Déduplication par id (MapLibre peut retourner des doublons de tuiles)
                    const seen = new Set();
                    const unique = features.filter(f => {
                        if (seen.has(f.properties.id)) return false;
                        seen.add(f.properties.id); return true;
                    });

                    const coords = e.lngLat;
                    new maplibregl.Popup({ closeButton: true, maxWidth: '320px' })
                        .setLngLat(coords)
                        .setHTML(buildPopupHtml(unique))
                        .addTo(map);
                });

                /* Ajuster la vue initiale */
                if (fitOnOpen && currentMarkers.length > 0) {
                    fitOnOpen = false;
                    fitBounds(currentMarkers);
                }
            });
        }

        function fitBounds(markersData) {
            if (!markersData.length) return;
            if (markersData.length === 1) {
                map.flyTo({ center: [markersData[0].lon, markersData[0].lat], zoom: 16 });
                return;
            }
            const lons = markersData.map(m => m.lon);
            const lats = markersData.map(m => m.lat);
            map.fitBounds(
                [[Math.min(...lons), Math.min(...lats)], [Math.max(...lons), Math.max(...lats)]],
                { padding: 50, maxZoom: 16 }
            );
        }

        /* --- Ouverture / fermeture carte --- */
        function openMap() {
            const overlay = document.getElementById('map-overlay');
            overlay.style.display = 'block';
            if (!map) {
                initMap();
            } else {
                // Toujours synchroniser la source avec la liste courante à l'ouverture
                updateSource(currentMarkers);
                // resize nécessaire si le conteneur était caché
                setTimeout(() => map.resize(), 80);
            }
        }

        function closeMap() {
            document.getElementById('map-overlay').style.display = 'none';
        }

        /* --- Écouteurs --- */
        document.getElementById('map-fab-btn').addEventListener('click', openMap);
        document.getElementById('map-close-btn').addEventListener('click', closeMap);
        document.addEventListener('keydown', e => { if (e.key === 'Escape') closeMap(); });

        /* --- Mise à jour des marqueurs après chaque rafraîchissement AJAX --- */
        document.addEventListener('interventions-markers-updated', e => {
            currentMarkers = e.detail.markers || [];
            fitOnOpen = false;
            const overlay = document.getElementById('map-overlay');
            if (map && overlay && overlay.style.display !== 'none') {
                updateSource(currentMarkers);
            }
        });
    })();
    </script>
{% endblock extra_scripts %}