{% extends "base.html" %}

{% block content %}
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-3 align-items-center mb-3">
            <div class="col-auto">
                <div class="btn-group" role="group">


                </div>
            </div>

        </div>
        <div class="row g-3 align-items-center">
            <div class="col-auto">
                <label for="filter-type" class="col-form-label">Type:</label>
            </div>
            <div class="col-auto">
                <select class="form-select" id="filter-type">
                    <option value="">All Types</option>
                    <option value="running">Running</option>
                    <option value="cycling">Cycling (All)</option>
                    <option value="swimming">Swimming</option>
                    <option value="walking">Walking</option>
                    <option value="hiking">Hiking</option>
                    <option value="gym">Gym</option>
                    <option value="yoga">Yoga</option>
                </select>
            </div>

            <div class="col-auto">
                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="metricFilterDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Metric Filters
                    </button>
                    <ul class="dropdown-menu p-3" aria-labelledby="metricFilterDropdown" style="min-width: 250px;">
                        <li>
                            <h6 class="dropdown-header">Required Metrics</h6>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="filter-has-hr">
                                <label class="form-check-label" for="filter-has-hr">Has Heart Rate</label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="filter-has-power">
                                <label class="form-check-label" for="filter-has-power">Has Power</label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="filter-has-cadence">
                                <label class="form-check-label" for="filter-has-cadence">Has Cadence</label>
                            </div>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <h6 class="dropdown-header">Power Type</h6>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" name="est-power-filter" type="radio"
                                    id="filter-power-any" checked>
                                <label class="form-check-label" for="filter-power-any">Any</label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" name="est-power-filter" type="radio"
                                    id="filter-power-real">
                                <label class="form-check-label" for="filter-power-real">Real Power Only</label>
                            </div>
                        </li>
                        <li>
                            <div class="form-check">
                                <input class="form-check-input" name="est-power-filter" type="radio"
                                    id="filter-power-est">
                                <label class="form-check-label" for="filter-power-est">Estimated Only</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-auto">
                <label for="filter-bike" class="col-form-label">Bike:</label>
            </div>
            <div class="col-auto">
                <select class="form-select" id="filter-bike">
                    <option value="">All Bikes</option>
                    <!-- Populated by JS -->
                </select>
            </div>
            <div class="col-auto">
                <button class="btn btn-secondary" id="apply-filters-btn">Filter</button>
            </div>
            <div class="col-auto ms-auto">
                <button class="btn btn-outline-primary" id="download-selected-btn" disabled>
                    <i class="bi bi-download"></i> Download Selected (Local)
                </button>
                <button class="btn btn-outline-warning" id="redownload-selected-btn" disabled>
                    <i class="bi bi-cloud-download"></i> Redownload Selected (Garmin)
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="activities-table">
                <thead>
                    <tr>
                        <th scope="col"><input type="checkbox" id="select-all-checkbox"></th>
                        <th scope="col">ID</th>
                        <th scope="col" class="sortable" data-sort="start_time">Date <i class="bi bi-arrow-down-up"></i>
                        </th>
                        <th scope="col" class="sortable" data-sort="activity_name">Name <i
                                class="bi bi-arrow-down-up"></i></th>
                        <th scope="col" class="sortable" data-sort="activity_type">Type <i
                                class="bi bi-arrow-down-up"></i></th>
                        <th scope="col">Bike Setup</th>
                        <th scope="col">Duration</th>
                        <th scope="col">File Type</th>
                        <th scope="col">Status</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Rows populated by JS -->
                    <tr>
                        <td colspan="9" class="text-center">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Simple pagination check/controls component if needed -->
        <div class="d-flex justify-content-between align-items-center mt-3">
            <span class="text-muted" id="showing-info">Showing 0 activities</span>
            <div>
                <button class="btn btn-sm btn-outline-secondary" id="prev-page-btn" disabled>Previous</button>
                <button class="btn btn-sm btn-outline-secondary" id="next-page-btn">Next</button>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="activityDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Activity Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" id="detailsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab"
                            data-bs-target="#overview" type="button" role="tab">Overview</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="metrics-tab" data-bs-toggle="tab" data-bs-target="#metrics"
                            type="button" role="tab">Metrics</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="raw-tab" data-bs-toggle="tab" data-bs-target="#raw" type="button"
                            role="tab">Raw Data</button>
                    </li>
                </ul>
                <div class="tab-content" id="detailsTabContent">
                    <!-- Overview Tab -->
                    <div class="tab-pane fade show active" id="overview" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm">
                                    <tbody>
                                        <tr>
                                            <th>Activity Name</th>
                                            <td id="det-name">-</td>
                                        </tr>
                                        <tr>
                                            <th>Type</th>
                                            <td id="det-type">-</td>
                                        </tr>
                                        <tr>
                                            <th>Bike Setup</th>
                                            <td id="det-bike-setup">-</td>
                                        </tr>
                                        <tr>
                                            <th>Start Time</th>
                                            <td id="det-time">-</td>
                                        </tr>
                                        <tr>
                                            <th>Duration</th>
                                            <td id="det-duration">-</td>
                                        </tr>
                                        <tr>
                                            <th>Garmin ID</th>
                                            <td id="det-id">-</td>
                                        </tr>
                                        <tr>
                                            <th>Downloaded</th>
                                            <td id="det-dl-status">-</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light mb-3">
                                    <div class="card-body text-center">
                                        <h3><i class="bi bi-trophy text-warning"></i></h3>
                                        <h5 class="card-title">Summary</h5>
                                        <div class="row text-start mt-3">
                                            <div class="col-6 mb-2"><strong>Distance:</strong> <span
                                                    id="det-dist">-</span></div>
                                            <div class="col-6 mb-2"><strong>Calories:</strong> <span
                                                    id="det-cal">-</span></div>
                                            <div class="col-6 mb-2"><strong>Steps:</strong> <span
                                                    id="det-steps">-</span></div>
                                            <div class="col-6 mb-2"><strong>Avg HR:</strong> <span
                                                    id="det-avg-hr">-</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Metrics Tab -->
                    <div class="tab-pane fade" id="metrics" role="tabpanel">
                        <div class="row g-3">
                            <!-- Heart Rate -->
                            <div class="col-md-4">
                                <div class="card h-100 border-danger">
                                    <div class="card-header bg-danger text-white">Heart Rate</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Average:</span> <strong id="det-m-avg-hr">-</strong> bpm
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Max:</span> <strong id="det-m-max-hr">-</strong> bpm
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Speed/Pace -->
                            <div class="col-md-4">
                                <div class="card h-100 border-primary">
                                    <div class="card-header bg-primary text-white">Speed / Pace</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Avg Speed:</span> <strong id="det-m-avg-sped">-</strong> km/h
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Max Speed:</span> <strong id="det-m-max-sped">-</strong> km/h
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Power -->
                            <div class="col-md-4">
                                <div class="card h-100 border-warning">
                                    <div class="card-header bg-warning text-dark">Power</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Avg Power:</span> <strong id="det-m-avg-pwr">-</strong> W
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Max Power:</span> <strong id="det-m-max-pwr">-</strong> W
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Norm Power:</span> <strong id="det-m-norm-pwr">-</strong> W
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>VO2 Max:</span> <strong id="det-m-vo2">-</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Elevation -->
                            <div class="col-md-4">
                                <div class="card h-100 border-success">
                                    <div class="card-header bg-success text-white">Elevation</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Gain:</span> <strong id="det-m-ele-gain">-</strong> m
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Loss:</span> <strong id="det-m-ele-loss">-</strong> m
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Training Effect -->
                            <div class="col-md-4">
                                <div class="card h-100 border-info">
                                    <div class="card-header bg-info text-white">Training Effect</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Aerobic:</span> <strong id="det-m-aerobic">-</strong>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Anaerobic:</span> <strong id="det-m-anaerobic">-</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mt-2">
                                            <span>TSS:</span> <strong id="det-m-tss">-</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Cadence -->
                            <div class="col-md-4">
                                <div class="card h-100 border-secondary">
                                    <div class="card-header bg-secondary text-white">Cadence</div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Avg:</span> <strong id="det-m-avg-cad">-</strong>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Max:</span> <strong id="det-m-max-cad">-</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Raw Tab -->
                    <div class="tab-pane fade" id="raw" role="tabpanel">
                        <pre id="det-raw-json" class="bg-light p-3 border rounded"
                            style="max-height: 500px; overflow: auto;"></pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    let activities = []; // Store current page data
    let currentPage = 0;
    let limit = 50;
    let currentSort = { field: 'start_time', dir: 'desc' };
    let toastInstance = null;
    let detailsModal = null;

    document.addEventListener('DOMContentLoaded', function () {
        const toastEl = document.getElementById('appToast');
        if (toastEl) toastInstance = new bootstrap.Toast(toastEl);

        detailsModal = new bootstrap.Modal(document.getElementById('activityDetailsModal'));

        detailsModal = new bootstrap.Modal(document.getElementById('activityDetailsModal'));

        loadActivities();
        fetchBikeSetups();

        document.getElementById('prev-page-btn').addEventListener('click', () => changePage(-1));
        document.getElementById('next-page-btn').addEventListener('click', () => changePage(1));
        document.getElementById('apply-filters-btn').addEventListener('click', () => { currentPage = 0; loadActivities(); });

        document.getElementById('select-all-checkbox').addEventListener('change', toggleSelectAll);

        // Sort headers
        document.querySelectorAll('th.sortable').forEach(th => {
            th.addEventListener('click', () => {
                const field = th.dataset.sort;
                if (currentSort.field === field) {
                    currentSort.dir = currentSort.dir === 'asc' ? 'desc' : 'asc';
                } else {
                    currentSort.field = field;
                    currentSort.dir = 'asc';
                    if (field === 'start_time') currentSort.dir = 'desc';
                }
                // Visual updates
                document.querySelectorAll('th.sortable i').forEach(i => i.className = 'bi bi-arrow-down-up text-muted');
                const icon = th.querySelector('i');
                icon.className = currentSort.dir === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down';
                icon.classList.remove('text-muted');

                sortActivities();
                renderTable();
            });
        });

        document.getElementById('download-selected-btn').addEventListener('click', downloadSelected);
        document.getElementById('redownload-selected-btn').addEventListener('click', redownloadSelected);



    });

    // ... Helpers same as before ... 

    // Using base.html showToast if available, else local fallback
    // But since we are extending base, we can use showToast from base if it's there. 
    // However, scoping might be an issue if showToast is in base's script.
    // Base has `showToast` in global scope (window), so we can use it.
    // I will redefine simplified helpers here or just rely on global.

    // Actually, let's redefine simplified helpers for this page's logic to be safe or just call global.
    // Since I can't easily see if base's script executes before this block (it usually does if at end of body), I will assume it does.

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

        const typeFilter = document.getElementById('filter-type').value;
        const bikeFilter = document.getElementById('filter-bike').value;

        let url = `/api/activities/list?limit=${limit}&offset=${currentPage * limit}`;

        // If any filter is active, force query mode
        // If any filter is active, force query mode
        const hasHr = document.getElementById('filter-has-hr').checked;
        const hasPower = document.getElementById('filter-has-power').checked;
        const hasCadence = document.getElementById('filter-has-cadence').checked;
        const powerReal = document.getElementById('filter-power-real').checked;
        const powerEst = document.getElementById('filter-power-est').checked;

        if (typeFilter || bikeFilter || hasHr || hasPower || hasCadence || powerReal || powerEst) {
            url = `/api/activities/query?`;
            const params = new URLSearchParams();
            if (typeFilter) params.append('activity_type', typeFilter);
            if (bikeFilter) params.append('bike_setup_id', bikeFilter);

            if (hasHr) params.append('has_hr', 'true');
            if (hasPower) params.append('has_power', 'true');
            if (hasCadence) params.append('has_cadence', 'true');

            if (powerReal) params.append('is_estimated_power', 'false');
            if (powerEst) params.append('is_estimated_power', 'true');

            url += params.toString();

            document.getElementById('prev-page-btn').disabled = true;
            document.getElementById('next-page-btn').disabled = true;
        } else {
            document.getElementById('prev-page-btn').disabled = currentPage === 0;
            document.getElementById('next-page-btn').disabled = false;
        }

        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error("Failed to fetch activities");
            activities = await response.json();
            sortActivities();
            renderTable();
            document.getElementById('showing-info').textContent = `Showing ${activities.length} activities ${typeFilter ? '(Filtered)' : `(Page ${currentPage + 1})`}`;
        } catch (error) {
            console.error(error);
            tbody.innerHTML = `<tr><td colspan="9" class="text-center text-danger">Error: ${error.message}</td></tr>`;
            showToast("Error", error.message, "error");
        }
    }

    function sortActivities() {
        activities.sort((a, b) => {
            let valA = a[currentSort.field];
            let valB = b[currentSort.field];
            if (valA === null) valA = "";
            if (valB === null) valB = "";
            if (valA < valB) return currentSort.dir === 'asc' ? -1 : 1;
            if (valA > valB) return currentSort.dir === 'asc' ? 1 : -1;
            return 0;
        });
    }

    function renderTable() {
        const tbody = document.querySelector('#activities-table tbody');
        tbody.innerHTML = '';

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

        activities.forEach(act => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td><input type="checkbox" class="activity-checkbox" value="${act.garmin_activity_id}"></td>
                <td><small style="font-size: 0.8em;">${act.garmin_activity_id}</small></td>
                <td>${formatDate(act.start_time)}</td>
                <td><a href="/activity/${act.garmin_activity_id}" target="_blank">${act.activity_name || 'Untitled'}</a></td>
                <td>${act.activity_type}</td>
                <td>${act.bike_setup ? (act.bike_setup.name || act.bike_setup.frame) : (act.activity_type === 'cycling' ? '<span class="text-muted">-</span>' : '')}</td>
                <td>${formatDuration(act.duration)}</td>
                <td>${act.file_type || '-'}</td>
                <td>${formatStatus(act.download_status)}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary" onclick="downloadFile('${act.garmin_activity_id}')" title="Download Local File">
                            <i class="bi bi-download"></i>
                        </button>
                        <button class="btn btn-outline-warning" onclick="redownload('${act.garmin_activity_id}')" title="Refresh Data & Rematch Bike">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                        <a href="/activity/${act.garmin_activity_id}" target="_blank" class="btn btn-outline-info" title="View Details">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>
                </td>
            `;
            tbody.appendChild(row);
        });

        document.querySelectorAll('.activity-checkbox').forEach(cb => {
            cb.addEventListener('change', updateSelectionButtons);
        });
        updateSelectionButtons();
    }

    function changePage(delta) {
        currentPage += delta;
        if (currentPage < 0) currentPage = 0;
        loadActivities();
    }

    function updateSelectionButtons() {
        const checked = document.querySelectorAll('.activity-checkbox:checked').length;
        document.getElementById('download-selected-btn').disabled = checked === 0;
        document.getElementById('redownload-selected-btn').disabled = checked === 0;
    }

    function toggleSelectAll(e) {
        const checked = e.target.checked;
        document.querySelectorAll('.activity-checkbox').forEach(cb => cb.checked = checked);
        updateSelectionButtons();
    }

    window.downloadFile = function (id) {
        window.location.href = `/api/activities/download/${id}`;
    };

    window.redownload = async function (id) {
        showToast("Redownloading...", `Requesting redownload for ${id}`, "info");
        try {
            const response = await fetch(`/api/activities/${id}/redownload`, { method: 'POST' });
            const data = await response.json();
            if (response.ok) {
                showToast("Success", data.message, "success");
                loadActivities();
            } else {
                throw new Error(data.detail || "Failed");
            }
        } catch (e) {
            showToast("Error", e.message, "error");
        }
    };

    function downloadSelected() {
        const selected = Array.from(document.querySelectorAll('.activity-checkbox:checked')).map(cb => cb.value);
        if (selected.length === 0) return;
        selected.forEach(id => {
            setTimeout(() => window.location.href = `/api/activities/download/${id}`, 500);
        });
    }

    async function redownloadSelected() {
        const selected = Array.from(document.querySelectorAll('.activity-checkbox:checked')).map(cb => cb.value);
        if (selected.length === 0) return;
        if (!confirm(`Redownload ${selected.length} activities from Garmin?`)) return;

        let successCount = 0;
        let failCount = 0;

        showToast("Batch Redownload", `Starting batch redownload...`, "info");

        for (const id of selected) {
            try {
                const res = await fetch(`/api/activities/${id}/redownload`, { method: 'POST' });
                if (res.ok) successCount++; else failCount++;
            } catch (e) { failCount++; }
        }

        showToast("Batch Complete", `Success: ${successCount}, Failed: ${failCount}`, failCount > 0 ? "warning" : "success");
        loadActivities();
    }



    async function scanActivities(daysBack) {
        showToast("Scanning...", `Starting scan...`, "info");
        try {
            const res = await fetch(`/api/activities/sync/scan?days_back=${daysBack}`, { method: 'POST' });
            const data = await res.json();
            if (res.ok) {
                showToast("Scan Started", `Job ID: ${data.job_id}`, "success");
                setTimeout(updateSyncStatus, 5000);
            } else showToast("Error", "Scan failed", "error");
        } catch (e) { showToast("Error", e.message, "error"); }
    }

    async function syncPending(limit) {
        showToast("Syncing...", `Starting sync...`, "info");
        try {
            let url = '/api/activities/sync/pending';
            if (limit) url += `?limit=${limit}`;
            const res = await fetch(url, { method: 'POST' });
            const data = await res.json();
            if (res.ok) {
                showToast("Sync Started", `Job ID: ${data.job_id}`, "success");
                setTimeout(() => { updateSyncStatus(); loadActivities(); }, 5000);
            } else showToast("Error", "Sync failed", "error");
        } catch (e) { showToast("Error", e.message, "error"); }
    }



    async function fetchBikeSetups() {
        try {
            const res = await fetch('/api/bike-setups');
            if (!res.ok) throw new Error("Failed to fetch bikes");
            const bikes = await res.json();
            const select = document.getElementById('filter-bike');
            bikes.forEach(bike => {
                const opt = document.createElement('option');
                opt.value = bike.id;
                opt.textContent = bike.name ? `${bike.name} (${bike.frame})` : bike.frame;
                select.appendChild(opt);
            });
        } catch (e) {
            console.error(e);
        }
    }

    async function refreshActivity(garminId) {
        if (!confirm("Are you sure you want to re-download this activity from Garmin and run bike matching?")) {
            return;
        }

        showToast("Processing...", "Refreshing activity data...", "info");
        try {
            const res = await fetch(`/api/activities/${garminId}/redownload`, { method: 'POST' });
            const data = await res.json();

            if (res.ok) {
                showToast("Success", data.message, "success");
                loadActivities(); // Reload table
            } else {
                throw new Error(data.detail || "Refresh failed");
            }
        } catch (e) {
            showToast("Error", e.message, "error");
        }
    }

    window.showActivityDetails = async function (id) {
        // Reset fields
        document.querySelectorAll('[id^="det-"]').forEach(el => el.textContent = '-');
        document.getElementById('det-raw-json').textContent = 'Loading...';

        detailsModal.show();

        try {
            const res = await fetch(`/api/activities/${id}/details`);
            if (!res.ok) throw new Error("Failed to fetch details");
            const data = await res.json();

            // Populate Overview
            document.getElementById('det-name').textContent = data.activity_name || 'Untitled';
            document.getElementById('det-type').textContent = data.activity_type;

            // Populate Bike Setup
            if (data.bike_setup) {
                let display = data.bike_setup.name ? `${data.bike_setup.name} (${data.bike_setup.frame} ${data.bike_setup.chainring}/${data.bike_setup.rear_cog})` : `${data.bike_setup.frame} (${data.bike_setup.chainring}/${data.bike_setup.rear_cog})`;
                document.getElementById('det-bike-setup').textContent = display;
            } else {
                document.getElementById('det-bike-setup').innerHTML = '<span class="text-muted">-</span>';
            }

            document.getElementById('det-time').textContent = formatDate(data.start_time);
            document.getElementById('det-duration').textContent = formatDuration(data.duration);
            document.getElementById('det-id').textContent = data.garmin_activity_id;
            document.getElementById('det-dl-status').innerHTML = formatStatus(data.download_status);

            document.getElementById('det-dist').textContent = data.distance ? (data.distance / 1000).toFixed(2) + ' km' : '-';
            document.getElementById('det-cal').textContent = data.calories || '-';
            document.getElementById('det-steps').textContent = data.steps || '-';
            document.getElementById('det-avg-hr').textContent = data.avg_hr ? data.avg_hr + ' bpm' : '-';

            // Populate Metrics
            // HR
            document.getElementById('det-m-avg-hr').textContent = data.avg_hr || '-';
            document.getElementById('det-m-max-hr').textContent = data.max_hr || '-';

            // Speed (m/s -> km/h)
            document.getElementById('det-m-avg-sped').textContent = data.avg_speed ? (data.avg_speed * 3.6).toFixed(1) : '-';
            document.getElementById('det-m-max-sped').textContent = data.max_speed ? (data.max_speed * 3.6).toFixed(1) : '-';

            // Power
            document.getElementById('det-m-avg-pwr').textContent = data.avg_power || '-';
            document.getElementById('det-m-max-pwr').textContent = data.max_power || '-';
            document.getElementById('det-m-norm-pwr').textContent = data.norm_power || '-';
            document.getElementById('det-m-vo2').textContent = data.vo2_max || '-';

            // Elevation
            document.getElementById('det-m-ele-gain').textContent = data.elevation_gain || '-';
            document.getElementById('det-m-ele-loss').textContent = data.elevation_loss || '-';

            // TE
            document.getElementById('det-m-aerobic').textContent = data.aerobic_te || '-';
            document.getElementById('det-m-anaerobic').textContent = data.anaerobic_te || '-';
            document.getElementById('det-m-tss').textContent = data.tss || '-';

            // Cadence
            document.getElementById('det-m-avg-cad').textContent = data.avg_cadence || '-';
            document.getElementById('det-m-max-cad').textContent = data.max_cadence || '-';

            // Raw
            document.getElementById('det-raw-json').textContent = JSON.stringify(data, null, 2);

        } catch (e) {
            document.getElementById('det-raw-json').textContent = `Error: ${e.message}`;
            showToast("Error", "Failed to load activity details", "error");
        }
    };

    function formatDate(isoStr) { return !isoStr ? '-' : new Date(isoStr).toLocaleString(); }
    function formatDuration(s) { if (!s) return '-'; const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60; return `${h}h ${m}m ${sec}s`; }
    function formatStatus(s) {
        if (s === 'downloaded') return '<span class="badge bg-success">Downloaded</span>';
        if (s === 'failed') return '<span class="badge bg-danger">Failed</span>';
        return `<span class="badge bg-secondary">${s}</span>`;
    }
</script>
{% endblock %}