{% extends "base.html" %}

{% block title %}Biking Adventures - Blake Ridgway{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h1>Biking Adventures</h1>
        <p class="lead">Exploring the world on two wheels as an ultra endurance cyclist - powered by real-time Strava data!</p>

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3><i class="fas fa-route text-primary me-2"></i>Recent Adventures</h3>
            <button class="btn btn-outline-primary btn-sm" onclick="refreshStravaData()">
                <span id="refresh-icon">🔄</span> Refresh Data
            </button>
        </div>

        <div id="recent-activities">
            {% if recent_activities %}
                {% for activity in recent_activities %}
                <div class="card mb-3 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title">
                                    <i class="fas fa-bicycle text-success me-2"></i>{{ activity.name }}
                                </h5>
                                <p class="card-text text-muted">Latest ride from Strava - automatically synced!</p>
                            </div>
                            <span class="badge bg-primary">{{ activity.date }}</span>
                        </div>
                        <div class="row g-2 mt-2">
                            <div class="col-6 col-md-3">
                                <div class="stat-box p-2 bg-light rounded text-center">
                                    <i class="fas fa-road text-primary"></i>
                                    <div><strong>{{ activity.distance }}</strong></div>
                                    <small class="text-muted">Miles</small>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="stat-box p-2 bg-light rounded text-center">
                                    <i class="fas fa-mountain text-warning"></i>
                                    <div><strong>{{ activity.elevation }}</strong></div>
                                    <small class="text-muted">Feet</small>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="stat-box p-2 bg-light rounded text-center">
                                    <i class="fas fa-clock text-info"></i>
                                    <div><strong>{{ activity.time }}</strong></div>
                                    <small class="text-muted">Duration</small>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="stat-box p-2 bg-light rounded text-center">
                                    <i class="fas fa-tachometer-alt text-success"></i>
                                    <div><strong>{{ activity.avg_speed or 'N/A' }}</strong></div>
                                    <small class="text-muted">Avg MPH</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-info border-start border-primary border-4">
                    <i class="fas fa-info-circle me-2"></i>Loading Strava data...
                </div>
            {% endif %}
        </div>

        <h3 class="mt-5 mb-4"><i class="fas fa-chart-line text-success me-2"></i>2025 Cycling Performance</h3>
        <div class="row g-4" id="cycling-stats">
            {% if ytd_stats %}
            <div class="col-md-6 col-lg-3">
                <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-road fa-2x text-primary"></i>
                    </div>
                    <h4 class="text-primary mb-2">{{ ytd_stats.distance }}</h4>
                    <p class="mb-0">Miles This Year</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-bicycle fa-2x text-success"></i>
                    </div>
                    <h4 class="text-success mb-2">{{ ytd_stats.count }}</h4>
                    <p class="mb-0">Rides Completed</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-mountain fa-2x text-warning"></i>
                    </div>
                    <h4 class="text-warning mb-2">{{ ytd_stats.elevation }}</h4>
                    <p class="mb-0">Feet Climbed</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-clock fa-2x text-info"></i>
                    </div>
                    <h4 class="text-info mb-2">{{ ytd_stats.time }}</h4>
                    <p class="mb-0">Hours Riding</p>
                </div>
            </div>
            {% else %}
            <div class="col-12">
                <div class="alert alert-warning border-start border-warning border-4">
                    <i class="fas fa-exclamation-triangle me-2"></i>Unable to load Strava stats. Please check your API connection.
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-bicycle me-2"></i>My Bikes</h5>
            </div>
            <div class="card-body">
                <div class="bike-item mb-4">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-road fa-lg text-primary me-3"></i>
                        <div>
                            <h6 class="mb-1">Road Bike</h6>
                            <p class="mb-0 text-muted">Giant TCR Advanced 2</p>
                        </div>
                    </div>
                    <div class="bike-specs">
                        <span class="badge bg-light text-dark me-1">Carbon Frame</span>
                        <span class="badge bg-light text-dark me-1">Aero</span>
                        <span class="badge bg-light text-dark">Racing</span>
                    </div>
                </div>

                <div class="bike-item">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-mountain fa-lg text-warning me-3"></i>
                        <div>
                            <h6 class="mb-1">Gravel Bike</h6>
                            <p class="mb-0 text-muted">Canyon Endurace CF SL 8</p>
                        </div>
                    </div>
                    <div class="bike-specs">
                        <span class="badge bg-light text-dark me-1">Endurance</span>
                        <span class="badge bg-light text-dark me-1">All-Road</span>
                        <span class="badge bg-light text-dark">Adventure</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-trophy me-2"></i>Cycling Goals 2025</h5>
            </div>
            <div class="card-body">
                <div class="goal-item mb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-road text-primary me-2"></i>Annual Distance</span>
                        <span class="badge bg-primary">5,000 mi</span>
                    </div>
                </div>
                <div class="goal-item mb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-mountain text-warning me-2"></i>Elevation Gain</span>
                        <span class="badge bg-warning">250,000 ft</span>
                    </div>
                </div>
                <div class="goal-item mb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-bicycle text-success me-2"></i>Total Rides</span>
                        <span class="badge bg-success">200 rides</span>
                    </div>
                </div>
                <div class="goal-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-medal text-danger me-2"></i>Ultra Events</span>
                        <span class="badge bg-danger">3 events</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Data Source</h5>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <i class="fab fa-strava text-danger me-2"></i>
                    <strong>Powered by Strava API</strong>
                </p>
                <p class="small text-muted mb-3">
                    Real-time cycling data automatically synced from my Strava account.
                </p>
                <p class="small text-muted mb-0">
                    <strong>Last updated:</strong> <span id="last-updated">Just now</span>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
async function refreshStravaData() {
    const refreshIcon = document.getElementById('refresh-icon');
    refreshIcon.style.animation = 'spin 1s linear infinite';

    try {
        const response = await fetch('/api/strava-stats');
        const data = await response.json();

        // Update stats
        if (data.ytd_stats) {
            updateStats(data.ytd_stats);
        }

        // Update recent activities
        if (data.recent_activities) {
            updateRecentActivities(data.recent_activities);
        }

        // Update timestamp
        document.getElementById('last-updated').textContent = new Date().toLocaleString();

    } catch (error) {
        console.error('Error refreshing Strava data:', error);
    } finally {
        refreshIcon.style.animation = '';
    }
}

function updateStats(stats) {
    const statsContainer = document.getElementById('cycling-stats');
    statsContainer.innerHTML = `
        <div class="col-md-6 col-lg-3">
            <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                <div class="stat-icon mb-3">
                    <i class="fas fa-road fa-2x text-primary"></i>
                </div>
                <h4 class="text-primary mb-2">${stats.distance}</h4>
                <p class="mb-0">Miles This Year</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                <div class="stat-icon mb-3">
                    <i class="fas fa-bicycle fa-2x text-success"></i>
                </div>
                <h4 class="text-success mb-2">${stats.count}</h4>
                <p class="mb-0">Rides Completed</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                <div class="stat-icon mb-3">
                    <i class="fas fa-mountain fa-2x text-warning"></i>
                </div>
                <h4 class="text-warning mb-2">${stats.elevation}</h4>
                <p class="mb-0">Feet Climbed</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="skill-card text-center p-4 bg-light rounded-3 shadow-sm h-100">
                <div class="stat-icon mb-3">
                    <i class="fas fa-clock fa-2x text-info"></i>
                </div>
                <h4 class="text-info mb-2">${stats.time}</h4>
                <p class="mb-0">Hours Riding</p>
            </div>
        </div>
    `;
}

function updateRecentActivities(activities) {
    const container = document.getElementById('recent-activities');
    if (activities.length === 0) {
        container.innerHTML = '<div class="alert alert-info border-start border-primary border-4"><i class="fas fa-info-circle me-2"></i>No recent activities found.</div>';
        return;
    }

    container.innerHTML = activities.map(activity => `
        <div class="card mb-3 shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h5 class="card-title">
                            <i class="fas fa-bicycle text-success me-2"></i>${activity.name}
                        </h5>
                        <p class="card-text text-muted">Latest ride from Strava - automatically synced!</p>
                    </div>
                    <span class="badge bg-primary">${activity.date}</span>
                </div>
                <div class="row g-2 mt-2">
                    <div class="col-6 col-md-3">
                        <div class="stat-box p-2 bg-light rounded text-center">
                            <i class="fas fa-road text-primary"></i>
                            <div><strong>${activity.distance}</strong></div>
                            <small class="text-muted">Miles</small>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-box p-2 bg-light rounded text-center">
                            <i class="fas fa-mountain text-warning"></i>
                            <div><strong>${activity.elevation}</strong></div>
                            <small class="text-muted">Feet</small>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-box p-2 bg-light rounded text-center">
                            <i class="fas fa-clock text-info"></i>
                            <div><strong>${activity.time}</strong></div>
                            <small class="text-muted">Duration</small>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-box p-2 bg-light rounded text-center">
                            <i class="fas fa-tachometer-alt text-success"></i>
                            <div><strong>${activity.avg_speed || 'N/A'}</strong></div>
                            <small class="text-muted">Avg MPH</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
}

// Auto-refresh every 5 minutes
setInterval(refreshStravaData, 300000);
</script>

<style>
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stat-box {
    transition: transform 0.2s ease;
}

.stat-box:hover {
    transform: translateY(-2px);
}
</style>
{% endblock %}