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

{% block content %}
{% set trip_route = config.site.active_trip %}
{% set trip = grav.pages.find(trip_route) %}

{% if config.site.travelling %}
{# ══════════════════════════════════════════════════════════ ACTIVE TRIP MODE #}

{% set dailies_page = grav.pages.find(trip_route ~ '/dailies') %}
{% set stories_page = grav.pages.find(trip_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', 3) %}

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

{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            '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
        }]) %}
    {% endif %}
{% endfor %}

{% set home_gpx_urls = [] %}
{% if trip %}
    {% for name, media in trip.media.all %}
        {% if name|split('.')|last == 'gpx' %}
            {% set home_gpx_urls = home_gpx_urls|merge([trip.url ~ '/' ~ name]) %}
        {% endif %}
    {% endfor %}
{% endif %}

<div class="home-layout">
    <div class="home-map-col">
        <div class="home-map" id="home-map"></div>
    </div>

    <div class="home-feed-col">
        <div class="home-trip-header">
            <h1 class="home-trip-name">{{ trip ? trip.title : trip_route }}</h1>
            <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>

        <div class="feed">
            {% if all_items|length > 0 %}
                {% for item in all_items %}
                    {% set entry = item.page %}

                    {% if item.type == 'journal' %}
                    {% set weather_icons = {
                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
                        'Snow': '❄️', 'Thunderstorm': '⛈️'
                    } %}
                    <article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
                        <header class="journal-post-header">
                            <h2 class="journal-post-title">{{ entry.title }}</h2>
                            <p class="journal-post-meta">
                                <a class="journal-post-permalink" href="{{ entry.url }}">
                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
                                </a>
                                {% if entry.header.location_city or entry.header.location_country %}
                                <span class="journal-post-location">
                                    · 📍
                                    {%- set _loc = [] -%}
                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
                                    {{ _loc|join(', ') }}
                                </span>
                                {% endif %}
                                {% if entry.header.weather_desc %}
                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
                                {% endif %}
                            </p>
                        </header>

                        {% set images = entry.media.images %}
                        {% if images|length > 0 %}
                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
                            {% for img in images %}
                            <div class="journal-photo-slide">
                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
                            </div>
                            {% endfor %}
                        </div>
                        {% if images|length > 1 %}
                        <div class="journal-photo-dots" aria-hidden="true">
                            {% for img in images %}
                            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
                            {% endfor %}
                        </div>
                        {% endif %}
                        {% endif %}

                        <div class="journal-post-body">{{ entry.content|raw }}</div>
                    </article>
                    {% else %}
                    {% set hero = null %}
                    {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
                        {% set hero = entry.media[entry.header.hero_image] %}
                    {% elseif entry.media.images|length > 0 %}
                        {% set hero = entry.media.images|first %}
                    {% endif %}
                    <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" href="{{ entry.url }}">
                        {% if hero %}
                        <div class="entry-card-photo entry-card-photo--story">
                            <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
                        </div>
                        {% endif %}
                        <div class="entry-card-body">
                            <span class="story-badge">✦ Story</span>
                            <h2 class="entry-title">{{ entry.title }}</h2>
                        </div>
                    </a>
                    {% endif %}
                {% endfor %}
            {% else %}
                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
            {% endif %}
        </div>
    </div>
</div>

{% if map_entries|length > 0 %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
{% if home_gpx_urls|length > 0 %}
<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
{% endif %}
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
var HOME_ENTRIES  = {{ map_entries|json_encode|raw }};
var HOME_GPX_URLS = {{ home_gpx_urls|json_encode|raw }};

var homeMap = new maplibregl.Map({
    container: 'home-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2
});

homeMap.on('load', function () {
    var bounds = new maplibregl.LngLatBounds();
    var coords = [];

    HOME_ENTRIES.forEach(function (entry, i) {
        var isLatest = (i === HOME_ENTRIES.length - 1);
        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
        coords.push(lngLat);
        bounds.extend(lngLat);

        var el = 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(homeMap); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () {
            var card = document.getElementById('entry-' + entry.slug);
            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });

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

    /* Draw simple journey line immediately; replaced below if GPX is present */
    MapUtils.addJourneyLine(homeMap, coords, 'home-journey');

    if (HOME_ENTRIES.length === 1) {
        homeMap.jumpTo({ center: coords[0], zoom: 10 });
    } else {
        homeMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
    }

    setTimeout(function () { homeMap.resize(); }, 100);

    if (HOME_GPX_URLS.length > 0) {
        Promise.all(HOME_GPX_URLS.map(function (url, idx) {
            return fetch(url)
                .then(function (r) { return r.text(); })
                .then(function (text) {
                    var xml     = new DOMParser().parseFromString(text, 'text/xml');
                    var geojson = toGeoJSON.gpx(xml);
                    var sid     = 'home-gpx-' + idx;
                    homeMap.addSource(sid, { type: 'geojson', data: geojson });
                    homeMap.addLayer({
                        id: sid + '-line', type: 'line', source: sid,
                        layout: { 'line-join': 'round', 'line-cap': 'round' },
                        paint:  { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
                    });
                    return MapUtils.extractTrackpoints(geojson);
                })
                .catch(function (err) { console.warn('GPX load failed:', url, err); return []; });
        })).then(function (allTrackpoints) {
            if (homeMap.getLayer('home-journey')) homeMap.removeLayer('home-journey');
            if (homeMap.getSource('home-journey')) homeMap.removeSource('home-journey');
            var valid    = allTrackpoints.filter(function (tp) { return tp.length > 0; });
            var segments = MapUtils.buildJourneySegments(HOME_ENTRIES, valid, 10);
            MapUtils.addJourneySegments(homeMap, segments, 'home-journey');
        });
    }
});
</script>
{% endif %}

{% else %}
{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
{% endif %}

{% endblock %}