{% extends 'partials/base.html.twig' %}

{% block content %}
{% import 'macros/stats.html.twig' as stats_m %}
{% import 'macros/cycling.html.twig' as cycling_m %}
{% block map_assets %}
{% do assets.addCss('theme://css-compiled/map.css') %}
{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
{% endblock %}
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
{% set stories_page = grav.pages.find(page.route ~ '/stories') %}
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
{% set story_entries = stories_page ? stories_page.children.published() : [] %}

{% set all_items = [] %}
{% for e in journal_entries %}
    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
{% endfor %}
{% set all_items = all_items|sort_by_key('date', 4) %}

{% set journal_count = journal_entries|length %}
{% set story_count = story_entries|length %}

{% set gps_points = [] %}
{% for entry in journal_entries %}
    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
        {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
    {% endif %}
{% endfor %}

{% set gpx_urls = [] %}
{% for name, media in page.media.all %}
    {% if name|split('.')|last == 'gpx' %}
        {% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
    {% endif %}
{% endfor %}
{% set has_gpx = gpx_urls|length > 0 %}

{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'type': item.type,
            'lat': item.page.header.lat|number_format(6, '.', ''),
            'lng': item.page.header.lng|number_format(6, '.', ''),
            'slug': item.page.slug,
            'title': item.page.title,
            'url': item.page.url,
            'force_connect': item.page.header.force_connect ? true : false,
            'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
        }]) %}
    {% endif %}
{% endfor %}

<div class="home-layout">
    <div class="home-map-col">
        <div class="home-map" id="trip-map">
            <button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
                <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                    <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
                </svg>
                <span class="feed-map-fs-close" aria-hidden="true">✕</span>
            </button>
        </div>
    </div>

    <div class="home-feed-col">
        <div class="home-trip-header">
            <h1 class="home-trip-name">{{ page.title }}</h1>
            {% if page.header.date_start %}
            <p class="trip-dates" style="font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-1) 0 var(--space-2);">
                {{ page.header.date_start|date('d M Y') }}
                {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
            </p>
            {% endif %}
            <span class="home-trip-counts">
                {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
                {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
            </span>
            <div class="trip-filter-bar">
                <div class="trip-filter-group">
                    <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
                    <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
                    <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
                </div>
                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
            </div>
            <div class="trip-panel-toggles">
                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
                {% if has_gpx %}
                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
                {% endif %}
            </div>
        </div>

        {{ stats_m.stats_panel(journal_entries, page, journal_count, has_gpx) }}

        {% if has_gpx %}
        {{ cycling_m.cycling_panel() }}
        {% endif %}

        <div class="feed">
            {% if all_items|length > 0 %}
                {% for item in all_items %}
                    {% set entry = item.page %}
                    {% if item.type == 'journal' %}
                        {% include 'partials/entry-journal.html.twig' %}
                    {% else %}
                        {% include 'partials/entry-story.html.twig' %}
                    {% endif %}
                {% endfor %}
            {% else %}
                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
            {% endif %}
            <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
        </div>
    </div>
</div>

<script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
var USE_GPX      = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
var AUTOCONNECT  = "{{ page.header.autoconnect ?? 'on' }}";

document.addEventListener('DOMContentLoaded', function() {

var tripMap = new maplibregl.Map({
    container: 'trip-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2,
    attributionControl: false
});
tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');

tripMap.on('load', function () {
    if (TRIP_ENTRIES.length === 0) {
        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
        return;
    }

    /* ── Markers + bounds ──────────────────────────────────────── */
    var bounds = new maplibregl.LngLatBounds();

    TRIP_ENTRIES.forEach(function (entry, i) {
        var isLatest = (entry.type !== 'story') && (i === TRIP_ENTRIES.length - 1);
        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
        bounds.extend(lngLat);

        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
        el.dataset.url = entry.url;
        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
            .setLngLat(lngLat)
            .setHTML('<span class="map-tip">' + entry.title + '</span>');
        el.addEventListener('mouseenter', function () { popup.addTo(tripMap); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () {
            var card = document.getElementById('entry-' + entry.slug);
            if (!card) return;
            var mapCol = document.querySelector('.home-map-col');
            var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
            function scrollAndHighlight() {
                window.location.hash = 'entry-' + entry.slug;
                setTimeout(function () {
                    card.classList.add('is-highlighted');
                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
                }, 350);
            }
            if (isFs) {
                var fsBtn = document.getElementById('trip-map-fullscreen');
                if (fsBtn) fsBtn.click();
                setTimeout(scrollAndHighlight, 450);
            } else {
                scrollAndHighlight();
            }
        });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
    });

    /* ── Fit bounds ─────────────────────────────────────────────── */
    if (TRIP_ENTRIES.length === 1) {
        tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
    } else {
        tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
    }

    /* ── GPX tracks + journey segments ─────────────────────────── */
    MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });

    // Collapse attribution <details> which MapLibre may open on load
    var attrib = tripMap.getContainer().querySelector('.maplibregl-ctrl-attrib');
    if (attrib) attrib.removeAttribute('open');
});
setTimeout(function () { tripMap.resize(); }, 100);

(function() {
    var fsBtn = document.getElementById('trip-map-fullscreen');
    var mapCol = document.querySelector('.home-map-col');
    if (!fsBtn || !mapCol) return;
    fsBtn.addEventListener('click', function() {
        var isFs = mapCol.classList.toggle('is-fullscreen');
        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
        document.body.style.overflow = isFs ? 'hidden' : '';
        setTimeout(function() { tripMap.resize(); }, 50);
    });
})();

var STATS_GPS = {{ gps_points|json_encode|raw }};
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};

(function() {
    var distEl = document.getElementById('stat-distance');

    if (HAS_GPX) {
        MapUtils.parseGpxFiles(GPX_URLS, function(result) {
            if (distEl) {
                distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
            }
            function setText(id, val) {
                var el = document.getElementById(id);
                if (el) el.textContent = val;
            }
            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
            setText('cyc-moving-time', result.movingTime || '—');
            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
        });
    } else {
        var total = 0;
        for (var i = 1; i < STATS_GPS.length; i++) {
            total += MapUtils.haversineKm(
                parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
                parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
            );
        }
        if (distEl) {
            distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
        }
    }

})();

}); // DOMContentLoaded
</script>

<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>

{% endblock %}