{% extends "tg_layout.html" %}

{% block title %}Лидерборд - reZwift{% endblock %}

{% block extra_styles %}
/* Top 3 Podium */
.top-podium {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 8px;
margin-bottom: 16px;
}

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

.podium-card:active { transform: scale(0.97); }

.podium-card.gold {
order: 2;
border-color: #FFD700;
background: linear-gradient(180deg, rgba(255, 215, 0, 0.15) 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: 2rem;
margin-bottom: 6px;
}

.podium-name {
font-weight: 700;
color: var(--text-primary);
font-size: 0.85rem;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

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

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

.podium-secondary {
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 4px;
}

/* Metric Tabs */
.metric-tabs {
display: flex;
gap: 4px;
margin-bottom: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}

.metric-tabs::-webkit-scrollbar { display: none; }

.metric-tab {
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 107, 0, 0.1);
border: 1px solid var(--border-primary);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}

.metric-tab.active {
background: linear-gradient(135deg, var(--orange-secondary), var(--orange-primary));
color: white;
border-color: var(--orange-primary);
}

/* Period Tabs */
.period-tabs {
display: flex;
gap: 4px;
margin-bottom: 14px;
}

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

.period-tab.active {
background: rgba(255, 107, 0, 0.15);
border-color: var(--orange-primary);
color: var(--orange-primary);
}

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

.rider-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-primary);
cursor: pointer;
transition: background 0.2s ease;
}

.rider-row:last-child { border-bottom: none; }
.rider-row:active { background: rgba(255, 107, 0, 0.08); }

.rank {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.75rem;
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
flex-shrink: 0;
}

.rank.top {
background: linear-gradient(135deg, var(--orange-secondary), var(--orange-primary));
color: white;
}

.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #4361ee, #3a0ca3);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}

.rider-info {
flex: 1;
min-width: 0;
}

.rider-name {
font-weight: 700;
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.rider-stat {
font-size: 0.72rem;
color: var(--text-muted);
}

.rider-value {
font-weight: 800;
font-size: 0.95rem;
color: var(--gold);
text-align: right;
flex-shrink: 0;
}

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

.modal {
background: var(--bg-card);
border: 2px solid var(--border-accent);
border-bottom: none;
border-radius: 20px 20px 0 0;
padding: 20px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
animation: slideUp 0.3s ease;
}

@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}

.modal-handle {
width: 40px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin: 0 auto 16px;
}

.modal-title {
font-size: 1.2rem;
font-weight: 800;
color: var(--gold);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}

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

.stat-card {
background: rgba(255, 107, 0, 0.1);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 14px;
text-align: center;
}

.stat-value {
font-size: 1.2rem;
font-weight: 800;
color: var(--gold);
}

.stat-label {
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 2px;
}

.records-section h4 {
color: var(--gold);
font-size: 0.9rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}

.record-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-primary);
}

.record-item:last-child { border-bottom: none; }
.record-label { color: var(--text-muted); font-size: 0.82rem; }
.record-value { color: var(--gold); font-weight: 700; font-size: 0.85rem; }

.modal-close-btn {
width: 100%;
padding: 14px;
border-radius: 12px;
border: 2px solid var(--border-accent);
background: rgba(255, 107, 0, 0.1);
color: var(--orange-primary);
font-weight: 600;
font-size: 0.95rem;
margin-top: 16px;
cursor: pointer;
}
{% endblock %}

{% block content %}
<div class="page-header">
    <a href="/tg/" class="back-btn"><i class="fas fa-arrow-left"></i></a>
    <div class="page-title"><i class="fas fa-trophy"></i> Лидерборд</div>
</div>

<!-- Metric Tabs -->
<div class="metric-tabs">
    <button class="metric-tab active" data-stat="distance"><i class="fas fa-road"></i> Дистанция</button>
    <button class="metric-tab" data-stat="elevation"><i class="fas fa-mountain"></i> Набор</button>
    <button class="metric-tab" data-stat="time"><i class="fas fa-clock"></i> Время</button>
    <button class="metric-tab" data-stat="activities"><i class="fas fa-bicycle"></i> Заезды</button>
</div>

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

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

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

