{% extends 'base.html.twig' %}
{% import 'components/json_display.html.twig' as jsonDisplay %}
{% import 'components/datalogger_tabs.html.twig' as tabs %}

{% block title %}Trip Details - {{ tripId }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('vendor/leaflet/leaflet.css') }}">
    <style>
        .trip-route-map { height: 380px; width: 100%; border-radius: 0.5rem; overflow: hidden; }
    </style>
{% endblock %}

{% block content %}
{% set tdRaw = tripDetails ?? {} %}
{% set td = tdRaw.trip ?? tdRaw.data ?? tdRaw %}
{% set routePoints = td.route is defined and td.route is iterable ? td.route : [] %}
{% set startLat = td.start_lat ?? null %}
{% set startLon = td.start_lon ?? null %}
{% set endLat = td.end_lat ?? null %}
{% set endLon = td.end_lon ?? null %}
{% set startTime = td.start_datetime ?? td.start_time ?? null %}
{% set endTime = td.end_datetime ?? td.end_time ?? null %}
{% set durationMin = td.duration_minutes ?? td.duration ?? null %}
{% set distanceKm = td.total_distance_km ?? td.distance ?? null %}
{% set avgSpeed = td.avg_speed_kmh ?? null %}
{% set maxSpeed = td.max_speed_kmh ?? null %}
{% set pointCount = td.point_count ?? null %}
{% set stopCount = td.stop_count ?? null %}

<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        {% if datalogger is defined %}
            <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}">{{ datalogger.name }}</a>
            <i class="fas fa-chevron-right"></i>
            <a href="{{ path('app_trips', {id: datalogger.id}) }}">Trips</a>
        {% else %}
            <a href="{{ path('app_trips') }}">Trips</a>
        {% endif %}
        <i class="fas fa-chevron-right"></i>
        <span>{{ tripId }}</span>
    </div>
    <div class="page-title">
        <i class="fas fa-route"></i>
        <h2>Trip Details: {{ tripId }}</h2>
    </div>
</div>

{% if datalogger is defined %}
{{ tabs.renderTabs(datalogger, 'app_trips') }}
{% endif %}

