{% extends "panoramax/base.html" %}
{% load i18n %}
{% load static %}

{% block head %}
<!-- Importmap pour résoudre les dépendances dynamiques de MapLibre GL v5 localement -->
<script type="importmap">
{
  "imports": {
    "pmtiles": "{% static 'panoramax/js/pmtiles.js' %}",
    "geojson-vt": "{% static 'panoramax/js/geojson-vt.js' %}",
    "@mapbox/geojson-vt": "{% static 'panoramax/js/geojson-vt.js' %}",
    "pbf": "{% static 'panoramax/js/pbf.js' %}"
  }
}
</script>

<!-- Intercepteur fetch/xhr pour forcer HTTPS et rediriger les images vers le proxy sécurisé Django -->
<script>
(function() {
    const imageToken = "{{ image_token|escapejs }}";
    const panoramaxApiUrl = "{{ panoramax_api_url|escapejs }}";
    
    function rewriteUrl(urlStr) {
        if (!urlStr) return urlStr;
        
        // Force HTTPS pour le domaine Panoramax
        if (urlStr.startsWith('http://panoramax.streetup.be/')) {
            urlStr = urlStr.replace('http://panoramax.streetup.be/', 'https://panoramax.streetup.be/');
        }

        // Rewrite uniquement si c'est un fichier image (.jpg) contenant un UUID
        // et que la requête ne va pas déjà vers notre propre proxy local
        if (urlStr.toLowerCase().includes('.jpg') && !urlStr.includes('/panoramax/media/pictures/')) {
            const uuidRegex = /\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\/([^?]+)/i;
            const match = urlStr.match(uuidRegex);
            if (match && imageToken) {
                const uuid = match[1];
                const subpath = match[2];
                return `/panoramax/media/pictures/${uuid}/${subpath}?token=${encodeURIComponent(imageToken)}`;
            }
        }
        return urlStr;
    }

    const originalFetch = window.fetch;
    window.fetch = function(input, init) {
        let urlStr = '';
        if (typeof input === 'string') {
            urlStr = input;
        } else if (input instanceof URL) {
            urlStr = input.href;
        } else if (input && typeof input === 'object' && input.url) {
            urlStr = input.url;
        }

        const rewrittenUrl = rewriteUrl(urlStr);
        if (rewrittenUrl !== urlStr) {
            if (typeof input === 'string') {
                input = rewrittenUrl;
            } else if (input instanceof URL) {
                input = new URL(rewrittenUrl, window.location.origin);
            } else if (input && typeof input === 'object' && input.url) {
                input = new Request(rewrittenUrl, input);
            }
            urlStr = rewrittenUrl;
        }

        if (urlStr.includes('style.json')) {
            return originalFetch(input, init).then(async (response) => {
                if (!response.ok) return response;
                try {
                    const json = await response.json();
                    if (json.glyphs && (json.glyphs.includes('panoramax') || json.glyphs.includes('openstreetmap.fr'))) {
                        json.glyphs = "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf";
                        console.log("[Proxy Fetch] Forcé la propriété 'glyphs' pour le style Panoramax :", urlStr);
                    }
                    const headers = new Headers(response.headers);
                    headers.set('content-type', 'application/json');
                    return new Response(JSON.stringify(json), {
                        status: response.status,
                        statusText: response.statusText,
                        headers: headers
                    });
                } catch (e) {
                    return response;
                }
            });
        }

        return originalFetch(input, init);
    };

    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, ...args) {
        if (typeof url === 'string') {
            url = rewriteUrl(url);
        }
        return originalOpen.call(this, method, url, ...args);
    };
})();
</script>

