{% extends "tg_layout.html" %}

{% block title %}reZwift - Telegram{% endblock %}

{% block content %}
<div class="tg-header">
    <div class="tg-logo">reZwift</div>
    <div class="tg-subtitle">Telegram Mini App</div>
</div>

{% if logged_in %}
<!-- LOGGED IN VIEW -->
<div class="user-info">
    <div class="user-avatar">{{ username[0]|upper }}</div>
    <div class="user-details">
        <div class="user-name">{{ username }}</div>
        <div class="user-label">Добро пожаловать!</div>
    </div>
</div>

<div class="total-online">
    <div class="total-count">{{ online.total }}</div>
    <div class="total-label">райдеров онлайн</div>
</div>

<!-- Онлайн в мирах -->
<div class="card">
    <div class="card-title"><i class="fas fa-globe"></i> Онлайн в мирах</div>
    <div class="online-grid">
        <div class="world-item {{ 'active' if online.watopia > 0 else '' }}">
            <span class="world-name">🏝️ Watopia</span>
            <span class="world-count">{{ online.watopia|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.makuriislands > 0 else '' }}">
            <span class="world-name">🎌 Makuri</span>
            <span class="world-count">{{ online.makuriislands|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.london > 0 else '' }}">
            <span class="world-name">🇬🇧 London</span>
            <span class="world-count">{{ online.london|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.france > 0 else '' }}">
            <span class="world-name">🇫🇷 France</span>
            <span class="world-count">{{ online.france|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.newyork > 0 else '' }}">
            <span class="world-name">🗽 New York</span>
            <span class="world-count">{{ online.newyork|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.innsbruck > 0 else '' }}">
            <span class="world-name">⛷️ Innsbruck</span>
            <span class="world-count">{{ online.innsbruck|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.yorkshire > 0 else '' }}">
            <span class="world-name">🏔️ Yorkshire</span>
            <span class="world-count">{{ online.yorkshire|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.paris > 0 else '' }}">
            <span class="world-name">🗼 Paris</span>
            <span class="world-count">{{ online.paris|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.scotland > 0 else '' }}">
            <span class="world-name">🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scotland</span>
            <span class="world-count">{{ online.scotland|default(0) }}</span>
        </div>
        <div class="world-item {{ 'active' if online.richmond > 0 else '' }}">
            <span class="world-name">🇺🇸 Richmond</span>
            <span class="world-count">{{ online.richmond|default(0) }}</span>
        </div>
    </div>
</div>

<!-- График онлайна -->
<div class="chart-card">
    <div class="chart-header">
        <span class="chart-title">📈 История онлайна</span>
        <div class="period-toggle">
            <button class="period-btn active" data-period="day" onclick="switchPeriod('day')">День</button>
            <button class="period-btn" data-period="week" onclick="switchPeriod('week')">Неделя</button>
        </div>
    </div>
    <div class="chart-container" id="chartContainer">
        <div class="loading" id="chartLoading"><i class="fas fa-spinner fa-spin"></i></div>
        <canvas id="onlineChart" style="display: none;"></canvas>
    </div>
    <div class="chart-stats" id="chartStats" style="display: none;">
        <div class="chart-stat">
            <div class="chart-stat-value" id="statMax">-</div>
            <div class="chart-stat-label">Макс</div>
        </div>
        <div class="chart-stat">
            <div class="chart-stat-value" id="statAvg">-</div>
            <div class="chart-stat-label">Средний</div>
        </div>
        <div class="chart-stat">
            <div class="chart-stat-value" id="statMin">-</div>
            <div class="chart-stat-label">Мин</div>
        </div>
    </div>
</div>

<!-- Навигация -->
<div class="card">
    <div class="card-title"><i class="fas fa-compass"></i> Навигация</div>
    <div class="nav-grid">
        <a href="/tg/events" class="nav-btn">
            <i class="fas fa-calendar-alt"></i>
            События
        </a>
        <a href="/tg/leaderboard" class="nav-btn">
            <i class="fas fa-trophy"></i>
            Лидерборд
        </a>
        <a href="https://rezwift.ru/clubs" class="nav-btn" target="_blank">
            <i class="fas fa-users"></i>
            Клубы
        </a>
        <a href="https://rezwift.ru" class="nav-btn" target="_blank">
            <i class="fas fa-globe"></i>
            Сайт
        </a>
        <a href="https://t.me/rezwift" class="nav-btn" target="_blank">
            <i class="fab fa-telegram"></i>
            Чат
        </a>
        <a href="https://rezwift.ru/hub" class="nav-btn" target="_blank">
            <i class="fas fa-external-link-alt"></i>
            Hub
        </a>
    </div>