<div class="content-grid">
    <div class="content-main">
        {% if td.error is defined %}
            <div class="alert alert-error">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Fehler:</strong> {{ td.error }}
            </div>
        {% else %}
            <div class="info-card-modern">
                <h3><i class="fas fa-chart-line"></i> Trip-Übersicht</h3>
                <div class="metrics-grid-modern">
                    {% if distanceKm is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern memory"><i class="fas fa-road"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ distanceKm|number_format(2) }} km</span>
                            <span class="metric-label-modern">Distanz</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if durationMin is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern temp"><i class="fas fa-clock"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ durationMin|number_format(1) }} min</span>
                            <span class="metric-label-modern">Dauer</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if avgSpeed is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern cpu"><i class="fas fa-gauge"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ avgSpeed|number_format(1) }} km/h</span>
                            <span class="metric-label-modern">Ø Geschwindigkeit</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if maxSpeed is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern pressure"><i class="fas fa-gauge-high"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ maxSpeed|number_format(1) }} km/h</span>
                            <span class="metric-label-modern">Max. Geschwindigkeit</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if pointCount is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern cpu"><i class="fas fa-location-dot"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ pointCount }}</span>
                            <span class="metric-label-modern">Route-Punkte</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if stopCount is not null %}
                    <div class="metric-item-modern">
                        <div class="metric-icon-modern temp"><i class="fas fa-circle-stop"></i></div>
                        <div class="metric-content-modern">
                            <span class="metric-value-modern">{{ stopCount }}</span>
                            <span class="metric-label-modern">Stops</span>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="info-card-modern">
                <h3><i class="fas fa-map-marker-alt"></i> Start & Ziel</h3>
                <div class="info-grid-modern">
                    <div class="info-item-modern">
                        <span class="info-label-modern">Start</span>
                        <span class="info-value-modern">
                            {% if startTime %}
                                {% if startTime matches('/^-?[0-9]+(?:\\.[0-9]+)?$/') %}
                                    {{ startTime|round|date('d.m.Y H:i:s') }}
                                {% else %}
                                    {{ startTime }}
                                {% endif %}
                            {% else %}
                                -
                            {% endif %}
                        </span>
                        <small class="text-secondary">
                            {% if startLat is not null and startLon is not null %}
                                {{ startLat|number_format(6) }}, {{ startLon|number_format(6) }}
                            {% else %}
                                Keine Koordinaten
                            {% endif %}
                        </small>
                    </div>
                    <div class="info-item-modern">
                        <span class="info-label-modern">Ziel</span>
                        <span class="info-value-modern">
                            {% if endTime %}
                                {% if endTime matches('/^-?[0-9]+(?:\\.[0-9]+)?$/') %}
                                    {{ endTime|round|date('d.m.Y H:i:s') }}
                                {% else %}
                                    {{ endTime }}
                                {% endif %}
                            {% else %}
                                -
                            {% endif %}
                        </span>
                        <small class="text-secondary">
                            {% if endLat is not null and endLon is not null %}
                                {{ endLat|number_format(6) }}, {{ endLon|number_format(6) }}
                            {% else %}
                                Keine Koordinaten
                            {% endif %}
                        </small>
                    </div>
                </div>
                <div class="section-divider">
                    {% if startLat is not null and startLon is not null %}
                        <a href="https://www.google.com/maps?q={{ startLat }},{{ startLon }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
                            <i class="fas fa-play-circle"></i> Start auf Karte
                        </a>
                    {% endif %}
                    {% if endLat is not null and endLon is not null %}
                        <a href="https://www.google.com/maps?q={{ endLat }},{{ endLon }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
                            <i class="fas fa-flag-checkered"></i> Ziel auf Karte
                        </a>
                    {% endif %}
                </div>
            </div>

            {% if routePoints|length > 1 %}
            <div class="info-card-modern">
                <h3><i class="fas fa-map"></i> Route</h3>
                <div id="trip-route-map" class="trip-route-map"></div>
            </div>
            {% endif %}

            <div class="info-card-modern">
                <h3><i class="fas fa-code"></i> Rohdaten (Debug)</h3>
                <details class="card-more-details">
                    <summary><i class="fas fa-chevron-down card-more-summary-icon"></i> JSON anzeigen</summary>
                    <div class="card-more-content">
                        {{ jsonDisplay.displayJson(tdRaw, null) }}
                    </div>
                </details>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% set tdRawJs = tripDetails ?? {} %}
    {% set tdJs = tdRawJs.trip ?? tdRawJs.data ?? tdRawJs %}
    {% set routePointsJs = tdJs.route is defined and tdJs.route is iterable ? tdJs.route : [] %}
    {% if routePointsJs|length > 1 %}
    <script src="{{ asset('vendor/leaflet/leaflet.js') }}"></script>
    <script>
    (function() {
        var mapEl = document.getElementById('trip-route-map');
        if (!mapEl || typeof L === 'undefined') return;
        var rawPoints = {{ routePointsJs|json_encode|raw }};
        if (!Array.isArray(rawPoints) || rawPoints.length < 2) return;

        var latLngs = rawPoints
            .filter(function(p) { return p && p.lat != null && p.lon != null; })
            .map(function(p) { return [Number(p.lat), Number(p.lon)]; })
            .filter(function(p) { return !isNaN(p[0]) && !isNaN(p[1]); });

        if (latLngs.length < 2) return;

        var map = L.map(mapEl, { zoomControl: true });
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        var line = L.polyline(latLngs, { color: '#2563eb', weight: 4, opacity: 0.85 }).addTo(map);
        L.marker(latLngs[0]).addTo(map).bindPopup('Start');
        L.marker(latLngs[latLngs.length - 1]).addTo(map).bindPopup('Ziel');
        map.fitBounds(line.getBounds(), { padding: [20, 20] });
    })();
    </script>
    {% endif %}
{% endblock %}