{% 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>Distance</th>
                <th>Elevation</th>
                <th>Efforts</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><input type="checkbox" id="select-all-efforts"
                                                onclick="toggleAllEfforts(this)"></th>
                                        <th>Rank</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Avg HR</th>
                                        <th>Watts</th>
                                        <th>Max Watts</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center">Loading...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-primary" onclick="compareSelectedEfforts()" id="btn-compare"
                                disabled>
                                <i class="bi bi-bar-chart-line"></i> Compare Selected
                            </button>
                            <button class="btn btn-outline-secondary" onclick="exportSelectedEfforts()" id="btn-export"
                                disabled>
                                <i class="bi bi-download"></i> Export JSON
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Comparison Modal -->
<div class="modal fade" id="compareModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Effort Comparison</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-center align-middle" id="comparison-table">
                        <!-- Filled by JS -->
                    </table>
                </div>
                <div class="mt-4" style="height: 300px;">
                    <canvas id="comparisonChart"></canvas>
                </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?force=true', { 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.distance / 1000).toFixed(2)} km</td>
                    <td>${seg.elevation_gain ? seg.elevation_gain.toFixed(1) + ' m' : '-'}</td>
                    <td><span class="badge bg-info text-dark">${seg.effort_count || 0}</span></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>
                         <button class="btn btn-sm btn-outline-secondary" onclick="scanSingleSegment(${seg.id})" title="Scan for matches">
                            <i class="bi bi-arrow-repeat"></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 scanSingleSegment(id) {
        if (!confirm("Rescan this segment against all activities?")) return;

        try {
            // Show loading state?
            const res = await fetch(`/api/segments/${id}/scan`, { method: 'POST' });
            if (!res.ok) throw new Error("Scan failed");
            const data = await res.json();

            alert(`Scan Complete!\nFound ${data.matches_found} matching activities.`);
            loadSegments(); // Refresh counts

        } catch (e) {
            alert("Error: " + e.message);
        }
    }

    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;
    let comparisonChart = 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>
                        <input type="checkbox" class="effort-checkbox form-check-input" 
                               value="${effort.id}" 
                               onchange="updateActionButtons()">
                    </td>
                    <td>${rank}</td>
                    <td>${date}</td>
                    <td>${timeStr}</td>
                    <td>${effort.avg_hr || '-'}</td>
                    <td>${effort.avg_power || '-'}</td>
                    <td>${effort.max_power || '-'}</td>
                `;
                tbody.appendChild(tr);
            });
            updateActionButtons();

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

    function toggleAllEfforts(source) {
        document.querySelectorAll('.effort-checkbox').forEach(cb => {
            cb.checked = source.checked;
        });
        updateActionButtons();
    }

    function updateActionButtons() {
        const selected = document.querySelectorAll('.effort-checkbox:checked').length;
        document.getElementById('btn-compare').disabled = selected < 2;
        document.getElementById('btn-export').disabled = selected < 1;
    }

    async function compareSelectedEfforts() {
        const checkboxes = document.querySelectorAll('.effort-checkbox:checked');
        const ids = Array.from(checkboxes).map(cb => parseInt(cb.value));

        if (ids.length < 2) return;

        try {
            const res = await fetch('/api/segments/efforts/compare', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(ids)
            });

            if (!res.ok) throw new Error("Comparison failed");
            const data = await res.json();

            renderComparisonTable(data);
            new bootstrap.Modal(document.getElementById('compareModal')).show();

        } catch (e) {
            alert("Error: " + e.message);
        }
    }

    function renderComparisonTable(data) {
        const table = document.getElementById('comparison-table');
        const efforts = data.efforts;
        const winners = data.winners;

        // Define rows to display
        const rows = [
            { key: 'date', label: 'Date', format: v => new Date(v).toLocaleDateString() },
            { key: 'elapsed_time', label: 'Time', format: v => new Date(v * 1000).toISOString().substr(11, 8) },
            { key: 'avg_power', label: 'Avg Power (W)' },
            { key: 'max_power', label: 'Max Power (W)' },
            { key: 'avg_hr', label: 'Avg HR (bpm)' },
            { key: 'watts_per_kg', label: 'Watts/kg' },
            { key: 'avg_speed', label: 'Speed (m/s)', format: v => v ? v.toFixed(2) : '-' },
            { key: 'avg_cadence', label: 'Cadence' },
            { key: 'avg_respiration_rate', label: 'Respiration (br/min)', format: v => v ? v.toFixed(1) : '-' },
            { key: 'avg_temperature', label: 'Temp (C)', format: v => v ? v.toFixed(1) : '-' },
            { key: 'body_weight', label: 'Body Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
            { key: 'bike_weight', label: 'Bike Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
            { key: 'total_weight', label: 'Total Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
            { key: 'bike_name', label: 'Bike' }
        ];

        let html = '<thead><tr><th>Metric</th>';
        efforts.forEach(e => {
            html += `<th>${e.activity_name}</th>`;
        });
        html += '</tr></thead><tbody>';

        rows.forEach(row => {
            html += `<tr><td class="fw-bold text-start">${row.label}</td>`;
            efforts.forEach(e => {
                let val = e[row.key];
                let displayVal = val;
                if (val === null || val === undefined) displayVal = '-';
                else if (row.format) displayVal = row.format(val);

                // Highlight winner
                let bgClass = '';
                if (winners[row.key] === e.effort_id) {
                    bgClass = 'table-success fw-bold';
                }

                html += `<td class="${bgClass}">${displayVal}</td>`;
            });
            html += '</tr>';
        });

        html += '</tbody>';
        table.innerHTML = html;
    }

    async function exportSelectedEfforts() {
        const checkboxes = document.querySelectorAll('.effort-checkbox:checked');
        const ids = Array.from(checkboxes).map(cb => parseInt(cb.value));

        if (ids.length === 0) return;

        try {
            const res = await fetch('/api/segments/efforts/export', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(ids)
            });

            if (!res.ok) throw new Error("Export failed");

            const blob = await res.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = "efforts_analysis.json";
            document.body.appendChild(a);
            a.click();
            a.remove();

        } catch (e) {
            alert("Error: " + e.message);
        }
    }

    function renderComparisonChart(efforts) {
        if (comparisonChart) {
            comparisonChart.destroy();
            comparisonChart = null;
        }

        const ctx = document.getElementById('comparisonChart').getContext('2d');

        // Prepare datasets
        // We will plot formatted 'Watts/kg' and 'Avg Speed' side by side? 
        // Or normalized? 
        // Let's plot Power, HR, and Watts/kg as bars. 
        // Since scales are different, we might need multiple axes or just plot one metric?
        // User asked for "charts" (plural?).
        // Getting simple: Grouped Bar Chart for Power and HR (scale 0-300ish).
        // Watts/kg is small (0-10).

        // Let's use two y-axes: Left for Power/HR, Right for W/kg

        const labels = efforts.map(e => e.activity_name);

        comparisonChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Avg Power (W)',
                        data: efforts.map(e => e.avg_power),
                        backgroundColor: 'rgba(255, 99, 132, 0.6)',
                        yAxisID: 'y'
                    },
                    {
                        label: 'Avg HR (bpm)',
                        data: efforts.map(e => e.avg_hr),
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        yAxisID: 'y'
                    },
                    {
                        label: 'Watts/kg',
                        type: 'line', // Line overlay for W / kg
                        data: efforts.map(e => e.watts_per_kg),
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 2,
                        yAxisID: 'y1'
                    },
                    {
                        label: 'Avg Speed (m/s)',
                        data: efforts.map(e => e.avg_speed),
                        backgroundColor: 'rgba(153, 102, 255, 0.6)',
                        yAxisID: 'y2',
                        hidden: false
                    },
                    {
                        label: 'Avg Cadence (rpm)',
                        data: efforts.map(e => e.avg_cadence),
                        backgroundColor: 'rgba(255, 159, 64, 0.6)',
                        yAxisID: 'y',
                        hidden: true
                    },
                    {
                        label: 'Avg Respiration (br/min)',
                        data: efforts.map(e => e.avg_respiration_rate),
                        backgroundColor: 'rgba(201, 203, 207, 0.6)',
                        yAxisID: 'y',
                        hidden: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: { display: true, text: 'Power (W) / HR (bpm)' }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: { drawOnChartArea: false },
                        title: { display: true, text: 'Watts/kg' }
                    },
                    y2: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: { drawOnChartArea: false },
                        title: { display: true, text: 'Speed' }
                    }
                }
            }
        });
    }

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