</div>

<!-- Ссылка на полный лаунчер -->
<div class="card" style="background: rgba(76, 201, 240, 0.08); border-color: rgba(76, 201, 240, 0.2);">
    <div style="font-size: 0.75rem; color: #4cc9f0; text-align: center;">
        <i class="fas fa-info-circle"></i> Полный лаунчер:<br>
        <span style="color: var(--text-muted); font-size: 0.7rem;">
            Настройки, интеграции (Strava, Garmin), профиль
        </span>
    </div>
    <a href="https://rezwift.ru/login/" target="_blank"
        style="display: block; text-align: center; margin-top: 10px; padding: 10px; background: rgba(76, 201, 240, 0.15); border-radius: 8px; color: #4cc9f0; text-decoration: none; font-size: 0.8rem; font-weight: 600;">
        <i class="fas fa-rocket"></i> Открыть лаунчер
    </a>
</div>

<a href="/tg/logout" class="logout-link">
    <i class="fas fa-sign-out-alt"></i> Выйти
</a>

{% else %}
<!-- LOGIN VIEW -->
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-error">
    <i class="fas fa-exclamation-circle"></i> {{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}

<div class="card">
    <div class="card-title"><i class="fas fa-sign-in-alt"></i> Вход в аккаунт</div>
    <form action="/tg/login" method="POST">
        <div class="form-group">
            <label class="form-label">Email</label>
            <input type="text" name="username" class="form-input" placeholder="email@example.com" required
                autocomplete="username">
        </div>
        <div class="form-group">
            <label class="form-label">Пароль</label>
            <input type="password" name="password" class="form-input" placeholder="Ваш пароль" required
                autocomplete="current-password">
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">
            <i class="fas fa-rocket"></i> Войти
        </button>
    </form>
</div>

<div class="total-online">
    <div class="total-count">{{ online.total }}</div>
    <div class="total-label">райдеров онлайн</div>
</div>

<a href="https://rezwift.ru/#/guide" class="btn btn-secondary" target="_blank" style="margin-top: 10px; width: 100%;">
    <i class="fas fa-question-circle"></i> Как начать?
</a>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    let onlineChart = null;
    let currentPeriod = 'day';

    {% if logged_in %}
    document.addEventListener('DOMContentLoaded', () => loadOnlineHistory('day'));
    {% endif %}

    function switchPeriod(period) {
        currentPeriod = period;
        document.querySelectorAll('.period-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.dataset.period === period) btn.classList.add('active');
        });
        loadOnlineHistory(period);
    }

    async function loadOnlineHistory(period) {
        const loading = document.getElementById('chartLoading');
        const canvas = document.getElementById('onlineChart');
        const stats = document.getElementById('chartStats');

        loading.style.display = 'block';
        canvas.style.display = 'none';
        stats.style.display = 'none';

        try {
            const res = await fetch(`/api/online/history?period=${period}`);
            const data = await res.json();

            loading.style.display = 'none';

            if (data.length === 0) {
                loading.innerHTML = '<span style="font-size: 0.7rem;">Данные скоро появятся</span>';
                loading.style.display = 'block';
                return;
            }

            canvas.style.display = 'block';
            stats.style.display = 'flex';
            renderChart(data, period);
            updateStats(data);
        } catch (e) {
            loading.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
            loading.style.display = 'block';
        }
    }

    function renderChart(data, period) {
        const ctx = document.getElementById('onlineChart').getContext('2d');
        if (onlineChart) onlineChart.destroy();

        const labels = data.map(d => {
            const date = new Date(d.timestamp * 1000);
            return period === 'day'
                ? date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
                : date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
        });
        const values = data.map(d => d.total);

        const gradient = ctx.createLinearGradient(0, 0, 0, 120);
        gradient.addColorStop(0, 'rgba(255, 140, 0, 0.5)');
        gradient.addColorStop(1, 'rgba(255, 140, 0, 0)');

        onlineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    data: values,
                    borderColor: '#FF8C00',
                    backgroundColor: gradient,
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { display: false },
                    y: { display: false, beginAtZero: true }
                }
            }
        });
    }

    function updateStats(data) {
        const vals = data.map(d => d.total);
        document.getElementById('statMax').textContent = Math.max(...vals);
        document.getElementById('statAvg').textContent = Math.round(vals.reduce((a, b) => a + b, 0) / vals.length);
        document.getElementById('statMin').textContent = Math.min(...vals);
    }

    // Auto-refresh every 5 min
    setInterval(() => loadOnlineHistory(currentPeriod), 300000);
</script>
{% endblock %}