{% extends "./layout.html" %}
{% block content %}

<style>
    /* === STATS PAGE STYLE === */
    .stats-wrapper {
        min-height: 100vh;
        background: var(--bg-primary);
        padding: 20px;
        overflow-y: auto;
    }

    .stats-container {
        max-width: 1000px;
        margin: 0 auto;
        padding-bottom: 40px;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.85rem;
        margin-bottom: 25px;
        transition: all 0.3s;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.03);
    }

    .back-link:hover {
        color: var(--yellow-glow);
        background: var(--glass-light);
        border-color: var(--border-primary);
        transform: translateX(-3px);
    }

    /* Header */
    .stats-header {
        text-align: center;
        margin-bottom: 30px;
        position: relative;
    }

    .stats-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--yellow-glow);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 5px;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }

    [data-theme="light"] .stats-title {
        color: var(--orange-primary);
        text-shadow: none;
    }

    .stats-subtitle {
        color: var(--text-muted);
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .live-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 107, 0, 0.1);
        color: var(--orange-primary);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        margin-top: 10px;
        border: 1px solid var(--border-primary);
    }

    .live-dot {
        width: 6px;
        height: 6px;
        background: var(--orange-primary);
        border-radius: 50%;
        animation: pulse 1.5s infinite;
        box-shadow: 0 0 8px var(--orange-primary);
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(1.2);
        }
    }

    /* Hero Card */
    .hero-card {
        background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 165, 0, 0.03) 100%);
        backdrop-filter: blur(10px);
        border: 2px solid var(--border-primary);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }

    .hero-label {
        color: var(--text-accent);
        font-size: 0.9rem;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 700;
    }

    .hero-value {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--text-primary);
        line-height: 1.1;
        margin-bottom: 5px;
        text-shadow: 0 0 30px rgba(255, 107, 0, 0.2);
    }

    .hero-sublabel {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    /* Section */
    .section {
        margin-bottom: 30px;
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-primary);
    }

    .section-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--glass-light);
        border-radius: 10px;
        font-size: 1.1rem;
        color: var(--orange-primary);
        border: 1px solid var(--border-primary);
    }

    .section-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--yellow-glow);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    [data-theme="light"] .section-title {
        color: var(--text-primary);
    }

    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 14px;
        padding: 16px;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .stat-card:hover {
        background: var(--glass-light);
        transform: translateY(-3px);
        border-color: var(--yellow-glow);
        box-shadow: 0 5px 15px rgba(255, 140, 0, 0.15);
    }



    .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 8px;
        opacity: 0.9;
        color: var(--orange-primary);
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 4px;
        font-feature-settings: 'tnum';
    }

    .stat-label {
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    /* Records */
    .records-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }

    .record-card {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 140, 0, 0.02) 100%);
        border: 1px solid rgba(255, 215, 0, 0.2);
        border-radius: 14px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s;
    }

    .record-card:hover {
        border-color: var(--yellow-glow);
        background: rgba(255, 215, 0, 0.08);
        transform: translateX(3px);
    }

    .record-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 215, 0, 0.1);
        border-radius: 10px;
        font-size: 1.3rem;
        color: var(--yellow-glow);
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    [data-theme="light"] .record-icon,
    [data-theme="light"] .record-value {
        color: #d97706;
        /* Darker amber for light mode visibility */
    }

    .record-info {
        flex: 1;
    }

    .record-value {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--yellow-glow);
    }

    .record-label {
        color: var(--text-muted);
        font-size: 0.7rem;
        line-height: 1.2;
    }
</style>