<style>
    /* Full height container bypassing global sidebar */
    .panoramax-split-container {
        display: flex;
        height: calc(100vh - 56px); /* 56px corresponds to the main top navigation bar */
        width: 100%;
        overflow: hidden;
        background: #0f172a;
        color: #f8fafc;
        animation: fadeIn 0.4s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .panoramax-left-panel {
        width: 40%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        background: #0f172a;
    }

    .panoramax-right-panel {
        width: 60%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .panoramax-header {
        padding: 1.25rem;
        background: rgba(15, 23, 42, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .panoramax-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .panoramax-title-row h1 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
        color: #f8fafc;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .panoramax-nav-links {
        display: flex;
        gap: 0.5rem;
    }

    .panoramax-nav-links .btn {
        font-weight: 500;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .panoramax-filter-box, .panoramax-date-filter-box {
        background: rgba(30, 41, 59, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 0.75rem 1rem;
    }

    .panoramax-filter-box label, .panoramax-date-filter-box label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #94a3b8;
        margin-bottom: 0.35rem;
        display: block;
    }

    .date-preset-btn {
        border-color: rgba(255,255,255,0.15) !important;
        color: #cbd5e1 !important;
        font-size: 0.7rem !important;
        padding: 3px 6px !important;
    }
    .date-preset-btn:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #ffffff !important;
    }
    .date-preset-btn.active {
        background: #3b82f6 !important;
        color: #ffffff !important;
        border-color: #3b82f6 !important;
    }

    /* Timeline Overlay styling */
    .timeline-overlay {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 8px 16px;
        border-radius: 30px;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s ease;
    }
    .timeline-title {
        color: #94a3b8;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin: 0;
    }
    .timeline-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .timeline-date-btn {
        font-size: 0.75rem !important;
        padding: 2px 10px !important;
        border-radius: 20px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        border-color: rgba(59, 130, 246, 0.4) !important;
        background: transparent;
        color: #cbd5e1;
    }
    .timeline-date-btn:hover {
        background: rgba(59, 130, 246, 0.15) !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
    }
    .timeline-date-btn.active {
        background: #3b82f6 !important;
        color: #ffffff !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
    }

    /* Metadata Panel Styles */
    .metadata-panel-card {
        position: absolute;
        top: 60px;
        right: 20px;
        width: 320px;
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
        z-index: 100;
        transition: all 0.3s ease;
    }
    .metadata-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .metadata-header h5 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #f8fafc;
    }
    .metadata-body {
        padding: 12px 14px;
    }
    .metadata-body table td {
        padding: 4px 0;
    }

    .panoramax-map-container {
        flex-grow: 1;
        position: relative;
        width: 100%;
        background: #1e293b;
    }

    #custom-map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* Premium interactive marker */
    .active-marker {
        width: 32px;
        height: 32px;
        position: relative;
        cursor: pointer;
    }

    .marker-dot {
        width: 10px;
        height: 10px;
        background-color: #3b82f6;
        border: 2px solid white;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    }

    .marker-cone {
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 24px solid rgba(59, 130, 246, 0.75);
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform-origin: 50% 100%;
        transform: translateX(-50%);
        z-index: 1;
        transition: transform 0.15s ease-out;
    }

    .marker-pulse {
        width: 36px;
        height: 36px;
        border: 2px solid #3b82f6;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: marker-pulse 1.8s infinite ease-out;
        z-index: 0;
        pointer-events: none;
    }

    @keyframes marker-pulse {
        0% {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
        100% {
            width: 50px;
            height: 50px;
            opacity: 0;
        }
    }
    
    /* Hide the miniature map control inside pnx-viewer */
    pnx-mini {
        display: none !important;
    }

    .custom-home-ctrl-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Address search control styling overrides */
    #custom-map .asc-container {
        position: absolute !important;
        left: 50% !important;
        top: 10px !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
        min-width: 280px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        background: #ffffff !important;
    }
    #custom-map .asc-input {
        color: #0f172a !important;
        background-color: #ffffff !important;
    }
    #custom-map .asc-result-item {
        color: #1e293b !important;
    }
    #custom-map .asc-result-item:hover {
        background: #eef2ff !important;
        color: #0f172a !important;
    }
    #custom-map .asc-no-results,
    #custom-map .asc-loading {
        color: #64748b !important;
    }

    /* Viewer placeholder overlay style */
    .viewer-placeholder-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        transition: opacity 0.4s ease, visibility 0.4s;
    }
    .viewer-placeholder-overlay.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .placeholder-content {
        max-width: 400px;
        animation: pulse-slow 3s infinite ease-in-out;
    }
    .placeholder-icon {
        font-size: 3.5rem;
        margin-bottom: 1.25rem;
        display: inline-block;
    }
    .placeholder-content h3 {
        font-size: 1.4rem;
        font-weight: 600;
        color: #f8fafc;
        margin-bottom: 0.5rem;
    }
    .placeholder-content p {
        color: #94a3b8;
        font-size: 0.95rem;
        line-height: 1.5;
    }
    @keyframes pulse-slow {
        0%, 100% { transform: scale(1); opacity: 0.9; }
        50% { transform: scale(1.03); opacity: 1; }
    }
</style>
{% endblock head %}

