{# Widget « Carte d'itinéraire » — parcours à étapes datées sur fond OpenStreetMap.

   Leaflet est auto-hébergé et chargé paresseusement par le partial
   _leaflet-loader (une seule fois par page, même avec plusieurs cartes, y
   compris des cartes de lieux). Les états des étapes (passée / aujourd'hui / à
   venir) sont calculés côté serveur : la liste de repli sous la carte reste
   juste même sans JavaScript, et sert de contenu indexable. #}

<div class="izi-routemap" id="{{ widgetId }}" style="--izi-rm-accent: {{ accentColor }};">
    {% if title %}<h3 class="izi-routemap__title">{{ title }}</h3>{% endif %}

    {% if stages is empty %}
        <div class="izi-routemap__empty">
            <i class="fa-solid fa-route" aria-hidden="true"></i>
            <p>{{ emptyText }}</p>
        </div>
    {% else %}
        {% if showProgress %}
            <div class="izi-routemap__progress">
                <div class="izi-routemap__progress-item">
                    <span class="izi-routemap__progress-value">{{ stagesReached }}/{{ stages|length }}</span>
                    <span class="izi-routemap__progress-label">étapes</span>
                </div>
                {% if kmTotal > 0 %}
                    <div class="izi-routemap__progress-bar" role="img"
                         aria-label="{{ kmDone|round }} km parcourus sur {{ kmTotal|round }}">
                        <div class="izi-routemap__progress-fill"
                             style="width: {{ kmTotal > 0 ? ((kmDone / kmTotal * 100)|round) : 0 }}%;"></div>
                    </div>
                    <div class="izi-routemap__progress-item">
                        <span class="izi-routemap__progress-value">{{ kmDone|round }}<small> km</small></span>
                        <span class="izi-routemap__progress-label">sur {{ kmTotal|round }} km</span>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        {% if mappable is not empty %}
            <div class="izi-routemap__map" data-izi-routemap style="height: {{ height }};"
                 aria-label="Carte de l'itinéraire{{ title ? ' : ' ~ title : '' }}"></div>
            <script type="application/json" data-izi-routemap-data>
                {{ {
                    'stages': mappable,
                    'showLine': showLine ? true : false,
                    'accent': accentColor,
                }|json_encode|raw }}
            </script>
        {% endif %}

        {# Liste de repli : lisible sans JavaScript, indexable, accessible. #}
        <details class="izi-routemap__list" {{ mappable is empty ? 'open' : '' }}>
            <summary>Voir le détail des étapes</summary>
            <ol>
                {% for stage in stages %}
                    <li class="izi-routemap__stage izi-routemap__stage--{{ stage.status }}">
                        <span class="izi-routemap__stage-marker" aria-hidden="true">{{ stage.number }}</span>
                        <div>
                            <strong>Étape {{ stage.number }} — {{ stage.name }}</strong>
                            {% if stage.date %}
                                <span class="izi-routemap__stage-date">{{ stage.date|date('d/m/Y') }}</span>
                            {% endif %}
                            {% if stage.km > 0 %}
                                <span class="izi-routemap__stage-km">{{ stage.km|round }} km</span>
                            {% endif %}
                            {% if stage.description %}
                                <p>{{ stage.description }}</p>
                            {% endif %}
                            {% if stage.link %}
                                <a href="{{ stage.link }}">Lire le récit de l'étape</a>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ol>
        </details>
    {% endif %}
</div>

<style>
    .izi-routemap {
        max-width: 1080px;
        margin: 0 auto;
        padding: 20px;
    }

    .izi-routemap__title {
        margin: 0 0 18px 0;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
        color: var(--color-text, #1e293b);
    }

    .izi-routemap__empty {
        padding: 60px 20px;
        text-align: center;
        color: var(--color-text-light, #64748b);
        background: var(--color-surface, #f8fafc);
        border: 1px dashed var(--color-border, #cbd5e1);
        border-radius: var(--radius-lg, 14px);
    }

    .izi-routemap__empty i {
        font-size: 36px;
        color: var(--izi-rm-accent);
        margin-bottom: 12px;
        display: block;
    }

    .izi-routemap__empty p { margin: 0; font-size: 16px; }

    .izi-routemap__progress {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 14px 22px;
        margin-bottom: 16px;
        background: var(--color-surface, #f8fafc);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-lg, 14px);
    }

    .izi-routemap__progress-item { text-align: center; white-space: nowrap; }

    .izi-routemap__progress-value {
        display: block;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.1;
        color: var(--izi-rm-accent);
    }

    .izi-routemap__progress-value small { font-size: 13px; font-weight: 600; }

    .izi-routemap__progress-label {
        font-size: 12px;
        color: var(--color-text-light, #64748b);
    }

    .izi-routemap__progress-bar {
        flex: 1;
        height: 10px;
        border-radius: 999px;
        background: var(--color-border, #e2e8f0);
        overflow: hidden;
    }

    .izi-routemap__progress-fill {
        height: 100%;
        border-radius: 999px;
        background: var(--izi-rm-accent);
        transition: width 0.6s ease;
    }

    .izi-routemap__map {
        border-radius: var(--radius-lg, 14px);
        overflow: hidden;
        border: 1px solid var(--color-border, #e2e8f0);
        /* Un fond neutre le temps du chargement de Leaflet */
        background: #e8edf2;
        z-index: 0;
    }

    /* Marqueurs d'étapes numérotés (divIcon Leaflet) */
    .izi-rm-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        background: var(--izi-rm-accent, #667eea);
        box-sizing: border-box;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        font-family: system-ui, sans-serif;
    }

    .izi-rm-marker--upcoming { background: #94a3b8; }

    .izi-rm-marker--current {
        width: 26px;
        height: 26px;
        font-size: 12px;
        background: var(--izi-rm-accent, #667eea);
        animation: izi-rm-pulse 1.6s ease-out infinite;
    }

    @keyframes izi-rm-pulse {
        0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); }
        70% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }

    .izi-rm-popup { font-size: 14px; line-height: 1.5; }
    .izi-rm-popup strong { font-size: 15px; }
    .izi-rm-popup__date { color: #64748b; font-size: 12.5px; }
    .izi-rm-popup a { font-weight: 600; }

    .izi-routemap__list {
        margin-top: 16px;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-lg, 14px);
        padding: 12px 18px;
        background: var(--color-surface, #f8fafc);
    }

    .izi-routemap__list summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--color-text, #1e293b);
    }

    .izi-routemap__list ol {
        list-style: none;
        margin: 14px 0 4px 0;
        padding: 0;
    }

    .izi-routemap__stage {
        display: flex;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        font-size: 14.5px;
        color: var(--color-text, #1e293b);
    }

    .izi-routemap__stage:last-child { border-bottom: none; }

    .izi-routemap__stage-marker {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        border-radius: 50%;
        background: var(--izi-rm-accent);
        color: #ffffff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1;
    }

    .izi-routemap__stage--upcoming .izi-routemap__stage-marker { background: #94a3b8; }
    .izi-routemap__stage--upcoming { color: var(--color-text-light, #64748b); }

    .izi-routemap__stage--current .izi-routemap__stage-marker {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--izi-rm-accent) 25%, transparent);
    }

    .izi-routemap__stage-date,
    .izi-routemap__stage-km {
        margin-left: 8px;
        font-size: 12.5px;
        color: var(--color-text-light, #64748b);
    }

    .izi-routemap__stage p { margin: 3px 0 0 0; font-size: 13.5px; }

    .container-on-dark .izi-routemap__title { color: #ffffff; }

    @media (max-width: 560px) {
        .izi-routemap__progress { flex-wrap: wrap; justify-content: center; }
        .izi-routemap__progress-bar { flex-basis: 100%; order: 3; }
    }
</style>

{% include 'sections/_leaflet-loader.html.twig' %}

<script>
    (function () {
        var containers = document.querySelectorAll('[data-izi-routemap]:not([data-izi-rm-bound])');
        if (!containers.length || !window.iziWithLeaflet) return;

        containers.forEach(function (el) {
            el.setAttribute('data-izi-rm-bound', '1');

            var dataNode = el.parentNode.querySelector('[data-izi-routemap-data]');
            if (!dataNode) return;
            var data;
            try { data = JSON.parse(dataNode.textContent); } catch (e) { return; }
            if (!data.stages || !data.stages.length) return;

            window.iziWithLeaflet(function () {
                var map = L.map(el, { scrollWheelZoom: false });

                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(map);

                var accent = data.accent || '#667eea';
                var latlngs = [];
                var doneLatlngs = [];

                data.stages.forEach(function (stage) {
                    var pos = [stage.lat, stage.lng];
                    latlngs.push(pos);
                    if (stage.status !== 'upcoming') doneLatlngs.push(pos);

                    // Le numéro d'étape vit dans le marqueur : il rend l'ordre du
                    // parcours lisible d'un coup d'œil, même étapes resserrées.
                    var current = stage.status === 'current';
                    var marker = L.marker(pos, {
                        icon: L.divIcon({
                            className: '',
                            html: '<span class="izi-rm-marker izi-rm-marker--' + stage.status + '" style="--izi-rm-accent: ' + accent + ';">' + (parseInt(stage.number, 10) || '') + '</span>',
                            iconSize: current ? [26, 26] : [22, 22],
                            iconAnchor: current ? [13, 13] : [11, 11]
                        }),
                        title: 'Étape ' + stage.number + ' — ' + stage.name
                    }).addTo(map);

                    var popup = document.createElement('div');
                    popup.className = 'izi-rm-popup';
                    var strong = document.createElement('strong');
                    strong.textContent = 'Étape ' + stage.number + ' — ' + stage.name;
                    popup.appendChild(strong);
                    if (stage.date) {
                        var d = document.createElement('div');
                        d.className = 'izi-rm-popup__date';
                        d.textContent = stage.date.split('-').reverse().join('/') + (stage.km ? ' — ' + Math.round(stage.km) + ' km' : '');
                        popup.appendChild(d);
                    }
                    if (stage.description) {
                        var p = document.createElement('div');
                        p.textContent = stage.description;
                        popup.appendChild(p);
                    }
                    if (stage.link) {
                        var a = document.createElement('a');
                        a.href = stage.link;
                        a.textContent = 'Lire le récit de l\'étape';
                        popup.appendChild(a);
                    }
                    marker.bindPopup(popup);
                });

                if (data.showLine && latlngs.length > 1) {
                    // Tracé complet discret, portion parcourue en couleur pleine.
                    L.polyline(latlngs, { color: accent, weight: 3, opacity: 0.35, dashArray: '6 8' }).addTo(map);
                    if (doneLatlngs.length > 1) {
                        L.polyline(doneLatlngs, { color: accent, weight: 4, opacity: 0.9 }).addTo(map);
                    }
                }

                map.fitBounds(L.latLngBounds(latlngs), { padding: [30, 30] });
            });
        });
    })();
</script>