{% extends "./layout.html" %}
{% block content %}
<style>
    .leaderboard-wrapper {
        min-height: 100vh;
        background: var(--bg-primary);
        padding: 15px;
        overflow-y: auto;
    }

    .leaderboard-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .header-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px 20px;
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 12px;
        box-shadow: var(--shadow-card);
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--yellow-glow);
        display: flex;
        align-items: center;
        gap: 10px;
    }

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

    /* My Rank Banner */
    .my-rank-banner {
        background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 107, 0, 0.1));
        border: 2px solid rgba(255, 140, 0, 0.4);
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .my-rank-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .my-rank-number {
        font-size: 2rem;
        font-weight: 900;
        color: #FFD700;
    }

    .my-rank-label {
        color: rgba(255, 165, 0, 0.8);
        font-size: 0.85rem;
    }

    .my-rank-value {
        color: #FFA500;
        font-weight: 600;
    }

    /* Category Tabs */
    .category-tabs {
        display: flex;
        gap: 5px;
        margin-bottom: 15px;
        background: var(--bg-card);
        padding: 5px;
        border-radius: 10px;
        border: 1px solid var(--border-primary);
        flex-wrap: wrap;
    }

    .cat-tab {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: rgba(255, 165, 0, 0.6);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cat-tab:hover {
        background: rgba(255, 140, 0, 0.1);
        color: #FFA500;
    }

    .cat-tab.active {
        background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
        color: white;
    }

    /* Metric Tabs */
    .metric-tabs {
        display: flex;
        gap: 3px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .metric-tab {
        padding: 8px 14px;
        border-radius: 6px;
        border: 1px solid rgba(255, 140, 0, 0.3);
        background: transparent;
        color: rgba(255, 165, 0, 0.7);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .metric-tab:hover {
        border-color: #FFA500;
        color: #FFA500;
    }

    .metric-tab.active {
        background: rgba(255, 140, 0, 0.2);
        border-color: #FFD700;
        color: #FFD700;
    }

    /* Period Tabs */
    .period-tabs {
        display: flex;
        gap: 3px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .period-tab {
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid rgba(255, 140, 0, 0.2);
        background: transparent;
        color: rgba(255, 165, 0, 0.5);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .period-tab:hover {
        border-color: rgba(255, 140, 0, 0.5);
        color: rgba(255, 165, 0, 0.8);
    }

    .period-tab.active {
        background: rgba(255, 140, 0, 0.15);
        border-color: #FFA500;
        color: #FFA500;
    }

    /* Top 3 Cards */
    .top-podium {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 15px;
        margin-bottom: 25px;
    }

    .podium-card {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 12px;
        padding: 20px 15px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .podium-card:hover {
        border-color: #FFD700;
        transform: translateY(-3px);
    }

    .podium-card.gold {
        order: 2;
        border-color: #FFD700;
        background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, var(--bg-card) 100%);
    }

    .podium-card.silver {
        order: 1;
        border-color: #C0C0C0;
    }

    .podium-card.bronze {
        order: 3;
        border-color: #CD7F32;
    }

    .podium-medal {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .podium-card.gold .podium-medal {
        color: #FFD700;
    }

    .podium-card.silver .podium-medal {
        color: #C0C0C0;
    }

    .podium-card.bronze .podium-medal {
        color: #CD7F32;
    }

    .podium-name {
        font-weight: 700;
        color: var(--yellow-glow);
        font-size: 1rem;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    .podium-value {
        font-size: 1.3rem;
        font-weight: 800;
        color: #FFD700;
    }

    .podium-card.silver .podium-value {
        color: #C0C0C0;
    }

    .podium-card.bronze .podium-value {
        color: #CD7F32;
    }

    .podium-secondary {
        font-size: 0.75rem;
        color: rgba(255, 165, 0, 0.6);
        margin-top: 5px;
    }

    /* Leaderboard Table */
    .leaderboard-content {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 10px;
        overflow: hidden;
    }

    .leaderboard-table {
        width: 100%;
        border-collapse: collapse;
    }

    .leaderboard-table th {
        padding: 12px 15px;
        text-align: left;
        color: var(--yellow-glow);
        font-size: 0.8rem;
        font-weight: 700;
        border-bottom: 2px solid var(--border-primary);
        background: rgba(255, 140, 0, 0.05);
    }

    [data-theme="light"] .leaderboard-table th {
        color: var(--orange-primary);
    }

    .leaderboard-table td {
        padding: 12px 15px;
        color: var(--text-accent);
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border-primary);
    }

    .leaderboard-table tr:hover {
        background: rgba(255, 140, 0, 0.05);
    }

    .leaderboard-table tr.highlighted {
        background: rgba(255, 215, 0, 0.1);
        border-left: 3px solid #FFD700;
    }

    .position {
        font-weight: 800;
        width: 50px;
    }

    .position.gold {
        color: #FFD700;
    }

    .position.silver {
        color: #C0C0C0;
    }

    .position.bronze {
        color: #CD7F32;
    }

    .player-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .player-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FF8C00, #FF6B00);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .player-name {
        font-weight: 600;
        color: #FFA500;
    }

    .player-name:hover {
        color: #FFD700;
        text-decoration: underline;
    }

    .player-value {
        text-align: right;
        font-weight: 700;
        color: var(--yellow-glow);
    }

    [data-theme="light"] .player-value {
        color: var(--orange-primary);
    }

    /* Club Card */
    .club-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .club-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: linear-gradient(135deg, #9333EA, #7C3AED);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
    }

    .club-info {
        flex: 1;
    }

    .club-name {
        font-weight: 700;
        color: #A855F7;
    }

    .club-members {
        font-size: 0.75rem;
        color: rgba(168, 85, 247, 0.7);
    }

    /* Player Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal {
        background: var(--bg-card);
        border: 2px solid rgba(255, 140, 0, 0.4);
        border-radius: 16px;
        padding: 25px;
        max-width: 500px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-title {
        font-size: 1.3rem;
        font-weight: 800;
        color: #FFD700;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        background: rgba(255, 107, 0, 0.1);
        border: 1px solid rgba(255, 140, 0, 0.3);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
    }

    .stat-value {
        font-size: 1.3rem;
        font-weight: 800;
        color: #FFD700;
    }

    .stat-label {
        font-size: 0.75rem;
        color: rgba(255, 165, 0, 0.7);
    }

    .records-list {
        margin-top: 15px;
    }

    .record-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid rgba(255, 140, 0, 0.2);
    }

    .record-label {
        color: rgba(255, 165, 0, 0.8);
        font-size: 0.85rem;
    }

    .record-value {
        color: #FFD700;
        font-weight: 700;
    }

    .btn-secondary {
        padding: 8px 16px;
        border-radius: 8px;
        border: 2px solid rgba(255, 140, 0, 0.4);
        background: rgba(255, 107, 0, 0.1);
        color: #FFA500;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        background: rgba(255, 107, 0, 0.2);
        border-color: #FFD700;
    }

    .back-link {
        color: var(--text-accent);
        text-decoration: none;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 15px;
    }

    .back-link:hover {
        color: var(--yellow-glow);
    }

    .loading {
        text-align: center;
        padding: 40px;
        color: var(--text-accent);
    }

    .empty-state {
        text-align: center;
        padding: 40px;
        color: rgba(255, 165, 0, 0.5);
    }

    @media (max-width: 768px) {
        .top-podium {
            grid-template-columns: 1fr;
        }

        .podium-card {
            order: unset !important;
        }

        .podium-card.gold {
            order: -1 !important;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }
    }

    /* === LIGHT THEME OVERRIDES === */
    [data-theme="light"] .my-rank-number,
    [data-theme="light"] .podium-value,
    [data-theme="light"] .player-stat-value,
    [data-theme="light"] .stat-value,
    [data-theme="light"] .modal-title,
    [data-theme="light"] .profile-header h3 {
        color: #FF6B00;
    }

    [data-theme="light"] .my-rank-label,
    [data-theme="light"] .my-rank-value,
    [data-theme="light"] .podium-rides,
    [data-theme="light"] .player-stat-label,
    [data-theme="light"] .stat-label {
        color: #666;
    }

    [data-theme="light"] .podium-name,
    [data-theme="light"] .player-name {
        color: #1a1a1a;
    }

    [data-theme="light"] .cat-tab.active,
    [data-theme="light"] .metric-tab.active,
    [data-theme="light"] .period-tab.active {
        background: linear-gradient(135deg, #FF8C00, #FF6B00);
        color: white;
    }

    [data-theme="light"] .cat-tab,
    [data-theme="light"] .metric-tab,
    [data-theme="light"] .period-tab {
        color: #666;
    }

    [data-theme="light"] .player-row:hover {
        border-color: #FF6B00;
    }

    [data-theme="light"] .my-rank-card {
        border-color: rgba(255, 107, 0, 0.4);
        background: rgba(255, 107, 0, 0.05);
    }

    [data-theme="light"] .podium-card {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(255, 107, 0, 0.3);
    }

    [data-theme="light"] .modal {
        background: rgba(255, 255, 255, 0.98);
    }

    [data-theme="light"] .empty-state {
        color: #666;
    }
</style>

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

        <div class="header-section">
            <div class="header-title">
                <i class="fas fa-trophy"></i>
                Лидерборд
            </div>
        </div>

        <!-- My Rank Banner -->
        <div class="my-rank-banner" id="my-rank-banner" style="display: none;">
            <div class="my-rank-info">
                <div>
                    <div class="my-rank-label">Ваша позиция</div>
                    <div class="my-rank-number">#<span id="my-rank">-</span></div>
                </div>
                <div>
                    <div class="my-rank-label">из <span id="total-players">-</span> игроков</div>
                    <div class="my-rank-value"><span id="my-value">-</span></div>
                </div>
            </div>
        </div>

        <!-- Category Tabs -->
        <div class="category-tabs">
            <button class="cat-tab active" onclick="switchCategory('overall')">
                <i class="fas fa-globe"></i> Общий
            </button>
            <button class="cat-tab" onclick="switchCategory('clubs')">
                <i class="fas fa-users"></i> Клубы
            </button>
        </div>

        <!-- Metric Tabs -->
        <div class="metric-tabs" id="metric-tabs">
            <button class="metric-tab active" data-stat="distance">Дистанция</button>
            <button class="metric-tab" data-stat="elevation">Набор высоты</button>
            <button class="metric-tab" data-stat="time">Время</button>
            <button class="metric-tab" data-stat="activities">Заезды</button>
            <button class="metric-tab" data-stat="power">Мощность</button>
            <button class="metric-tab" data-stat="speed">Скорость</button>
        </div>

        <!-- Period Tabs -->
        <div class="period-tabs">
            <button class="period-tab" data-period="day">День</button>
            <button class="period-tab" data-period="week">Неделя</button>
            <button class="period-tab" data-period="month">Месяц</button>
            <button class="period-tab" data-period="year">Год</button>
            <button class="period-tab active" data-period="all">Всё время</button>
        </div>

        <!-- Top 3 Podium -->
        <div class="top-podium" id="top-podium"></div>

        <!-- Leaderboard Table -->
        <div class="leaderboard-content">
            <div id="leaderboard-table">
                <div class="loading"><i class="fas fa-spinner fa-spin"></i> Загрузка...</div>
            </div>
        </div>
    </div>
</div>

<!-- Player Modal -->
<div class="modal-overlay" id="player-modal" onclick="closePlayerModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-title">
            <i class="fas fa-user"></i>
            <span id="modal-player-name">Игрок</span>
        </div>

        <div class="stats-grid" id="modal-stats"></div>

        <div class="records-list" id="modal-records"></div>

        <div style="margin-top: 20px; text-align: right;">
            <button class="btn-secondary" onclick="closePlayerModal()">Закрыть</button>
        </div>
    </div>
</div>

<script>
    let currentCategory = 'overall';
    let currentStat = 'distance';
    let currentPeriod = 'all';
    let currentPlayerId = null;

    // Init metric tabs
    document.querySelectorAll('.metric-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.metric-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentStat = tab.dataset.stat;
            loadLeaderboard();
        });
    });

    // Init period tabs
    document.querySelectorAll('.period-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.period-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentPeriod = tab.dataset.period;
            loadLeaderboard();
        });
    });

    function switchCategory(category) {
        currentCategory = category;
        document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active'));
        event.currentTarget.classList.add('active');
        loadLeaderboard();
    }

    async function loadMyRank() {
        try {
            const response = await fetch(`/api/player/me/rank?stat=${currentStat}&period=${currentPeriod}`);
            if (response.ok) {
                const data = await response.json();
                if (data.rank) {
                    document.getElementById('my-rank-banner').style.display = 'flex';
                    document.getElementById('my-rank').textContent = data.rank;
                    document.getElementById('total-players').textContent = data.total_players;

                    let valueStr = formatValue(data.value, currentStat);
                    document.getElementById('my-value').textContent = valueStr;
                    currentPlayerId = null; // Will be set from leaderboard
                }
            }
        } catch (e) {
            console.error('Error loading rank:', e);
        }
    }

    async function loadLeaderboard() {
        const podiumEl = document.getElementById('top-podium');
        const tableEl = document.getElementById('leaderboard-table');

        podiumEl.innerHTML = '';
        tableEl.innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin"></i> Загрузка...</div>';

        try {
            let url;
            if (currentCategory === 'clubs') {
                url = `/api/leaderboard/clubs?stat=${currentStat}&period=${currentPeriod}&limit=50`;
            } else {
                url = `/api/leaderboard?stat=${currentStat}&period=${currentPeriod}&limit=50`;
            }

            const response = await fetch(url);
            if (response.ok) {
                const data = await response.json();

                if (currentCategory === 'clubs') {
                    renderClubLeaderboard(data);
                } else {
                    renderLeaderboard(data);
                    loadMyRank();
                }
            } else {
                tableEl.innerHTML = '<div class="empty-state">Ошибка загрузки</div>';
            }
        } catch (e) {
            console.error('Error:', e);
            tableEl.innerHTML = '<div class="empty-state">Ошибка подключения</div>';
        }
    }

    function formatValue(value, stat) {
        if (!value) return '-';

        switch (stat) {
            case 'distance':
                return (value / 1000).toFixed(1) + ' км';
            case 'elevation':
                return Math.round(value) + ' м';
            case 'time':
                const hours = Math.floor(value / 3600);
                const mins = Math.floor((value % 3600) / 60);
                return `${hours}ч ${mins}м`;
            case 'power':
                return Math.round(value) + ' W';
            case 'wkg':
                return value.toFixed(2) + ' W/kg';
            case 'speed':
                return value.toFixed(1) + ' км/ч';
            case 'activities':
                return value + ' заездов';
            default:
                return value;
        }
    }

    function renderLeaderboard(data) {
        const podiumEl = document.getElementById('top-podium');
        const tableEl = document.getElementById('leaderboard-table');

        if (data.length === 0) {
            podiumEl.innerHTML = '';
            tableEl.innerHTML = '<div class="empty-state">Нет данных</div>';
            return;
        }

        // Render podium (top 3)
        const medals = ['🥇', '🥈', '🥉'];
        const classes = ['gold', 'silver', 'bronze'];

        podiumEl.innerHTML = data.slice(0, 3).map((player, i) => {
            // Parse donor settings
            let donorSettings = {};
            if (player.donor_settings) {
                try {
                    donorSettings = JSON.parse(player.donor_settings);
                } catch(e) {}
            }
            
            const nameHTML = formatDonorName(
                player.first_name, 
                player.last_name, 
                player.is_donor,
                donorSettings
            );
            const value = formatValue(player.total_value, currentStat);

            return `
                <div class="podium-card ${classes[i]}" onclick="showPlayerStats(${player.player_id})">
                    <div class="podium-medal">${medals[i]}</div>
                    <div class="podium-name">${nameHTML}</div>
                    <div class="podium-value">${value}</div>
                    <div class="podium-secondary">${player.activity_count || 0} заездов</div>
                </div>
            `;
        }).join('');

        // Render table (rest)
        let html = `
            <table class="leaderboard-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Игрок</th>
                        <th style="text-align: right;">Результат</th>
                    </tr>
                </thead>
                <tbody>
        `;

        data.slice(3).forEach((player, index) => {
            const pos = index + 4;
            
            // Parse donor settings
            let donorSettings = {};
            if (player.donor_settings) {
                try {
                    donorSettings = JSON.parse(player.donor_settings);
                } catch(e) {}
            }
            
            const nameHTML = formatDonorName(
                player.first_name, 
                player.last_name, 
                player.is_donor,
                donorSettings
            );
            const avatarClass = player.is_donor ? 'player-avatar donor-avatar-frame' : 'player-avatar';
            const value = formatValue(player.total_value, currentStat);
            const initial = (player.first_name || player.last_name || 'U')[0].toUpperCase();

            html += `
                <tr onclick="showPlayerStats(${player.player_id})">
                    <td class="position">${pos}</td>
                    <td>
                        <div class="player-cell">
                            <div class="${avatarClass}">${initial}</div>
                            ${nameHTML}
                        </div>
                    </td>
                    <td class="player-value">${value}</td>
                </tr>
            `;
        });

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

    function renderClubLeaderboard(data) {
        const podiumEl = document.getElementById('top-podium');
        const tableEl = document.getElementById('leaderboard-table');

        if (data.length === 0) {
            podiumEl.innerHTML = '';
            tableEl.innerHTML = '<div class="empty-state">Нет данных</div>';
            return;
        }

        // Render podium for clubs
        const medals = ['🥇', '🥈', '🥉'];
        const classes = ['gold', 'silver', 'bronze'];

        podiumEl.innerHTML = data.slice(0, 3).map((club, i) => {
            const value = formatValue(club.total_value, currentStat);

            return `
                <div class="podium-card ${classes[i]}">
                    <div class="podium-medal">${medals[i]}</div>
                    <div class="podium-name">${club.name}</div>
                    <div class="podium-value">${value}</div>
                    <div class="podium-secondary">${club.member_count} участников</div>
                </div>
            `;
        }).join('');

        // Render table
        let html = `
            <table class="leaderboard-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Клуб</th>
                        <th style="text-align: center;">Участников</th>
                        <th style="text-align: right;">Результат</th>
                    </tr>
                </thead>
                <tbody>
        `;

        data.slice(3).forEach((club, index) => {
            const pos = index + 4;
            const value = formatValue(club.total_value, currentStat);

            html += `
                <tr>
                    <td class="position">${pos}</td>
                    <td>
                        <div class="club-row">
                            <div class="club-avatar">${club.name[0].toUpperCase()}</div>
                            <div class="club-info">
                                <div class="club-name">${club.name}</div>
                            </div>
                        </div>
                    </td>
                    <td style="text-align: center;">${club.member_count}</td>
                    <td class="player-value">${value}</td>
                </tr>
            `;
        });

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

    async function showPlayerStats(playerId) {
        const modal = document.getElementById('player-modal');
        document.getElementById('modal-player-name').textContent = 'Загрузка...';
        document.getElementById('modal-stats').innerHTML = '';
        document.getElementById('modal-records').innerHTML = '';
        modal.style.display = 'flex';

        try {
            const [statsRes, recordsRes] = await Promise.all([
                fetch(`/api/player/${playerId}/stats`),
                fetch(`/api/player/${playerId}/records`)
            ]);

            const stats = await statsRes.json();
            const records = await recordsRes.json();

            if (stats.player) {
                const name = `${stats.player.first_name || ''} ${stats.player.last_name || ''}`.trim();
                document.getElementById('modal-player-name').textContent = name || 'Игрок';

                const s = stats.stats || {};
                document.getElementById('modal-stats').innerHTML = `
                    <div class="stat-card">
                        <div class="stat-value">${s.total_activities || 0}</div>
                        <div class="stat-label">Заездов</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${((s.total_distance || 0) / 1000).toFixed(0)} км</div>
                        <div class="stat-label">Дистанция</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${Math.round(s.total_elevation || 0)} м</div>
                        <div class="stat-label">Набор</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${stats.wkg ? stats.wkg + ' W/kg' : '-'}</div>
                        <div class="stat-label">Avg W/kg</div>
                    </div>
                `;

                // Records
                let recordsHtml = '<h4 style="color: #FFD700; margin-bottom: 10px;">🏆 Личные рекорды</h4>';
                const recordLabels = {
                    'longest_ride': 'Самый длинный заезд',
                    'most_elevation': 'Макс. набор высоты',
                    'longest_duration': 'Макс. время',
                    'highest_power': 'Макс. мощность',
                    'fastest_speed': 'Макс. скорость'
                };

                for (const [key, label] of Object.entries(recordLabels)) {
                    if (records[key]) {
                        let val = records[key].value;
                        if (key === 'longest_ride') val = (val / 1000).toFixed(1) + ' км';
                        else if (key === 'most_elevation') val = Math.round(val) + ' м';
                        else if (key === 'longest_duration') val = Math.floor(val / 3600) + 'ч ' + Math.floor((val % 3600) / 60) + 'м';
                        else if (key === 'highest_power') val = Math.round(val) + ' W';
                        else if (key === 'fastest_speed') val = val.toFixed(1) + ' км/ч';

                        recordsHtml += `
                            <div class="record-item">
                                <span class="record-label">${label}</span>
                                <span class="record-value">${val}</span>
                            </div>
                        `;
                    }
                }

                document.getElementById('modal-records').innerHTML = recordsHtml;
            }
        } catch (e) {
            console.error('Error:', e);
            document.getElementById('modal-player-name').textContent = 'Ошибка';
        }
    }

    function closePlayerModal() {
        document.getElementById('player-modal').style.display = 'none';
    }

    // Initial load
    document.addEventListener('DOMContentLoaded', loadLeaderboard);
</script>

{% endblock %}