{% block main %}
<div class="panoramax-split-container">
    <!-- Panel Gauche (Navigation, Filtre & Carte) -->
    <div class="panoramax-left-panel">
        <div class="panoramax-header">
            <div class="panoramax-title-row">
                <h1>
                    <i class="bi bi-images text-primary"></i>
                    {% translate "Photos 360" %}
                </h1>
                
                <div class="panoramax-nav-links">
                    <a href="{% url 'panoramax:index' %}" class="btn btn-sm btn-primary">
                        <i class="bi bi-map me-1"></i>{% translate "Carte" %}
                    </a>
                    {% if user.config.panoramax_can_upload %}
                    <a href="{% url 'panoramax:upload' %}" class="btn btn-sm btn-outline-light">
                        <i class="bi bi-cloud-upload me-1"></i>{% translate "Importer" %}
                    </a>
                    {% endif %}
                </div>
            </div>
            
            <div class="panoramax-filter-box">
                <label for="user-filter">{% translate "FILTRER PAR UTILISATEUR" %}</label>
                <select id="user-filter" class="form-select form-select-sm bg-dark text-white border-secondary">
                    <option value="">{% translate "Tous les utilisateurs" %}</option>
                    {% for u in upload_users %}
                    <option value="{{ u.username }}">{{ u.username }} ({{ u.upload_count }} upload{{ u.upload_count|pluralize }})</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Filtre par date -->
            <div class="panoramax-date-filter-box mt-2">
                <label class="form-label mb-1">{% translate "FILTRER PAR DATE" %}</label>
                
                <!-- Presets rapides -->
                <div class="btn-group w-100 mb-2" role="group">
                    <button type="button" class="btn btn-sm btn-outline-secondary date-preset-btn active" data-preset="all">{% translate "Toutes" %}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary date-preset-btn" data-preset="1m">{% translate "< 1 m" %}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary date-preset-btn" data-preset="3m">{% translate "< 3 m" %}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary date-preset-btn" data-preset="6m">{% translate "< 6 m" %}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary date-preset-btn" data-preset="1y">{% translate "< 1 a" %}</button>
                </div>
                
                <!-- Range manuel -->
                <div class="d-flex gap-1 align-items-center">
                    <input type="date" id="date-start" class="form-control form-control-sm bg-dark text-white border-secondary" placeholder="{% translate 'Début' %}">
                    <span class="text-secondary" style="font-size: 0.8rem;">-</span>
                    <input type="date" id="date-end" class="form-control form-control-sm bg-dark text-white border-secondary" placeholder="{% translate 'Fin' %}">
                    <button id="clear-dates-btn" class="btn btn-sm btn-outline-secondary px-2" title="{% translate 'Réinitialiser' %}" style="border-color: rgba(255,255,255,0.15);">
                        <i class="bi bi-trash-fill text-danger" style="font-size: 0.75rem;"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="panoramax-map-container" style="position: relative;">
            <div id="custom-map"></div>
            <!-- Timeline de dates visibles -->
            <div id="timeline-container" class="timeline-overlay" style="display: none;">
                <div class="timeline-title">{% translate "Dernières dates :" %}</div>
                <ul id="timeline-dates" class="timeline-list"></ul>
            </div>
        </div>
    </div>
    
    <!-- Panel Droite (Visualiseur Panoramax) -->
    <div class="panoramax-right-panel" style="position: relative;">
        <!-- Overlay de placeholder si aucun point n'est sélectionné -->
        <div id="viewer-placeholder-overlay" class="viewer-placeholder-overlay">
            <div class="placeholder-content">
                <i class="bi bi-compass text-primary placeholder-icon"></i>
                <h3>{% translate "Visualisation 360°" %}</h3>
                <p>{% translate "Sélectionnez un point bleu sur la carte pour charger la photo panoramique correspondante." %}</p>
            </div>
        </div>

        <!-- Bouton d'information pour ouvrir les métadonnées -->
        <button id="meta-toggle-btn" class="btn btn-sm btn-dark position-absolute top-0 end-0 m-3 z-3 border-secondary d-none" style="background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); border-radius: 20px; transition: all 0.2s ease;">
            <i class="bi bi-info-circle me-1"></i>{% translate "Métadonnées" %}
        </button>

        <!-- Panneau des métadonnées -->
        <div id="metadata-panel" class="metadata-panel-card d-none">
            <div class="metadata-header">
                <h5><i class="bi bi-info-circle me-2 text-primary"></i>{% translate "Métadonnées de la photo" %}</h5>
                <button id="meta-close-btn" class="btn-close btn-close-white" aria-label="Close" style="font-size: 0.75rem;"></button>
            </div>
            <div class="metadata-body">
                <table class="table table-sm table-dark table-borderless mb-0" style="font-size: 0.8rem;">
                    <tbody>
                        <tr>
                            <td class="text-secondary">{% translate "Fichier :" %}</td>
                            <td id="meta-filename" class="text-white text-end font-monospace">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Date :" %}</td>
                            <td id="meta-date" class="text-white text-end">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Position :" %}</td>
                            <td id="meta-position" class="text-white text-end font-monospace">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Altitude :" %}</td>
                            <td id="meta-altitude" class="text-white text-end">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Cap :" %}</td>
                            <td id="meta-azimuth" class="text-white text-end">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Caméra :" %}</td>
                            <td id="meta-camera" class="text-white text-end font-monospace">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Résolution :" %}</td>
                            <td id="meta-resolution" class="text-white text-end font-monospace">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Producteur :" %}</td>
                            <td id="meta-producer" class="text-white text-end">--</td>
                        </tr>
                        <tr>
                            <td class="text-secondary">{% translate "Licence :" %}</td>
                            <td id="meta-license" class="text-white text-end">--</td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- Actions de suppression si l'utilisateur a les droits -->
                <div id="metadata-actions" class="mt-3 pt-3 border-top border-secondary d-none">
                    <button id="btn-delete-picture" class="btn btn-sm btn-outline-danger w-100 mb-2">
                        <i class="bi bi-trash me-1"></i>{% translate "Supprimer cette photo" %}
                    </button>
                    <button id="btn-delete-collection" class="btn btn-sm btn-danger w-100">
                        <i class="bi bi-folder-x me-1"></i>{% translate "Supprimer la séquence" %}
                    </button>
                </div>
            </div>
        </div>

        <pnx-viewer 
            id="panoramax-viewer"
            endpoint="{{ panoramax_api_url }}"
            widgets="false"
            map-options="false"
            map-style="{{ MAP_STYLE_LIGHT }}"
            style="width: 100%; height: 100%; display: block;"
        ></pnx-viewer>
    </div>
