{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Segments</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="scanSegments()">
            <i class="bi bi-arrow-repeat"></i> Scan All Activities
        </button>
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="loadSegments()">Refresh</button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
            data-bs-target="#createSegmentModal">
            Create Segment
        </button>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover" id="segments-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Type</th>
                <th>Distance</th>
                <th>Elevation</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="6" class="text-center">Loading...</td>
            </tr>
        </tbody>
    </table>
</div>


<!-- View Modal -->
<div class="modal fade" id="viewSegmentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="view-seg-title">Segment Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Tabs -->
                <ul class="nav nav-tabs mb-3" id="segTabs" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" id="map-tab" data-bs-toggle="tab" data-bs-target="#map-pane"
                            type="button">Map & Profile</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="leaderboard-tab" data-bs-toggle="tab"
                            data-bs-target="#leaderboard-pane" type="button">Leaderboard</button>
                    </li>
                </ul>

                <div class="tab-content">
                    <!-- Map & Profile Pane -->
                    <div class="tab-pane fade show active" id="map-pane">
                        <div id="seg-map" style="height: 300px; width: 100%;" class="mb-3 border rounded"></div>
                        <h6 class="text-muted">Elevation Profile</h6>
                        <div style="height: 150px; width: 100%;">
                            <canvas id="elevationChart"></canvas>
                        </div>
                    </div>

                    <!-- Leaderboard Pane -->
                    <div class="tab-pane fade" id="leaderboard-pane">
                        <div class="table-responsive">
                            <table class="table table-sm table-striped" id="leaderboard-table">
                                <thead>
                                    <tr>
                                        <th>Rank</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Avg HR</th>
                                        <th>Watts</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center">Loading...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    async function scanSegments() {
        if (!confirm("This will rescan ALL activities for all segments. It may take a while. Continue?")) return;

        try {
            const response = await fetch('/api/segments/scan', { method: 'POST' });
            if (!response.ok) throw new Error("Scan failed");
            const data = await response.json();
            alert("Scan started! Background Job ID: " + data.job_id);
        } catch (e) {
            alert("Error: " + e.message);
        }
    }

    async function loadSegments() {
        try {
            const res = await fetch('/api/segments');
            if (!res.ok) throw new Error("Failed to fetch segments");
            const segments = await res.json();

            const tbody = document.querySelector('#segments-table tbody');
            tbody.innerHTML = '';

            if (segments.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No segments found.</td></tr>';
                return;
            }

            segments.forEach(seg => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${seg.id}</td>
                    <td><strong>${seg.name}</strong></td>
                    <td><span class="badge bg-secondary">${seg.activity_type}</span></td>
                    <td>${(seg.distance / 1000).toFixed(2)} km</td>
                    <td>${seg.elevation_gain ? seg.elevation_gain.toFixed(1) + ' m' : '-'}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary me-1" onclick='viewSegment(${JSON.stringify(seg)})'>
                            <i class="bi bi-eye"></i> View
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteSegment(${seg.id})">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            });

        } catch (e) {
            console.error(e);
            document.querySelector('#segments-table tbody').innerHTML = '<tr><td colspan="6" class="text-danger text-center">Error loading segments.</td></tr>';
        }
    }

    async function deleteSegment(id) {
        if (!confirm("Are you sure you want to delete this segment? All matched efforts will be lost.")) return;

        try {
            const res = await fetch(`/api/segments/${id}`, { method: 'DELETE' });
            if (res.ok) {
                loadSegments();
            } else {
                alert("Failed to delete segment");
            }
        } catch (e) {
            alert("Error: " + e.message);
        }
    }

    let map = null;
    let elevationChart = null;

    function viewSegment(seg) {
        const modal = new bootstrap.Modal(document.getElementById('viewSegmentModal'));
        document.getElementById('view-seg-title').textContent = seg.name;

        // Reset Tabs
        const triggerEl = document.querySelector('#segTabs button[data-bs-target="#map-pane"]');
        bootstrap.Tab.getInstance(triggerEl)?.show() || new bootstrap.Tab(triggerEl).show();

        modal.show();

        // Load Leaderboard
        loadLeaderboard(seg.id);

        // Wait for modal to show
        setTimeout(() => {
            // --- Map Setup ---
            if (map) {
                map.remove();
                map = null;
            }

            if (!seg.points || seg.points.length === 0) return;

            map = L.map('seg-map');
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap'
            }).addTo(map);

            // Correct [lon, lat, ele] to [lat, lon]
            const latlongs = seg.points.map(p => [p[1], p[0]]);

            const poly = L.polyline(latlongs, { color: 'red' }).addTo(map);
            map.fitBounds(poly.getBounds());

            // --- Chart Setup ---
            if (elevationChart) {
                elevationChart.destroy();
                elevationChart = null;
            }

            // Extract Elevation Data
            // Points are [lon, lat, ele]. Some might be missing ele (undefined/null) or have only 2 coords.
            const distances = [];
            const elevations = [];
            let distAccum = 0;

            // Calculate cumulative distance for X-axis
            for (let i = 0; i < seg.points.length; i++) {
                const p = seg.points[i];
                if (i > 0) {
                    const prev = seg.points[i - 1];
                    // Haversine approx
                    const R = 6371e3;
                    const φ1 = prev[1] * Math.PI / 180;
                    const φ2 = p[1] * Math.PI / 180;
                    const Δφ = (p[1] - prev[1]) * Math.PI / 180;
                    const Δλ = (p[0] - prev[0]) * Math.PI / 180;
                    const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                        Math.cos(φ1) * Math.cos(φ2) *
                        Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                    distAccum += R * c;
                }

                distances.push((distAccum / 1000).toFixed(2)); // km
                // Check for elevation
                const ele = (p.length > 2 && p[2] !== null) ? p[2] : null;
                elevations.push(ele);
            }

            // Filter out nulls if mostly null? Or Chart.js handles nulls (gaps).
            // Let's render what we have.

            const ctx = document.getElementById('elevationChart').getContext('2d');
            elevationChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: distances,
                    datasets: [{
                        label: 'Elevation (m)',
                        data: elevations,
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true,
                        tension: 0.1,
                        pointRadius: 0 // Hide points for smooth look
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: { display: true, title: { display: true, text: 'Distance (km)' } },
                        y: { display: true, title: { display: true, text: 'Elevation (m)' } }
                    },
                    plugins: { legend: { display: false } }
                }
            });

        }, 500);
    }

    async function loadLeaderboard(segmentId) {
        const tbody = document.querySelector('#leaderboard-table tbody');
        tbody.innerHTML = '<tr><td colspan="5" class="text-center">Loading...</td></tr>';

        try {
            const res = await fetch(`/api/segments/${segmentId}/efforts`);
            if (!res.ok) throw new Error("Failed to load leaderboard");
            const efforts = await res.json();

            tbody.innerHTML = '';

            if (efforts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No efforts matching this segment.</td></tr>';
                return;
            }

            efforts.forEach((effort, index) => {
                const date = new Date(effort.start_time).toLocaleDateString();
                const timeStr = new Date(effort.elapsed_time * 1000).toISOString().substr(11, 8); // HH:MM:SS

                // Rank icons
                let rank = index + 1;
                if (rank === 1) rank = '🥇 1';
                else if (rank === 2) rank = '🥈 2';
                else if (rank === 3) rank = '🥉 3';

                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${rank}</td>
                    <td>${date}</td>
                    <td>${timeStr}</td>
                    <td>${effort.avg_hr || '-'}</td>
                    <td>${effort.avg_power || '-'}</td>
                `;
                tbody.appendChild(tr);
            });

        } catch (e) {
            console.error(e);
            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading leaderboard.</td></tr>';
        }
    }

    document.addEventListener('DOMContentLoaded', loadSegments);
</script>
{% endblock %}