{% extends "./layout.html" %}
{% block content %}
<style>
    .hub-page {
        min-height: 100vh;
        background: var(--bg-primary);
        display: flex;
    }

    /* Sidebar */
    .hub-sidebar {
        width: 220px;
        min-width: 220px;
        background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .sidebar-logo {
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-logo h1 {
        font-size: 1.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, #FF6B00, #FFD700);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .sidebar-nav {
        padding: 15px 0;
        flex: 1;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.2s;
        border-left: 3px solid transparent;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border-left-color: #FF6B00;
    }

    .nav-item.active {
        background: rgba(255, 107, 0, 0.15);
        color: #FF6B00;
        border-left-color: #FF6B00;
    }

    .nav-item i {
        width: 20px;
        text-align: center;
    }

    .sidebar-footer {
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .login-btn {
        display: block;
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, #FF6B00, #FF8C00);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
    }

    /* Main Content */
    .hub-main {
        flex: 1;
        padding: 25px;
        overflow-y: auto;
    }

    .page-header {
        margin-bottom: 25px;
    }

    .page-title {
        font-size: 1.8rem;
        font-weight: 900;
        color: #FFD700;
        margin: 0 0 5px 0;
    }

    .page-subtitle {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    /* Filters */
    .filters-bar {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        align-items: center;
    }

    .filter-group {
        display: flex;
        gap: 5px;
    }

    .filter-btn {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .filter-btn.active {
        background: #FF6B00;
        border-color: #FF6B00;
        color: white;
    }

    /* Events Table */
    .events-table {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        overflow: hidden;
    }

    .table-header {
        display: grid;
        grid-template-columns: 120px 1fr 150px 100px 80px 120px;
        gap: 15px;
        padding: 12px 20px;
        background: linear-gradient(135deg, rgba(255, 107, 0, 0.5), rgba(0, 0, 0, 0.5));
        border-bottom: 1px solid var(--border-primary);
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 700;
    }

    .event-row {
        display: grid;
        grid-template-columns: 120px 1fr 150px 100px 80px 120px;
        gap: 15px;
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-primary);
        align-items: center;
        transition: background 0.2s;
    }

    .event-row:last-child {
        border-bottom: none;
    }

    .event-row:hover {
        background: rgba(255, 215, 0, 0.05);
    }

    .event-datetime {
        text-align: center;
    }

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

    .event-time {
        font-size: 1.1rem;
        font-weight: 800;
        color: #FF6B00;
    }

    .event-info {
        min-width: 0;
    }

    .event-name {
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .event-organizer {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .event-route {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .event-stats {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .event-registered {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .reg-count {
        background: rgba(255, 215, 0, 0.2);
        color: #FFD700;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.8rem;
    }

    .event-badges {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .badge {
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .badge-race {
        background: linear-gradient(135deg, #e63946, #c1121f);
        color: white;
    }

    .badge-group {
        background: linear-gradient(135deg, #2a9d8f, #264653);
        color: white;
    }

    .badge-workout {
        background: linear-gradient(135deg, #f4a261, #e76f51);
        color: white;
    }

    .badge-cat {
        padding: 4px 8px;
        min-width: 25px;
        text-align: center;
    }

    .badge-cat.a {
        background: #e63946;
        color: white;
    }

    .badge-cat.b {
        background: #2a9d8f;
        color: white;
    }

    .badge-cat.c {
        background: #FFD700;
        color: #000;
    }

    .badge-cat.d {
        background: #90be6d;
        color: #000;
    }

    /* Rules Icons */
    .event-rules {
        display: flex;
        gap: 6px;
        margin-top: 5px;
    }

    .rule-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        font-size: 0.65rem;
        color: var(--text-muted);
    }

    .rule-icon.active {
        background: rgba(255, 215, 0, 0.2);
        color: #FFD700;
    }

    .rule-icon[title]:hover {
        background: rgba(255, 107, 0, 0.3);
        color: #FF6B00;
        cursor: help;
    }

    /* Search Box */
    .search-box {
        flex: 1;
        max-width: 300px;
        position: relative;
    }

    .search-box input {
        width: 100%;
        padding: 10px 15px 10px 38px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .search-box input::placeholder {
        color: var(--text-muted);
    }

    .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
    }

    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 20px;
    }

    .page-btn {
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .page-btn.active {
        background: #FF6B00;
        border-color: #FF6B00;
        color: white;
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Per Page Select */
    .per-page-select {
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.85rem;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 15px;
        opacity: 0.5;
    }

    @media (max-width: 1200px) {
        .hub-sidebar {
            display: none;
        }

        .table-header,
        .event-row {
            grid-template-columns: 100px 1fr 100px;
        }

        .event-route,
        .event-stats,
        .event-registered {
            display: none;
        }
    }
</style>

<div class="hub-page">
    <aside class="hub-sidebar">
        <div class="sidebar-logo">
            <h1>reZwift Hub</h1>
        </div>
        <nav class="sidebar-nav">
            <a href="/hub" class="nav-item"><i class="fas fa-home"></i> Домашняя</a>
            <a href="/hub/events" class="nav-item active"><i class="fas fa-calendar-alt"></i> Расписание</a>
            <a href="/hub/leaderboard" class="nav-item"><i class="fas fa-trophy"></i> Лидерборд</a>
            <a href="/hub/teams" class="nav-item"><i class="fas fa-shield-alt"></i> Команды</a>
            <a href="/hub/riders" class="nav-item"><i class="fas fa-biking"></i> Райдеры</a>
        </nav>
        <div class="sidebar-footer">
            <a href="/login/" class="login-btn"><i class="fas fa-sign-in-alt"></i> Войти</a>
        </div>
    </aside>

    <main class="hub-main">
        <div class="page-header">
            <h1 class="page-title"><i class="fas fa-calendar-alt"></i> Расписание заездов</h1>
            <p class="page-subtitle">Предстоящие события на сервере reZwift</p>
        </div>

        <div class="filters-bar">
            <div class="filter-group">
                <button class="filter-btn active" data-type="all">Все</button>
                <button class="filter-btn" data-type="race">Гонки</button>
                <button class="filter-btn" data-type="group_ride">Групповые</button>
                <button class="filter-btn" data-type="workout">Тренировки</button>
            </div>
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="search-input" placeholder="Поиск по названию...">
            </div>
            <select class="per-page-select" id="per-page">
                <option value="10">10 на стр.</option>
                <option value="20" selected>20 на стр.</option>
                <option value="50">50 на стр.</option>
            </select>
        </div>

        <div class="events-table">
            <div class="table-header">
                <div>Дата / Время</div>
                <div>Событие</div>
                <div>Маршрут</div>
                <div>Дистанция</div>
                <div>Участники</div>
                <div>Тип</div>
            </div>
            <div id="events-list">
                <div class="event-row">
                    <div style="grid-column:1/-1;text-align:center;padding:30px;color:var(--text-muted);"><i
                            class="fas fa-spinner fa-spin"></i> Загрузка...</div>
                </div>
            </div>
            <div class="pagination" id="pagination"></div>
        </div>
    </main>
</div>

<script>
    const courses = { 6: 'Watopia', 7: 'London', 8: 'New York', 9: 'Innsbruck', 10: 'Bologna', 11: 'Yorkshire', 12: 'Crit City', 13: 'Makuri Islands', 14: 'France', 15: 'Paris', 17: 'Scotland' };
    let allEvents = [];
    let currentFilter = 'all';
    let searchQuery = '';
    let currentPage = 1;
    let perPage = 20;

    async function loadEvents() {
        try {
            const res = await fetch('/api/events?upcoming=true&limit=100');
            const data = await res.json();
            allEvents = data.events || data || [];
            renderEvents();
        } catch (e) {
            document.getElementById('events-list').innerHTML = '<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>Ошибка загрузки</p></div>';
        }
    }

    function getFilteredEvents() {
        let filtered = allEvents;
        if (currentFilter !== 'all') {
            filtered = filtered.filter(e => e.event_type === currentFilter);
        }
        if (searchQuery) {
            const q = searchQuery.toLowerCase();
            filtered = filtered.filter(e => e.name.toLowerCase().includes(q));
        }
        return filtered;
    }

    function renderEvents() {
        const filtered = getFilteredEvents();
        const container = document.getElementById('events-list');
        const totalPages = Math.ceil(filtered.length / perPage);
        currentPage = Math.min(currentPage, Math.max(1, totalPages));
        const start = (currentPage - 1) * perPage;
        const pageEvents = filtered.slice(start, start + perPage);

        if (!filtered.length) {
            container.innerHTML = '<div class="empty-state"><i class="fas fa-calendar-times"></i><p>Нет событий</p></div>';
            document.getElementById('pagination').innerHTML = '';
            return;
        }

        container.innerHTML = pageEvents.map(e => {
            const d = new Date(e.start_time);
            const date = d.toLocaleDateString('ru-RU', { day: '2-digit', month: 'short' });
            const time = d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
            const route = courses[e.course_id] || 'Unknown';
            const dist = e.distance_meters ? (e.distance_meters / 1000).toFixed(1) + 'км' : '—';
            const lapsText = e.laps > 1 ? e.laps + ' кр.' : '';
            const typeClass = e.event_type === 'race' ? 'badge-race' : e.event_type === 'workout' ? 'badge-workout' : 'badge-group';
            const typeText = e.event_type === 'race' ? 'RACE' : e.event_type === 'workout' ? 'WORKOUT' : 'GROUP';
            const cats = (e.subgroups || []).map(s => {
                const count = s.registered_count || '';
                return `<span class="badge badge-cat ${s.label.toLowerCase()}">${s.label}${count ? ' ' + count : ''}</span>`;
            }).join('');

            // Rules icons
            const rules = [];
            if (e.rubberbanding) rules.push('<span class="rule-icon active" title="Rubberbanding"><i class="fas fa-link"></i></span>');
            if (e.late_join_minutes > 0) rules.push(`<span class="rule-icon active" title="Late join ${e.late_join_minutes}м"><i class="fas fa-clock"></i></span>`);
            if (e.workout_url) rules.push('<span class="rule-icon active" title="Workout"><i class="fas fa-dumbbell"></i></span>');
            const rulesHtml = rules.length ? '<div class="event-rules">' + rules.join('') + '</div>' : '';

            return `
        <div class="event-row">
          <div class="event-datetime">
            <div class="event-date">${date}</div>
            <div class="event-time">${time}</div>
          </div>
          <div class="event-info">
            <div class="event-name">${e.name}</div>
            <div class="event-organizer">${route} • ${dist}${lapsText ? ' • ' + lapsText : ''}</div>
            ${rulesHtml}
          </div>
          <div class="event-route">${route}</div>
          <div class="event-stats">${dist}${lapsText ? ' • ' + lapsText : ''}</div>
          <div class="event-registered"><span class="reg-count">${e.registered_count || 0}</span></div>
          <div class="event-badges"><span class="badge ${typeClass}">${typeText}</span>${cats}</div>
        </div>
      `;
        }).join('');

        // Pagination
        let pagHtml = '';
        if (totalPages > 1) {
            pagHtml += `<button class="page-btn" ${currentPage === 1 ? 'disabled' : ''} onclick="goPage(${currentPage - 1})"><i class="fas fa-chevron-left"></i></button>`;
            for (let i = 1; i <= Math.min(5, totalPages); i++) {
                pagHtml += `<button class="page-btn ${currentPage === i ? 'active' : ''}" onclick="goPage(${i})">${i}</button>`;
            }
            if (totalPages > 5) {
                pagHtml += `<span style="padding:0 10px;color:var(--text-muted)">...</span>`;
                pagHtml += `<button class="page-btn ${currentPage === totalPages ? 'active' : ''}" onclick="goPage(${totalPages})">${totalPages}</button>`;
            }
            pagHtml += `<button class="page-btn" ${currentPage === totalPages ? 'disabled' : ''} onclick="goPage(${currentPage + 1})"><i class="fas fa-chevron-right"></i></button>`;
        }
        document.getElementById('pagination').innerHTML = pagHtml;
    }

    function goPage(p) { currentPage = p; renderEvents(); }

    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentFilter = this.dataset.type;
            currentPage = 1;
            renderEvents();
        });
    });

    document.getElementById('search-input').addEventListener('input', function () {
        searchQuery = this.value;
        currentPage = 1;
        renderEvents();
    });

    document.getElementById('per-page').addEventListener('change', function () {
        perPage = parseInt(this.value);
        currentPage = 1;
        renderEvents();
    });

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