<div class="stats-wrapper">
    <div class="stats-container">
        <a href="{{ url_for('user_home', username=username) }}" class="back-link">
            <i class="fas fa-arrow-left"></i> Назад
        </a>

        <div class="stats-header">
            <div class="stats-title">Статистика</div>
            <div class="stats-subtitle">reZwift Community Dashboard</div>
            <div class="live-indicator">
                <span class="live-dot"></span>
                LIVE
            </div>
        </div>

        <!-- Hero: Uptime -->
        <div class="hero-card">
            <div class="hero-label">⚡ Сервер работает</div>
            <div class="hero-value" id="uptime-value">--</div>
            <div class="hero-sublabel">непрерывно</div>
        </div>

        <!-- Community -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">👥</div>
                <div class="section-title">Сообщество</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card cyan">
                    <div class="stat-icon">👤</div>
                    <div class="stat-value" id="total-users">--</div>
                    <div class="stat-label">Пользователей</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-icon">🏃</div>
                    <div class="stat-value" id="total-activities">--</div>
                    <div class="stat-label">Активностей</div>
                </div>
                <div class="stat-card pink">
                    <div class="stat-icon">🏢</div>
                    <div class="stat-value" id="total-clubs">--</div>
                    <div class="stat-label">Клубов</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">📅</div>
                    <div class="stat-value" id="events-week">--</div>
                    <div class="stat-label">Событий (7 дней)</div>
                </div>
            </div>
        </div>

        <!-- Performance -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">🚴</div>
                <div class="section-title">Общие показатели</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card orange">
                    <div class="stat-icon">🛤️</div>
                    <div class="stat-value" id="total-distance">--</div>
                    <div class="stat-label">Километров</div>
                </div>
                <div class="stat-card blue">
                    <div class="stat-icon">⏱️</div>
                    <div class="stat-value" id="total-time">--</div>
                    <div class="stat-label">Часов в седле</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">⛰️</div>
                    <div class="stat-value" id="total-elevation">--</div>
                    <div class="stat-label">Метров набора</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-icon">🔥</div>
                    <div class="stat-value" id="avg-speed">--</div>
                    <div class="stat-label">Средняя скорость</div>
                </div>
            </div>
        </div>

        <!-- Integrations -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">🔗</div>
                <div class="section-title">Интеграции</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card cyan">
                    <div class="stat-icon">⌚</div>
                    <div class="stat-value" id="garmin-users">--</div>
                    <div class="stat-label">Garmin пользователей</div>
                </div>
                <div class="stat-card orange">
                    <div class="stat-icon">🤖</div>
                    <div class="stat-value" id="tg-bot-users">--</div>
                    <div class="stat-label">TG бот юзеров</div>
                </div>
            </div>
        </div>

        <!-- Records -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">🏆</div>
                <div class="section-title">Рекорды сервера</div>
            </div>
            <div class="records-grid">
                <div class="record-card">
                    <div class="record-icon">🚀</div>
                    <div class="record-info">
                        <div class="record-value" id="longest-ride">--</div>
                        <div class="record-label">Самая длинная поездка</div>
                    </div>
                </div>
                <div class="record-card">
                    <div class="record-icon">🏔️</div>
                    <div class="record-info">
                        <div class="record-value" id="most-elevation">--</div>
                        <div class="record-label">Макс. набор высоты</div>
                    </div>
                </div>
                <div class="record-card">
                    <div class="record-icon">⚡</div>
                    <div class="record-info">
                        <div class="record-value" id="fastest-ride">--</div>
                        <div class="record-label">Макс. средняя скорость</div>
                    </div>
                </div>
                <div class="record-card">
                    <div class="record-icon">⌛</div>
                    <div class="record-info">
                        <div class="record-value" id="longest-duration">--</div>
                        <div class="record-label">Самая долгая поездка</div>
                    </div>
                </div>
                <div class="record-card">
                    <div class="record-icon">🥇</div>
                    <div class="record-info">
                        <div class="record-value" id="top-rider-dist">--</div>
                        <div class="record-label">Топ-1 райдер (км)</div>
                    </div>
                </div>
                <div class="record-card">
                    <div class="record-icon">🏰</div>
                    <div class="record-info">
                        <div class="record-value" id="top-club">--</div>
                        <div class="record-label">Крупнейший клуб</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activity Stats (New Section) -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">📊</div>
                <div class="section-title">Активность</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card cyan">
                    <div class="stat-icon">📅</div>
                    <div class="stat-value" id="activities-today">--</div>
                    <div class="stat-label">Заездов сегодня</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-icon">🗓️</div>
                    <div class="stat-value" id="activities-week">--</div>
                    <div class="stat-label">Заездов за неделю</div>
                </div>
                <div class="stat-card pink">
                    <div class="stat-icon">🆕</div>
                    <div class="stat-value" id="new-users">--</div>
                    <div class="stat-label">Новичков за неделю</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">📏</div>
                    <div class="stat-value" id="avg-ride-km">--</div>
                    <div class="stat-label">Средний заезд (км)</div>
                </div>
                <div class="stat-card orange">
                    <div class="stat-icon">⏱️</div>
                    <div class="stat-value" id="avg-ride-min">--</div>
                    <div class="stat-label">Среднее время (мин)</div>
                </div>
            </div>
        </div>

        <!-- Network Connections -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">🌐</div>
                <div class="section-title">Сетевые подключения</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card cyan">
                    <div class="stat-icon">🌐</div>
                    <div class="stat-value" id="http-requests">--</div>
                    <div class="stat-label">HTTP запросов</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-icon">📡</div>
                    <div class="stat-value" id="udp-connections">--</div>
                    <div class="stat-label">UDP соединений</div>
                </div>
                <div class="stat-card pink">
                    <div class="stat-icon">🔌</div>
                    <div class="stat-value" id="tcp-connections">--</div>
                    <div class="stat-label">TCP соединений</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">🔗</div>
                    <div class="stat-value" id="websocket-active">--</div>
                    <div class="stat-label">WebSocket активных</div>
                </div>
            </div>
        </div>

        <!-- Server Technical Stats -->
        <div class="section">
            <div class="section-header">
                <div class="section-icon">⚙️</div>
                <div class="section-title">Сервер и Достижения</div>
            </div>
            <div class="stats-grid">
                <div class="stat-card orange">
                    <div class="stat-icon">💾</div>
                    <div class="stat-value" id="db-size">--</div>
                    <div class="stat-label">Размер БД</div>
                </div>
                <div class="stat-card blue">
                    <div class="stat-icon">📦</div>
                    <div class="stat-value" id="storage-size">--</div>
                    <div class="stat-label">Хранилище</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-icon">🧠</div>
                    <div class="stat-value" id="memory-usage">--</div>
                    <div class="stat-label">RAM использовано</div>
                </div>
                <div class="stat-card cyan">
                    <div class="stat-icon">⚡</div>
                    <div class="stat-value" id="requests-per-min">--</div>
                    <div class="stat-label">Запросов/мин</div>
                </div>
                <div class="stat-card pink">
                    <div class="stat-icon">🔥</div>
                    <div class="stat-value" id="total-calories">--</div>
                    <div class="stat-label">Всего калорий</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">⚡</div>
                    <div class="stat-value" id="max-power">--</div>
                    <div class="stat-label">Макс. мощность (Вт)</div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    function formatNumber(num) {
        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
        if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
        return num.toLocaleString('ru-RU');
    }

    function formatHours(seconds) {
        return Math.floor(seconds / 3600).toLocaleString('ru-RU');
    }

    function formatKm(meters) {
        const km = meters / 1000;
        if (km >= 1000) return (km / 1000).toFixed(1) + 'K км';
        return Math.round(km).toLocaleString('ru-RU');
    }

    function formatUptimePrecise(diffMs) {
        const totalSeconds = Math.floor(diffMs / 1000);
        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const mins = Math.floor((totalSeconds % 3600) / 60);
        const secs = totalSeconds % 60;
        const ms = Math.floor(diffMs % 1000);

        let parts = [];
        if (days > 0) parts.push(`${days}д`);
        if (hours > 0) parts.push(`${hours}ч`);
        if (mins > 0) parts.push(`${mins}м`);
        parts.push(`${secs}с`);
        parts.push(`<span style="font-size:0.75em; opacity:0.8; font-family: monospace;">${ms.toString().padStart(3, '0')}</span>`);

        return parts.join(' ');
    }

    let uptimeInterval;

    async function loadStats() {
        try {
            const response = await fetch('/api/hub/stats');
            const stats = await response.json();

            // Uptime with milliseconds animation
            if (stats.server_start_time) {
                const startTimeMs = stats.server_start_time * 1000;

                // Clear previous interval if any
                if (uptimeInterval) clearInterval(uptimeInterval);

                // Start animation loop
                uptimeInterval = setInterval(() => {
                    const now = Date.now();
                    const diff = now - startTimeMs;
                    document.getElementById('uptime-value').innerHTML = formatUptimePrecise(diff);
                }, 41); // ~24fps update rate
            } else {
                // Fallback (old format)
                document.getElementById('uptime-value').textContent = formatUptime(stats.server_uptime || 0);
            }

            // Community
            document.getElementById('total-users').textContent = formatNumber(stats.total_users || 0);
            document.getElementById('total-activities').textContent = formatNumber(stats.total_activities || 0);
            document.getElementById('total-clubs').textContent = stats.active_clubs || 0;
            document.getElementById('events-week').textContent = stats.events_this_week || 0;

            // Performance
            document.getElementById('total-distance').textContent = formatNumber(Math.round(stats.total_distance_km || 0));
            document.getElementById('total-time').textContent = formatHours(stats.total_time_spent || 0);
            document.getElementById('total-elevation').textContent = formatNumber(Math.round(stats.total_elevation_m || 0));

            // Avg speed calculation
            const avgSpeed = stats.total_time_spent > 0
                ? ((stats.total_distance_km || 0) / (stats.total_time_spent / 3600)).toFixed(1)
                : 0;
            document.getElementById('avg-speed').textContent = avgSpeed + ' км/ч';

            // Integrations
            document.getElementById('garmin-users').textContent = stats.garmin_users || 0;
            document.getElementById('tg-bot-users').textContent = stats.tg_bot_users || 0;

            // Records (placeholder)
            document.getElementById('longest-ride').textContent = stats.longest_ride_km
                ? formatKm(stats.longest_ride_km * 1000) + ' км'
                : '—';
            document.getElementById('most-elevation').textContent = stats.most_elevation
                ? formatNumber(stats.most_elevation) + ' м'
                : '—';
            document.getElementById('fastest-ride').textContent = stats.fastest_ride_kmh
                ? stats.fastest_ride_kmh + ' км/ч'
                : '—';
            document.getElementById('longest-duration').textContent = stats.longest_ride_hours
                ? stats.longest_ride_hours + ' ч'
                : '—';
            document.getElementById('top-rider-dist').textContent = stats.top_rider_distance_km
                ? formatNumber(stats.top_rider_distance_km)
                : '—';
            document.getElementById('top-club').textContent = stats.top_club_name || '—';

            // Activity Stats
            document.getElementById('activities-today').textContent = stats.activities_today || 0;
            document.getElementById('activities-week').textContent = stats.activities_this_week || 0;
            document.getElementById('new-users').textContent = stats.new_users_this_week || 0;
            document.getElementById('avg-ride-km').textContent = stats.avg_ride_km || 0;
            document.getElementById('avg-ride-min').textContent = stats.avg_ride_minutes || 0;

            // Server Technical Stats
            document.getElementById('db-size').textContent = stats.db_size_mb ? stats.db_size_mb + ' MB' : '—';
            document.getElementById('storage-size').textContent = stats.storage_size_gb ? stats.storage_size_gb + ' GB' : '—';
            document.getElementById('memory-usage').textContent = stats.memory_usage_mb ? (stats.memory_usage_mb / 1024).toFixed(1) + ' GB' : '—';

            // Network Stats
            document.getElementById('http-requests').textContent = formatNumber(stats.http_requests || 0);
            document.getElementById('udp-connections').textContent = formatNumber(stats.udp_connections || 0);
            document.getElementById('tcp-connections').textContent = formatNumber(stats.tcp_connections || 0);
            document.getElementById('websocket-active').textContent = stats.websocket_active || 0;
            document.getElementById('requests-per-min').textContent = stats.requests_per_min || 0;

            // Extra Stats
            document.getElementById('total-calories').textContent = stats.total_calories ? formatNumber(stats.total_calories) : '—';
            document.getElementById('max-power').textContent = stats.max_power_ever || '—';

        } catch (error) {
            console.error('Error loading stats:', error);
        }
    }

    document.addEventListener('DOMContentLoaded', loadStats);
    setInterval(loadStats, 30000);
</script>

{% endblock %}