{% load i18n %}
{% load static %}

<div class="card section-card shadow-sm border-0 rounded-4 overflow-hidden mb-4" id="exceptional-transport-widget">
    <!-- Header -->
    <div class="card-header bg-white border-bottom py-3 px-4 d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div class="d-flex align-items-center gap-2">
            <div class="rounded-3 p-2 d-flex align-items-center justify-content-center" style="background-color: #e8f4fd; color: #007bc5; width: 42px; height: 42px;">
                <i class="bi bi-truck-front-fill fs-5"></i>
            </div>
            <div class="text-start">
                <h5 class="card-title fw-bold mb-0 text-dark">
                    {% translate "Transport Exceptionnel & Convois Lourds" %}
                </h5>
                <small class="text-muted">
                    {% translate "Cartographie du réseau d'ouvrages d'art et conditions d'admissibilité" %}
                </small>
            </div>
        </div>

        <div class="d-flex align-items-center gap-2">
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-semibold" id="te-total-badge">
                <i class="bi bi-geo-alt-fill me-1"></i><span id="te-total-count">0</span> {% translate "ouvrages répertoriés" %}
            </span>
            <a href="{% url 'assets:structures_index' %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 py-1 fw-medium" title="{% translate 'Voir tous les ouvrages d\'art' %}">
                <i class="bi bi-arrow-right me-1"></i>{% translate "Tous les ouvrages" %}
            </a>
        </div>
    </div>

    <!-- Body -->
    <div class="card-body p-3 p-md-4">
        <!-- Controls Bar: Search & Status Filters -->
        <div class="row g-2 align-items-center mb-3">
            <!-- Search Autocomplete -->
            <div class="col-12 col-lg-6 position-relative">
                <div class="input-group shadow-sm rounded-pill overflow-hidden border">
                    <span class="input-group-text bg-white border-0 ps-3 text-muted">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text"
                           id="te-search-input"
                           class="form-control border-0 py-2 shadow-none"
                           placeholder="{% translate 'Rechercher un ouvrage (code ex: OA120, nom, n° FOD, BKL...)' %}"
                           autocomplete="off">
                    <button class="btn btn-white border-0 pe-3 text-muted d-none" type="button" id="te-search-clear" title="{% translate 'Effacer la recherche' %}">
                        <i class="bi bi-x-circle-fill"></i>
                    </button>
                </div>
                <!-- Autocomplete Dropdown List -->
                <div id="te-autocomplete-dropdown"
                     class="list-group position-absolute w-100 shadow-lg rounded-3 mt-1 overflow-auto border-0 d-none"
                     style="max-height: 320px; z-index: 1060; left: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);">
                </div>
            </div>

            <!-- Status Filter Chips -->
            <div class="col-12 col-lg-6">
                <div class="d-flex flex-wrap gap-1 justify-content-lg-end" id="te-status-filters">
                    <button type="button" class="btn btn-sm btn-dark rounded-pill px-3 py-1 te-filter-btn active" data-status="all">
                        {% translate "Tous" %} (<span id="te-count-all">0</span>)
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-success rounded-pill px-2 py-1 te-filter-btn" data-status="authorized">
                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Autorisé" %} (<span id="te-count-authorized">0</span>)
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-warning rounded-pill px-2 py-1 te-filter-btn text-dark" data-status="conditional">
                        <i class="bi bi-exclamation-triangle-fill me-1 text-warning"></i>{% translate "Sous conditions" %} (<span id="te-count-conditional">0</span>)
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-1 te-filter-btn" data-status="other">
                        {% translate "Autres" %} (<span id="te-count-other">0</span>)
                    </button>
                </div>
            </div>
        </div>

        <!-- Map Container -->
        <div class="position-relative rounded-4 overflow-hidden border shadow-inner" style="height: 540px;">
            <div id="te-map-container" style="width: 100%; height: 100%;"></div>

            <!-- Floating Map Controls Overlay (Top Right) -->
            <div class="position-absolute top-0 end-0 m-3 d-flex flex-column gap-2" style="z-index: 5;">
                <button type="button" class="btn btn-light btn-sm shadow-sm rounded-3 border" id="te-btn-reset-view" title="{% translate 'Réinitialiser la vue' %}">
                    <i class="bi bi-arrows-fullscreen"></i>
                </button>
            </div>

            <!-- Floating Legend (Bottom Left) -->
            <div class="position-absolute bottom-0 start-0 m-3 p-2 px-3 rounded-3 shadow-sm border bg-white bg-opacity-95 text-start"
                 style="z-index: 5; font-size: 0.8rem; max-width: 280px; backdrop-filter: blur(8px);">
                <div class="fw-bold mb-1 text-secondary text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                    {% translate "Statut de passage" %}
                </div>
                <div class="d-flex flex-column gap-1">
                    <div class="d-flex align-items-center gap-2">
                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #198754; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
                        <span>{% translate "Autorisé (standard / calculé)" %}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #ffc107; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
                        <span>{% translate "Sous conditions / prescriptions" %}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #fd7e14; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
                        <span>{% translate "Étude préalable requise" %}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #dc3545; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
                        <span>{% translate "Interdit" %}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #6c757d; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
                        <span>{% translate "Non évalué" %}</span>
                    </div>
                </div>
            </div>

            <!-- Loading Spinner Overlay -->
            <div id="te-map-loading" class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-75" style="z-index: 10;">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
                    </div>
                    <div class="small fw-semibold text-secondary mt-2">{% translate "Chargement du réseau d'ouvrages..." %}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Styles for Popup and Autocomplete -->