</div>
{% endblock main %}

{% block script %}
<script src="{% static 'common/address_search_control.js' %}"></script>
<script type="module" src="{% static 'panoramax/js/panoramax-viewer.js' %}"></script>
<script>
    const imageToken = "{{ image_token|escapejs }}";
    const userSequences = {{ user_sequences_json|safe }};
    const allSequences = {{ all_sequences_json|safe }};
    const panoramaxApiUrl = "{{ panoramax_api_url }}";
    const currentUsername = "{{ request.user.username|escapejs }}";
    const isStaffOrSuperuser = {% if request.user.is_staff or request.user.is_superuser %}true{% else %}false{% endif %};

    // Parse les coordonnées et le zoom depuis l'URL
    const urlParams = new URLSearchParams(window.location.search);
    const latParam = urlParams.get('lat');
    const lonParam = urlParams.get('lon') || urlParams.get('lng');
    const zoomParam = urlParams.get('zoom');

    let initialCenter = [4.3517, 50.8503]; // Bruxelles par défaut
    let initialZoom = 12;
    let urlCoordinatesProvided = false;
    let targetLat = null;
    let targetLon = null;

    if (latParam && lonParam) {
        const parsedLat = parseFloat(latParam);
        const parsedLon = parseFloat(lonParam);
        if (!isNaN(parsedLat) && !isNaN(parsedLon)) {
            targetLat = parsedLat;
            targetLon = parsedLon;
            initialCenter = [parsedLon, parsedLat];
            
            // Uniquement rechercher la photo proche si no_auto_load n'est pas activé (ex: post-suppression)
            if (urlParams.get('no_auto_load') !== 'true') {
                urlCoordinatesProvided = true;
            }

            const parsedZoom = parseFloat(zoomParam);
            if (zoomParam && !isNaN(parsedZoom)) {
                initialZoom = parsedZoom;
            } else {
                initialZoom = 20; // Zoom par défaut
            }
        }
    }

    // Initialisation de la carte MapLibre GL
    const map = new maplibregl.Map({
        container: 'custom-map',
        style: '{{ MAP_STYLE_LIGHT }}',
        center: initialCenter,
        zoom: initialZoom
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-left');

    // Custom Home Control to reset view to Brussels
    class HomeControl {
        onAdd(map) {
            this._map = map;
            this._container = document.createElement('div');
            this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
            
            const button = document.createElement('button');
            button.className = 'maplibregl-ctrl-icon custom-home-ctrl-btn';
            button.type = 'button';
            button.title = "{% translate 'Recadrer sur Bruxelles' %}";
            button.innerHTML = '<i class="bi bi-house-door-fill text-primary" style="font-size: 16px;"></i>';
            
            button.addEventListener('click', () => {
                this._map.flyTo({
                    center: [4.3517, 50.8503],
                    zoom: 12,
                    speed: 1.2
                });
            });
            
            this._container.appendChild(button);
            return this._container;
        }
        
        onRemove() {
            this._container.parentNode.removeChild(this._container);
            this._map = undefined;
        }
    }
    map.addControl(new HomeControl(), 'top-left');

    // Add address autocomplete search control
    const searchCtrl = new AddressSearchControl({
        autocompleteUrl: "{% url 'common:autocomplete_street' %}",
        placeholder: "{% translate 'Rechercher une adresse…' %}",
        markerDraggable: false
    });
    document.getElementById('custom-map').appendChild(searchCtrl.onAdd(map));

    let currentMarker = null;

    // Fonction de calcul de distance (Haversine)
    function getDistance(lat1, lon1, lat2, lon2) {
        const R = 6371000; // Rayon de la Terre en mètres
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                  Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c;
    }

    // Recherche de la photo la plus proche dans un rayon de 10m et la plus récente
    function searchAndLoadNearestPicture(lat, lon) {
        // Calcul du bbox (marge d'environ 15 mètres en degrés)
        const latMargin = 15 / 111111;
        const lonMargin = 15 / (111111 * Math.cos(lat * Math.PI / 180));
        
        const minLat = lat - latMargin;
        const maxLat = lat + latMargin;
        const minLon = lon - lonMargin;
        const maxLon = lon + lonMargin;

        const searchUrl = `${panoramaxApiUrl.replace(/\/$/, '')}/search?bbox=${minLon},${minLat},${maxLon},${maxLat}&limit=100`;

        fetch(searchUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                const features = data.features || [];
                
                // Filtrer précisément dans un rayon de 10 mètres
                const featuresWithin10m = features.filter(f => {
                    if (!f.geometry || !f.geometry.coordinates) return false;
                    const coords = f.geometry.coordinates; // [lon, lat]
                    const dist = getDistance(lat, lon, coords[1], coords[0]);
                    return dist <= 10;
                });

                if (featuresWithin10m.length > 0) {
                    // Trier par date décroissante (plus récente en premier)
                    featuresWithin10m.sort((a, b) => {
                        const dateA = new Date(a.properties.datetime || 0);
                        const dateB = new Date(b.properties.datetime || 0);
                        return dateB - dateA;
                    });

                    const closestPic = featuresWithin10m[0];
                    const picId = closestPic.id;

                    const viewerEl = document.getElementById('panoramax-viewer');
                    if (viewerEl && picId) {
                        viewerEl.setAttribute('picture', picId);
                        const overlay = document.getElementById('viewer-placeholder-overlay');
                        if (overlay) overlay.classList.add('hidden');
                    }
                } else {
                    console.warn(`[Panoramax] Aucune photo trouvée dans un rayon de 10 mètres autour de (${lat}, ${lon}).`);
                }
            })
            .catch(err => {
                console.error("[Panoramax] Erreur lors de la recherche STAC de photos proches :", err);
            });
    }

    // Fonction de mise à jour du marqueur directionnel
    function updateMarker(lat, lon, heading) {
        if (!currentMarker) {
            const markerEl = document.createElement('div');
            markerEl.className = 'active-marker';
            markerEl.innerHTML = `
                <div class="marker-cone"></div>
                <div class="marker-dot"></div>
                <div class="marker-pulse"></div>
            `;
            currentMarker = new maplibregl.Marker({ element: markerEl })
                .setLngLat([lon, lat])
                .addTo(map);
        } else {
            currentMarker.setLngLat([lon, lat]);
        }

        const cone = currentMarker.getElement().querySelector('.marker-cone');
        if (cone && heading !== undefined && heading !== null) {
            cone.style.transform = `translateX(-50%) rotate(${heading}deg)`;
        }
    }

    // Chargement des couches de tuiles vectorielles Panoramax
    map.on('load', () => {
        map.addSource('panoramax-tiles', {
            type: 'vector',
            tiles: [
                `${panoramaxApiUrl.replace(/\/$/, '')}/map/{z}/{x}/{y}.mvt`
            ],
            minzoom: 0,
            maxzoom: 15
        });

        // Tracés de séquences (lignes)
        map.addLayer({
            id: 'panoramax-sequences',
            type: 'line',
            source: 'panoramax-tiles',
            'source-layer': 'sequences',
            paint: {
                'line-color': '#10b981', // Émeraude premium
                'line-width': 4,
                'line-opacity': 0.85
            },
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            }
        });

        // Positions des photos (points cliquables)
        map.addLayer({
            id: 'panoramax-pictures',
            type: 'circle',
            source: 'panoramax-tiles',
            'source-layer': 'pictures',
            paint: {
                'circle-color': '#3b82f6', // Bleu premium
                'circle-radius': 5,
                'circle-stroke-width': 1.5,
                'circle-stroke-color': '#ffffff'
            }
        });

        // Curseur interactif
        map.on('mouseenter', 'panoramax-pictures', () => {
            map.getCanvas().style.cursor = 'pointer';
        });
        map.on('mouseleave', 'panoramax-pictures', () => {
            map.getCanvas().style.cursor = '';
        });

        // Clic sur un point photo
        map.on('click', 'panoramax-pictures', (e) => {
            const features = map.queryRenderedFeatures(e.point, { layers: ['panoramax-pictures'] });
            if (features.length > 0) {
                const f = features[0];
                const picId = f.properties.id;
                const viewer = document.getElementById('panoramax-viewer');
                if (viewer && picId) {
                    viewer.setAttribute('picture', picId);
                    const overlay = document.getElementById('viewer-placeholder-overlay');
                    if (overlay) overlay.classList.add('hidden');
                }
            }
        });

        applyFilters();

        if (urlCoordinatesProvided && targetLat !== null && targetLon !== null) {
            searchAndLoadNearestPicture(targetLat, targetLon);
        }
    });

    // Filtres utilisateur et date synchronisés
    const userFilterSelect = document.getElementById('user-filter');
    const dateStartInput = document.getElementById('date-start');
    const dateEndInput = document.getElementById('date-end');
    const clearDatesBtn = document.getElementById('clear-dates-btn');
    const presetButtons = document.querySelectorAll('.date-preset-btn');
    
    let selectedPreset = 'all';
    let selectedTimelineDate = null;

    // Calcul de la date de début pour les presets
    function getPresetStartDate(preset) {
        if (preset === 'all') return null;
        const now = new Date();
        if (preset === '1m') {
            now.setMonth(now.getMonth() - 1);
        } else if (preset === '3m') {
            now.setMonth(now.getMonth() - 3);
        } else if (preset === '6m') {
            now.setMonth(now.getMonth() - 6);
        } else if (preset === '1y') {
            now.setFullYear(now.getFullYear() - 1);
        }
        const y = now.getFullYear();
        const m = String(now.getMonth() + 1).padStart(2, '0');
        const d = String(now.getDate()).padStart(2, '0');
        return `${y}-${m}-${d}`;
    }

    // Mise à jour de la timeline des 5 dernières dates visibles sur la carte
    function updateVisibleDatesTimeline() {
        const container = document.getElementById('timeline-container');
        const timelineList = document.getElementById('timeline-dates');

        // Visible uniquement à partir d'un zoom de 14 et si la couche existe
        if (map.getZoom() < 14 || !map.getLayer('panoramax-pictures')) {
            container.style.display = 'none';
            return;
        }

        const features = map.queryRenderedFeatures({ layers: ['panoramax-pictures'] });
        const visibleDates = new Set();

        features.forEach(f => {
            const seqStr = (f.properties.sequences || '') + ',' + (f.properties.first_sequence || '');
            allSequences.forEach(seq => {
                if (seq.date && seqStr.includes(seq.id)) {
                    visibleDates.add(seq.date);
                }
            });
        });

        const sortedDates = Array.from(visibleDates).sort().reverse();
        const top5Dates = sortedDates.slice(0, 5);

        if (top5Dates.length === 0) {
            container.style.display = 'none';
            return;
        }

        container.style.display = 'flex';
        timelineList.innerHTML = '';

        top5Dates.forEach(date => {
            const parts = date.split('-');
            const displayDate = parts.length === 3 ? `${parts[2]}/${parts[1]}/${parts[0].slice(2)}` : date;

            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-xs timeline-date-btn';
            if (selectedTimelineDate === date) {
                btn.classList.add('active');
            }
            btn.innerText = displayDate;
            
            btn.addEventListener('click', () => {
                if (selectedTimelineDate === date) {
                    selectedTimelineDate = null;
                } else {
                    selectedTimelineDate = date;
                }
                applyFilters();
            });

            const li = document.createElement('li');
            li.appendChild(btn);
            timelineList.appendChild(li);
        });
    }

    // Application globale des filtres (User + Date)
    function applyFilters() {
        const selectedUser = userFilterSelect.value;
        if (!map.getSource('panoramax-tiles')) return;

        let startDate = null;
        let endDate = null;

        if (selectedTimelineDate) {
            startDate = selectedTimelineDate;
            endDate = selectedTimelineDate;
        } else if (dateStartInput.value || dateEndInput.value) {
            startDate = dateStartInput.value || null;
            endDate = dateEndInput.value || null;
        } else {
            startDate = getPresetStartDate(selectedPreset);
        }

        // Filtrer les séquences
        const filteredSeqs = allSequences.filter(seq => {
            if (selectedUser && seq.user !== selectedUser) return false;
            if (startDate && (!seq.date || seq.date < startDate)) return false;
            if (endDate && (!seq.date || seq.date > endDate)) return false;
            return true;
        });

        const filteredSeqIds = filteredSeqs.map(s => s.id);

        if (filteredSeqIds.length === 0) {
            map.setFilter('panoramax-sequences', ['==', 'id', 'non-existent-id']);
            map.setFilter('panoramax-pictures', ['==', 'id', 'non-existent-id']);
        } else {
            map.setFilter('panoramax-sequences', ['in', 'id', ...filteredSeqIds]);
            
            const picFilter = ['any'];
            for (const seqId of filteredSeqIds) {
                picFilter.push(['in', seqId, ['get', 'sequences']]);
            }
            map.setFilter('panoramax-pictures', picFilter);
        }

        // Mettre à jour l'affichage de la timeline
        updateVisibleDatesTimeline();
    }

    // Événements d'interaction filtres
    userFilterSelect.addEventListener('change', () => {
        selectedTimelineDate = null;
        applyFilters();
    });

    presetButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            presetButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            selectedPreset = btn.getAttribute('data-preset');
            
            dateStartInput.value = '';
            dateEndInput.value = '';
            selectedTimelineDate = null;
            applyFilters();
        });
    });

    const resetPresetState = () => {
        presetButtons.forEach(b => b.classList.remove('active'));
        document.querySelector('[data-preset="all"]').classList.add('active');
        selectedPreset = 'all';
        selectedTimelineDate = null;
    };

    dateStartInput.addEventListener('change', () => {
        resetPresetState();
        applyFilters();
    });

    dateEndInput.addEventListener('change', () => {
        resetPresetState();
        applyFilters();
    });

    clearDatesBtn.addEventListener('click', () => {
        dateStartInput.value = '';
        dateEndInput.value = '';
        resetPresetState();
        applyFilters();
    });

    // Recalculer la timeline à chaque mouvement de carte ou zoom
    map.on('moveend', updateVisibleDatesTimeline);

    // Écoute de l'événement de sélection du visualiseur 360
    const viewer = document.getElementById('panoramax-viewer');
    const metaToggleBtn = document.getElementById('meta-toggle-btn');
    const metadataPanel = document.getElementById('metadata-panel');
    const metaCloseBtn = document.getElementById('meta-close-btn');

    metaToggleBtn.addEventListener('click', () => {
        metadataPanel.classList.toggle('d-none');
    });
    metaCloseBtn.addEventListener('click', () => {
        metadataPanel.classList.add('d-none');
    });

    const btnDeletePicture = document.getElementById('btn-delete-picture');
    const btnDeleteCollection = document.getElementById('btn-delete-collection');

    function reloadMapWithoutActivePicture() {
        const center = map.getCenter();
        const zoom = map.getZoom();
        const cleanUrl = new URL(window.location.href);
        cleanUrl.searchParams.set('lat', center.lat.toFixed(6));
        cleanUrl.searchParams.set('lon', center.lng.toFixed(6));
        cleanUrl.searchParams.set('zoom', zoom.toFixed(1));
        cleanUrl.searchParams.set('no_auto_load', 'true');
        cleanUrl.searchParams.delete('pic');
        cleanUrl.searchParams.delete('picture');
        cleanUrl.searchParams.delete('focus');
        cleanUrl.searchParams.delete('seq');
        cleanUrl.searchParams.delete('map');
        cleanUrl.searchParams.delete('speed');
        cleanUrl.searchParams.delete('theme');
        cleanUrl.searchParams.delete('users');
        cleanUrl.searchParams.delete('xyz');
        cleanUrl.hash = '';
        window.location.href = cleanUrl.pathname + cleanUrl.search;
    }

    btnDeletePicture.addEventListener('click', async () => {
        const seqId = btnDeletePicture.getAttribute('data-seq-id');
        const picId = btnDeletePicture.getAttribute('data-pic-id');
        if (!seqId || !picId) return;

        if (confirm("{% translate 'Êtes-vous sûr de vouloir supprimer définitivement cette photo de Panoramax ?' %}")) {
            btnDeletePicture.disabled = true;
            try {
                const response = await fetch(`/panoramax/collections/${seqId}/items/${picId}/delete/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                    }
                });
                if (response.ok) {
                    reloadMapWithoutActivePicture();
                } else {
                    const errText = await response.text();
                    alert("{% translate 'Erreur lors de la suppression :' %} " + errText);
                }
            } catch (err) {
                alert("{% translate 'Une erreur réseau s\'est produite.' %}");
                console.error(err);
            } finally {
                btnDeletePicture.disabled = false;
            }
        }
    });

    btnDeleteCollection.addEventListener('click', async () => {
        const seqId = btnDeleteCollection.getAttribute('data-seq-id');
        if (!seqId) return;

        if (confirm("{% translate 'ATTENTION : Êtes-vous sûr de vouloir supprimer définitivement toute cette séquence (collection) et toutes ses photos ? Cette action est irréversible.' %}")) {
            btnDeleteCollection.disabled = true;
            try {
                const response = await fetch(`/panoramax/collections/${seqId}/delete/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                    }
                });
                if (response.ok) {
                    reloadMapWithoutActivePicture();
                } else {
                    const errText = await response.text();
                    alert("{% translate 'Erreur lors de la suppression :' %} " + errText);
                }
            } catch (err) {
                alert("{% translate 'Une erreur réseau s\'est produite.' %}");
                console.error(err);
            } finally {
                btnDeleteCollection.disabled = false;
            }
        }
    });

    viewer.addEventListener('select', async (e) => {
        const { seqId, picId } = e.detail;
        if (picId && seqId) {
            // Masquer l'overlay si non fait
            const overlay = document.getElementById('viewer-placeholder-overlay');
            if (overlay) overlay.classList.add('hidden');

            // Nettoyer no_auto_load de l'URL s'il est présent
            const currentUrl = new URL(window.location.href);
            if (currentUrl.searchParams.has('no_auto_load')) {
                currentUrl.searchParams.delete('no_auto_load');
                window.history.replaceState({}, '', currentUrl.pathname + currentUrl.search + currentUrl.hash);
            }

            try {
                const response = await fetch(`${panoramaxApiUrl.replace(/\/$/, '')}/collections/${seqId}/items/${picId}`);
                if (response.ok) {
                    const item = await response.json();
                    const coords = item.geometry.coordinates;
                    const heading = item.properties.heading;

                    updateMarker(coords[1], coords[0], heading);

                    // Recadrage dynamique fluide
                    map.easeTo({
                        center: coords,
                        zoom: Math.max(map.getZoom(), 15),
                        duration: 600
                    });

                    // Extraction et affichage des métadonnées
                    const filename = item.properties['original_file:name'] || '--';
                    const dateRaw = item.properties.datetime || '';
                    const dateFormatted = dateRaw ? new Date(dateRaw).toLocaleString('fr-FR') : '--';
                    const positionFormatted = coords ? `${coords[1].toFixed(6)}, ${coords[0].toFixed(6)}` : '--';
                    
                    const exif = item.properties.exif || {};
                    let altitude = exif['Exif.GPSInfo.GPSAltitude'] || '--';
                    if (altitude && altitude.includes('/')) {
                        const parts = altitude.split('/');
                        altitude = (parseFloat(parts[0]) / parseFloat(parts[1])).toFixed(1) + ' m';
                    }
                    
                    const camera = exif['Exif.Image.Model'] || exif['Exif.Image.Make'] || '--';
                    const azimuth = item.properties['view:azimuth'] !== undefined ? `${item.properties['view:azimuth']}°` : '--';
                    const producer = item.properties['geovisio:producer'] || '--';
                    const license = item.properties.license || '--';

                    let resolution = '--';
                    if (item.properties['pers:interior_orientation'] && item.properties['pers:interior_orientation'].sensor_array_dimensions) {
                        const dims = item.properties['pers:interior_orientation'].sensor_array_dimensions;
                        resolution = `${dims[0]} × ${dims[1]}`;
                    } else if (exif['Xmp.GPano.FullPanoWidthPixels'] && exif['Xmp.GPano.FullPanoHeightPixels']) {
                        resolution = `${exif['Xmp.GPano.FullPanoWidthPixels']} × ${exif['Xmp.GPano.FullPanoHeightPixels']}`;
                    }

                    document.getElementById('meta-filename').innerText = filename;
                    document.getElementById('meta-date').innerText = dateFormatted;
                    document.getElementById('meta-position').innerText = positionFormatted;
                    document.getElementById('meta-altitude').innerText = altitude;
                    document.getElementById('meta-azimuth').innerText = azimuth;
                    document.getElementById('meta-camera').innerText = camera;
                    document.getElementById('meta-resolution').innerText = resolution;
                    document.getElementById('meta-producer').innerText = producer;
                    document.getElementById('meta-license').innerText = license;

                    // Contrôle d'affichage des boutons de suppression
                    const seqInfo = allSequences.find(s => s.id === seqId);
                    const isOwner = seqInfo && seqInfo.user === currentUsername;
                    const canDelete = isOwner || isStaffOrSuperuser;

                    const actionsDiv = document.getElementById('metadata-actions');
                    if (canDelete) {
                        actionsDiv.classList.remove('d-none');
                        btnDeletePicture.setAttribute('data-seq-id', seqId);
                        btnDeletePicture.setAttribute('data-pic-id', picId);
                        btnDeleteCollection.setAttribute('data-seq-id', seqId);
                    } else {
                        actionsDiv.classList.add('d-none');
                        btnDeletePicture.removeAttribute('data-seq-id');
                        btnDeletePicture.removeAttribute('data-pic-id');
                        btnDeleteCollection.removeAttribute('data-seq-id');
                    }

                    // Rendre visible le bouton de métadonnées
                    metaToggleBtn.classList.remove('d-none');
                }
            } catch (err) {
                console.error("Erreur lors de la synchronisation de la photo active:", err);
            }

            // Synchronisation de la rotation
            const setupRotationListener = () => {
                if (viewer.psv) {
                    if (!viewer.psv._customRotAdded) {
                        viewer.psv._customRotAdded = true;
                        viewer.psv.addEventListener('view-rotated', (evt) => {
                            const heading = evt.detail.x;
                            if (currentMarker && heading !== undefined && heading !== null) {
                                const cone = currentMarker.getElement().querySelector('.marker-cone');
                                if (cone) {
                                    cone.style.transform = `translateX(-50%) rotate(${heading}deg)`;
                                }
                            }
                        });
                    }
                } else {
                    setTimeout(setupRotationListener, 100);
                }
            };
            setupRotationListener();
        }
    });
</script>
{% endblock script %}