<!-- Player Modal -->
<div class="modal-overlay" id="player-modal" onclick="closePlayerModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-handle"></div>
        <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-section" id="modal-records"></div>
        <button class="modal-close-btn" onclick="closePlayerModal()">Закрыть</button>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let currentStat = 'distance';
    let currentPeriod = 'week';

    // 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();
        });
    });

    // 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 formatValue(value, stat) {
        if (!value && value !== 0) 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 'activities': return value + '';
            default: return value;
        }
    }

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

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

        try {
            const res = await fetch(`/api/leaderboard?stat=${currentStat}&period=${currentPeriod}&limit=20`);
            const data = await res.json();

            if (!data || data.length === 0) {
                podiumEl.innerHTML = '';
                listEl.innerHTML = '<div class="empty-state"><i class="fas fa-trophy"></i><p>Нет данных за этот период</p></div>';
                return;
            }

            const medals = ['🥇', '🥈', '🥉'];
            const classes = ['gold', 'silver', 'bronze'];

            podiumEl.innerHTML = data.slice(0, 3).map((player, i) => {
                const name = `${player.first_name || ''} ${player.last_name || ''}`.trim() || 'Rider';
                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">${name}</div>
                        <div class="podium-value">${value}</div>
                        <div class="podium-secondary">${player.activity_count || 0} заездов</div>
                    </div>
                `;
            }).join('');

            if (data.length > 3) {
                listEl.innerHTML = data.slice(3).map((r, i) => {
                    const pos = i + 4;
                    const name = `${r.first_name || ''} ${r.last_name || ''}`.trim() || 'Rider';
                    const initials = name.split(' ').map(w => w[0]).join('').substring(0, 2).toUpperCase();
                    const value = formatValue(r.total_value, currentStat);
                    const isTop = pos <= 10;

                    return `
                        <div class="rider-row" onclick="showPlayerStats(${r.player_id})">
                            <div class="rank ${isTop ? 'top' : ''}">${pos}</div>
                            <div class="avatar">${initials}</div>
                            <div class="rider-info">
                                <div class="rider-name">${name}</div>
                                <div class="rider-stat">${r.activity_count || 0} заездов</div>
                            </div>
                            <div class="rider-value">${value}</div>
                        </div>
                    `;
                }).join('');
            } else {
                listEl.innerHTML = '';
            }
        } catch (e) {
            console.error('Error:', e);
            podiumEl.innerHTML = '';
            listEl.innerHTML = '<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>Ошибка загрузки</p></div>';
        }
    }

    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">${formatTime(s.total_time || 0)}</div>
                        <div class="stat-label">В движении</div>
                    </div>
                `;

                let recordsHtml = '<h4><i class="fas fa-award"></i> Личные рекорды</h4>';
                const recordLabels = {
                    'longest_ride': ['Самый длинный заезд', 'distance'],
                    'most_elevation': ['Макс. набор высоты', 'elevation'],
                    'longest_duration': ['Самый долгий заезд', 'time'],
                    'highest_power': ['Макс. мощность', 'power'],
                    'fastest_speed': ['Макс. скорость', 'speed']
                };

                let hasRecords = false;
                for (const [key, [label, type]] of Object.entries(recordLabels)) {
                    if (records[key] && records[key].value) {
                        hasRecords = true;
                        let val = records[key].value;
                        if (type === 'distance') val = (val / 1000).toFixed(1) + ' км';
                        else if (type === 'elevation') val = Math.round(val) + ' м';
                        else if (type === 'time') val = formatTime(val);
                        else if (type === 'power') val = Math.round(val) + ' W';
                        else if (type === 'speed') val = val.toFixed(1) + ' км/ч';
                        recordsHtml += `<div class="record-item"><span class="record-label">${label}</span><span class="record-value">${val}</span></div>`;
                    }
                }

                if (!hasRecords) {
                    recordsHtml += '<p style="color: var(--text-muted); font-size: 0.85rem;">Пока нет рекордов</p>';
                }

                document.getElementById('modal-records').innerHTML = recordsHtml;
            }
        } catch (e) {
            console.error('Error:', e);
            document.getElementById('modal-player-name').textContent = 'Ошибка';
            document.getElementById('modal-stats').innerHTML = '<p style="color: var(--text-muted);">Не удалось загрузить</p>';
        }
    }

    function formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        return hours > 0 ? `${hours}ч ${mins}м` : `${mins}м`;
    }

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

    // Close modal on back button
    tg.BackButton.onClick(() => {
        const modal = document.getElementById('player-modal');
        if (modal.style.display === 'flex') {
            closePlayerModal();
        } else {
            window.location.href = '/tg/';
        }
    });

    loadLeaderboard();
</script>
{% endblock %}