<style>
.te-popup .maplibregl-popup-content {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: none;
    overflow: hidden;
    max-width: 360px;
    width: 340px;
}
.te-popup .maplibregl-popup-close-button {
    font-size: 1.2rem;
    color: #495057;
    padding: 6px 10px;
    z-index: 10;
}
.te-autocomplete-item {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.te-autocomplete-item:hover, .te-autocomplete-item.active {
    background-color: #f1f8ff !important;
}
.te-metric-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
}
</style>

<!-- Widget Logic -->
<script>
(function() {
    const GEOJSON_URL = "{% url 'assets:structures_exceptional_transport_geojson' %}";
    let teMap = null;
    let teFeatures = [];
    let activeFilter = 'all';
    let currentPopup = null;

    const STATUS_COLORS = {
        'authorized': '#198754',
        'conditional': '#ffc107',
        'prior_study_required': '#fd7e14',
        'forbidden': '#dc3545',
        'not_evaluated': '#6c757d'
    };

    function initExceptionalTransportWidget() {
        const container = document.getElementById('te-map-container');
        if (!container) return;

        // Map initialization
        teMap = new maplibregl.Map({
            container: 'te-map-container',
            style: window.MAP_STYLE_LIGHT || 'https://tiles.openfreemap.org/styles/positron',
            center: window.MAP_DEFAULT_CENTER || [4.3572, 50.8477],
            zoom: window.MAP_DEFAULT_ZOOM || 11.5,
            minzoom: 8,
            maxzoom: 20
        });

        teMap.addControl(new maplibregl.NavigationControl({ showCompass: true }), 'top-left');

        teMap.on('load', async () => {
            try {
                const response = await fetch(GEOJSON_URL);
                const data = await response.json();
                teFeatures = (data && data.features) ? data.features : [];

                updateCounts();
                renderMapLayers();
                setupSearchAutocomplete();
                setupStatusFilters();
                setupResetButton();

                const loadingEl = document.getElementById('te-map-loading');
                if (loadingEl) loadingEl.classList.add('d-none');
            } catch (err) {
                console.error("Error loading Exceptional Transport GeoJSON:", err);
                const loadingEl = document.getElementById('te-map-loading');
                if (loadingEl) {
                    loadingEl.innerHTML = `<div class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>Impossible de charger les données cartographiques.</div>`;
                }
            }
        });
    }

    function updateCounts() {
        let total = teFeatures.length;
        let auth = 0, cond = 0, other = 0;

        teFeatures.forEach(f => {
            const st = f.properties.passage_status;
            if (st === 'authorized') auth++;
            else if (st === 'conditional') cond++;
            else other++;
        });

        const elTotal = document.getElementById('te-total-count');
        if (elTotal) elTotal.textContent = total;
        const elAll = document.getElementById('te-count-all');
        if (elAll) elAll.textContent = total;
        const elAuth = document.getElementById('te-count-authorized');
        if (elAuth) elAuth.textContent = auth;
        const elCond = document.getElementById('te-count-conditional');
        if (elCond) elCond.textContent = cond;
        const elOther = document.getElementById('te-count-other');
        if (elOther) elOther.textContent = other;
    }

    function renderMapLayers() {
        if (!teMap) return;

        const geojsonData = {
            type: 'FeatureCollection',
            features: teFeatures
        };

        teMap.addSource('te-structures', {
            type: 'geojson',
            data: geojsonData
        });

        // Outer glow layer
        teMap.addLayer({
            id: 'te-structures-glow',
            type: 'circle',
            source: 'te-structures',
            paint: {
                'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 8, 16, 18],
                'circle-color': [
                    'match',
                    ['get', 'passage_status'],
                    'authorized', STATUS_COLORS.authorized,
                    'conditional', STATUS_COLORS.conditional,
                    'prior_study_required', STATUS_COLORS.prior_study_required,
                    'forbidden', STATUS_COLORS.forbidden,
                    STATUS_COLORS.not_evaluated
                ],
                'circle-opacity': 0.25,
                'circle-blur': 0.4
            }
        });

        // Main circle points layer
        teMap.addLayer({
            id: 'te-structures-circles',
            type: 'circle',
            source: 'te-structures',
            paint: {
                'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 6, 16, 12],
                'circle-color': [
                    'match',
                    ['get', 'passage_status'],
                    'authorized', STATUS_COLORS.authorized,
                    'conditional', STATUS_COLORS.conditional,
                    'prior_study_required', STATUS_COLORS.prior_study_required,
                    'forbidden', STATUS_COLORS.forbidden,
                    STATUS_COLORS.not_evaluated
                ],
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ffffff',
                'circle-opacity': 0.95
            }
        });

        // Cursor pointer
        teMap.on('mouseenter', 'te-structures-circles', () => {
            teMap.getCanvas().style.cursor = 'pointer';
        });
        teMap.on('mouseleave', 'te-structures-circles', () => {
            teMap.getCanvas().style.cursor = '';
        });

        // Click handler with multi-structure grouping
        teMap.on('click', 'te-structures-circles', (e) => {
            if (!e.features || !e.features.length) return;
            
            // Query features in small buffer for stacked structures
            const bbox = [
                [e.point.x - 8, e.point.y - 8],
                [e.point.x + 8, e.point.y + 8]
            ];
            const clickedFeatures = teMap.queryRenderedFeatures(bbox, { layers: ['te-structures-circles'] });
            
            // De-duplicate features by structure_id
            const uniqueFeatures = [];
            const seenIds = new Set();
            (clickedFeatures.length ? clickedFeatures : e.features).forEach(f => {
                const sid = f.properties.structure_id;
                if (!seenIds.has(sid)) {
                    seenIds.add(sid);
                    uniqueFeatures.push(f);
                }
            });

            openPopupForFeatures(uniqueFeatures, e.lngLat);
        });
    }

    function openPopupForFeatures(features, lngLat) {
        if (currentPopup) currentPopup.remove();

        let html = '';
        if (features.length === 1) {
            html = buildSingleStructurePopupHtml(features[0].properties);
        } else {
            html = buildMultiStructurePopupHtml(features);
        }

        currentPopup = new maplibregl.Popup({
            className: 'te-popup',
            closeButton: true,
            closeOnClick: true,
            maxWidth: '360px',
            offset: 12
        })
        .setLngLat(lngLat)
        .setHTML(html)
        .addTo(teMap);
    }

    function buildSingleStructurePopupHtml(p) {
        const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
        
        let metricsHtml = '<div class="row g-2 mb-2">';
        metricsHtml += `
            <div class="col-6">
                <div class="te-metric-box">
                    <div class="small text-muted" style="font-size: 0.7rem;">Poids max autorisé</div>
                    <div class="fw-bold text-dark">${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + ' t' : (p.max_calculated_weight_tonnes ? p.max_calculated_weight_tonnes + ' t (calc)' : '-')}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="te-metric-box">
                    <div class="small text-muted" style="font-size: 0.7rem;">Classe de pont (BKL)</div>
                    <div class="fw-bold text-dark text-truncate" title="${p.bridge_class || '-'}">${p.bridge_class || '-'}</div>
                </div>
            </div>
        `;
        if (p.usable_width_m || p.clearance_heights_str) {
            metricsHtml += `
                <div class="col-6">
                    <div class="te-metric-box">
                        <div class="small text-muted" style="font-size: 0.7rem;">Largeur utile</div>
                        <div class="fw-bold text-dark">${p.usable_width_m ? p.usable_width_m + ' m' : '-'}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="te-metric-box">
                        <div class="small text-muted" style="font-size: 0.7rem;">Hauteurs (G/C/D)</div>
                        <div class="fw-bold text-dark text-truncate" title="${p.clearance_heights_str || '-'}">${p.clearance_heights_str || '-'}</div>
                    </div>
                </div>
            `;
        }
        metricsHtml += '</div>';

        // Restrictions badges
        let restrictionsBadges = '';
        if (p.max_speed_kmh) {
            restrictionsBadges += `<span class="badge bg-warning text-dark me-1 mb-1"><i class="bi bi-speedometer2 me-1"></i>Max ${p.max_speed_kmh} km/h</span>`;
        }
        if (p.is_braking_forbidden) {
            restrictionsBadges += `<span class="badge bg-danger me-1 mb-1"><i class="bi bi-slash-circle me-1"></i>Freinage interdit</span>`;
        }
        if (p.is_isolated_crossing_only) {
            restrictionsBadges += `<span class="badge bg-info text-dark me-1 mb-1"><i class="bi bi-person-slash me-1"></i>Convoi seul</span>`;
        }

        // Prescriptions excerpt
        let prescText = p.prescriptions_fr || p.prescriptions_nl || '';
        let prescHtml = '';
        if (prescText) {
            let shortPresc = prescText.length > 130 ? prescText.substring(0, 130) + '...' : prescText;
            prescHtml = `
                <div class="alert alert-light border p-2 mb-2 text-start" style="font-size: 0.75rem; max-height: 80px; overflow-y: auto;">
                    <div class="fw-bold text-secondary mb-1"><i class="bi bi-card-text me-1"></i>Prescriptions :</div>
                    ${shortPresc}
                </div>
            `;
        }

        return `
            <div class="card border-0 shadow-none">
                <div class="card-header bg-light border-bottom p-3 text-start">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="badge bg-secondary">${p.structure_code}</span>
                        ${p.fod_vnr ? `<span class="small text-muted">FOD n°${p.fod_vnr}</span>` : ''}
                    </div>
                    <div class="fw-bold text-dark" style="font-size: 0.95rem; line-height: 1.2;">
                        ${p.name || p.name_fr || p.structure_code}
                    </div>
                    <div class="mt-2">${statusBadge}</div>
                </div>
                <div class="card-body p-3">
                    ${metricsHtml}
                    ${restrictionsBadges ? `<div class="mb-2 text-start">${restrictionsBadges}</div>` : ''}
                    ${prescHtml}
                    <a href="${p.detail_url}" class="btn btn-primary btn-sm w-100 rounded-pill fw-semibold mt-1">
                        <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Ouvrir la fiche de l'ouvrage" %}
                    </a>
                </div>
            </div>
        `;
    }

    function buildMultiStructurePopupHtml(features) {
        let itemsHtml = '';
        features.forEach((f, idx) => {
            const p = f.properties;
            const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
            itemsHtml += `
                <div class="border-bottom pb-2 mb-2 text-start ${idx > 0 ? 'pt-2' : ''}">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="badge bg-secondary me-1">${p.structure_code}</span>
                        ${statusBadge}
                    </div>
                    <div class="fw-bold text-dark small mt-1">${p.name || p.name_fr}</div>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <span class="small text-muted">Poids: <strong>${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + 't' : '-'}</strong></span>
                        <a href="${p.detail_url}" class="btn btn-sm btn-outline-primary py-0 px-2 rounded-pill" style="font-size: 0.75rem;">
                            {% translate "Détail" %} <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
            `;
        });

        return `
            <div class="card border-0 shadow-none">
                <div class="card-header bg-light border-bottom p-2 px-3 text-start">
                    <div class="fw-bold text-dark" style="font-size: 0.85rem;">
                        <i class="bi bi-layers-fill text-primary me-1"></i>${features.length} {% translate "ouvrages à cet endroit" %}
                    </div>
                </div>
                <div class="card-body p-3" style="max-height: 280px; overflow-y: auto;">
                    ${itemsHtml}
                </div>
            </div>
        `;
    }

    function getStatusBadgeHtml(status, display) {
        let colorClass = 'bg-secondary';
        let icon = 'bi-question-circle';
        if (status === 'authorized') {
            colorClass = 'bg-success';
            icon = 'bi-check-circle-fill';
        } else if (status === 'conditional') {
            colorClass = 'bg-warning text-dark';
            icon = 'bi-exclamation-triangle-fill';
        } else if (status === 'prior_study_required') {
            colorClass = 'bg-orange text-white' ;
            icon = 'bi-journal-text';
        } else if (status === 'forbidden') {
            colorClass = 'bg-danger';
            icon = 'bi-slash-circle-fill';
        }
        return `<span class="badge ${colorClass} py-1 px-2"><i class="bi ${icon} me-1"></i>${display || status}</span>`;
    }

    function setupSearchAutocomplete() {
        const input = document.getElementById('te-search-input');
        const clearBtn = document.getElementById('te-search-clear');
        const dropdown = document.getElementById('te-autocomplete-dropdown');
        if (!input || !dropdown) return;

        input.addEventListener('input', () => {
            const query = input.value.trim().toLowerCase();
            if (clearBtn) {
                if (query.length > 0) clearBtn.classList.remove('d-none');
                else clearBtn.classList.add('d-none');
            }

            if (query.length < 1) {
                dropdown.classList.add('d-none');
                dropdown.innerHTML = '';
                return;
            }

            // Filter features
            const matches = teFeatures.filter(f => {
                if (activeFilter !== 'all') {
                    const st = f.properties.passage_status;
                    if (activeFilter === 'authorized' && st !== 'authorized') return false;
                    if (activeFilter === 'conditional' && st !== 'conditional') return false;
                    if (activeFilter === 'other' && (st === 'authorized' || st === 'conditional')) return false;
                }

                const p = f.properties;
                const code = (p.structure_code || '').toLowerCase();
                const nameFr = (p.name_fr || '').toLowerCase();
                const nameNl = (p.name_nl || '').toLowerCase();
                const vnr = p.fod_vnr ? String(p.fod_vnr) : '';
                const bkl = (p.bridge_class || '').toLowerCase();

                return code.includes(query) || nameFr.includes(query) || nameNl.includes(query) || vnr.includes(query) || bkl.includes(query);
            }).slice(0, 8);

            if (matches.length === 0) {
                dropdown.innerHTML = `<div class="p-3 text-muted small text-center">{% translate "Aucun ouvrage correspondant trouvé" %}</div>`;
                dropdown.classList.remove('d-none');
                return;
            }

            let html = '';
            matches.forEach(f => {
                const p = f.properties;
                const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
                html += `
                    <button type="button" class="list-group-item list-group-item-action te-autocomplete-item p-2 px-3 border-bottom text-start" data-structure-id="${p.structure_id}">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge bg-secondary">${p.structure_code}</span>
                            ${statusBadge}
                        </div>
                        <div class="fw-bold text-dark small mt-1 text-truncate">${p.name || p.name_fr}</div>
                        <div class="small text-muted d-flex justify-content-between mt-1" style="font-size: 0.75rem;">
                            <span>${p.fod_vnr ? 'FOD: ' + p.fod_vnr : ''}</span>
                            <span>Poids: ${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + 't' : (p.max_calculated_weight_tonnes ? p.max_calculated_weight_tonnes + 't' : '-')}</span>
                        </div>
                    </button>
                `;
            });

            dropdown.innerHTML = html;
            dropdown.classList.remove('d-none');

            // Add click listeners to items
            dropdown.querySelectorAll('.te-autocomplete-item').forEach(item => {
                item.addEventListener('click', () => {
                    const sid = parseInt(item.getAttribute('data-structure-id'));
                    const selected = teFeatures.find(f => f.properties.structure_id === sid);
                    if (selected && teMap) {
                        const coords = selected.geometry.coordinates;
                        teMap.flyTo({
                            center: coords,
                            zoom: 16,
                            speed: 1.2
                        });
                        openPopupForFeatures([selected], coords);
                    }
                    dropdown.classList.add('d-none');
                });
            });
        });

        if (clearBtn) {
            clearBtn.addEventListener('click', () => {
                input.value = '';
                clearBtn.classList.add('d-none');
                dropdown.classList.add('d-none');
                dropdown.innerHTML = '';
            });
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!input.contains(e.target) && !dropdown.contains(e.target)) {
                dropdown.classList.add('d-none');
            }
        });
    }

    function setupStatusFilters() {
        const filterBtns = document.querySelectorAll('.te-filter-btn');
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                activeFilter = btn.getAttribute('data-status');

                if (!teMap || !teMap.getLayer('te-structures-circles')) return;

                let filterExpr = null;
                if (activeFilter === 'authorized') {
                    filterExpr = ['==', ['get', 'passage_status'], 'authorized'];
                } else if (activeFilter === 'conditional') {
                    filterExpr = ['==', ['get', 'passage_status'], 'conditional'];
                } else if (activeFilter === 'other') {
                    filterExpr = ['all',
                        ['!=', ['get', 'passage_status'], 'authorized'],
                        ['!=', ['get', 'passage_status'], 'conditional']
                    ];
                }

                teMap.setFilter('te-structures-circles', filterExpr);
                teMap.setFilter('te-structures-glow', filterExpr);

                if (currentPopup) currentPopup.remove();
            });
        });
    }

    function setupResetButton() {
        const resetBtn = document.getElementById('te-btn-reset-view');
        if (resetBtn) {
            resetBtn.addEventListener('click', () => {
                if (teMap) {
                    teMap.flyTo({
                        center: window.MAP_DEFAULT_CENTER || [4.3572, 50.8477],
                        zoom: window.MAP_DEFAULT_ZOOM || 11.5
                    });
                }
            });
        }
    }

    // Auto-init on DOMContentLoaded or immediate if DOM already ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initExceptionalTransportWidget);
    } else {
        initExceptionalTransportWidget();
    }
})();
</script>