{% extends "tg_layout.html" %}

{% block title %}События - reZwift{% endblock %}

{% block extra_styles %}
.event-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: 14px;
padding: 14px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s ease;
}

.event-card:active {
transform: scale(0.98);
border-color: var(--orange);
}

.event-header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}

.event-image {
width: 60px;
height: 60px;
border-radius: 10px;
object-fit: cover;
background: linear-gradient(135deg, var(--orange), #FF8C00);
flex-shrink: 0;
}

.event-image-placeholder {
width: 60px;
height: 60px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,107,0,0.1));
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
font-size: 1.5rem;
flex-shrink: 0;
}

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

.event-type {
display: inline-block;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 4px;
}

.type-race {
background: rgba(235, 51, 73, 0.2);
color: #ff6b6b;
}

.type-group {
background: rgba(76, 201, 240, 0.2);
color: #4cc9f0;
}

.type-workout {
background: rgba(56, 239, 125, 0.2);
color: #38ef7d;
}

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

.event-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 8px;
}

.event-meta span {
display: flex;
align-items: center;
gap: 4px;
}

.create-btn {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, #FF6B00, #FF8C00);
border: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin-left: auto;
}

/* 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 rgba(255, 107, 0, 0.3);
border-bottom: none;
border-radius: 20px 20px 0 0;
padding: 16px;
width: 100%;
max-height: 85vh;
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 14px;
}

.modal-image {
width: 100%;
height: 160px;
border-radius: 12px;
object-fit: cover;
margin-bottom: 14px;
}

.modal-image-placeholder {
width: 100%;
height: 140px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,107,0,0.15), rgba(255,107,0,0.05));
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
font-size: 3rem;
margin-bottom: 14px;
}

.modal-title {
font-size: 1.2rem;
font-weight: 800;
color: var(--gold);
margin-bottom: 6px;
}

.modal-desc {
font-size: 0.82rem;
color: var(--text-muted);
margin-bottom: 14px;
line-height: 1.4;
}

.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 16px;
}

.detail-item {
background: rgba(255, 107, 0, 0.08);
border-radius: 10px;
padding: 10px;
text-align: center;
}

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

.detail-label {
font-size: 0.68rem;
color: var(--text-muted);
}

.route-info {
background: rgba(76, 201, 240, 0.1);
border: 1px solid rgba(76, 201, 240, 0.2);
border-radius: 10px;
padding: 12px;
margin-bottom: 14px;
}

.route-name {
font-weight: 700;
font-size: 0.9rem;
color: #4cc9f0;
margin-bottom: 4px;
}

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

.participants-section {
margin-bottom: 14px;
}

.participants-title {
font-size: 0.8rem;
font-weight: 700;
color: var(--orange);
margin-bottom: 8px;
}

.participants-count {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 6px;
}

.participants-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

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

.btn-register {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, var(--orange), #FF8C00);
color: white;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 8px;
}

.btn-register:active {
transform: scale(0.98);
}

.btn-register.registered {
background: rgba(56, 239, 125, 0.2);
color: #38ef7d;
border: 2px solid #38ef7d;
}

.btn-register:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.btn-close {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255, 107, 0, 0.3);
background: transparent;
color: var(--orange);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
}

/* Confirm dialog */
.confirm-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: 2000;
padding: 20px;
}

.confirm-box {
background: var(--bg-card);
border: 2px solid var(--orange);
border-radius: 16px;
padding: 20px;
max-width: 320px;
width: 100%;
text-align: center;
}

.confirm-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--gold);
margin-bottom: 10px;
}

.confirm-text {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 16px;
}

.confirm-buttons {
display: flex;
gap: 10px;
}

.confirm-btn {
flex: 1;
padding: 12px;
border-radius: 10px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border: none;
}

.confirm-btn.primary {
background: linear-gradient(135deg, var(--orange), #FF8C00);
color: white;
}

.confirm-btn.secondary {
background: rgba(255, 107, 0, 0.1);
border: 1px solid rgba(255, 107, 0, 0.3);
color: var(--orange);
}
{% 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-calendar-alt"></i> События</div>
    <a href="/tg/events/create" class="create-btn"><i class="fas fa-plus"></i></a>
</div>

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

<!-- Event Details Modal -->
<div class="modal-overlay" id="event-modal" onclick="if(event.target === this) closeEventModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-handle"></div>
        <div id="modal-content">
            <div class="loading"><i class="fas fa-spinner fa-spin"></i></div>
        </div>
    </div>
</div>

<!-- Confirm Dialog -->
<div class="confirm-overlay" id="confirm-dialog">
    <div class="confirm-box">
        <div class="confirm-title" id="confirm-title">Подтверждение</div>
        <div class="confirm-text" id="confirm-text">Вы уверены?</div>
        <div class="confirm-buttons">
            <button class="confirm-btn secondary" onclick="closeConfirm()">Отмена</button>
            <button class="confirm-btn primary" id="confirm-action" onclick="confirmAction()">Да</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let currentEventId = null;
    let pendingAction = null;
    let eventsData = [];

    async function loadEvents() {
        try {
            const res = await fetch('/api/events?limit=30');
            const data = await res.json();

            if (!data.events || data.events.length === 0) {
                document.getElementById('events-list').innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-calendar-times"></i>
                        <p>Нет предстоящих событий</p>
                    </div>
                `;
                return;
            }

            eventsData = data.events;

            document.getElementById('events-list').innerHTML = data.events.map(e => {
                const typeClass = e.event_type === 'race' ? 'type-race' :
                    e.event_type === 'group_workout' ? 'type-workout' : 'type-group';
                const typeName = e.event_type === 'race' ? 'Гонка' :
                    e.event_type === 'group_workout' ? 'Тренировка' : 'Заезд';
                const date = new Date(e.start_time).toLocaleString('ru-RU', {
                    day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit'
                });

                const imageHtml = e.image_url
                    ? `<img src="${e.image_url}" class="event-image" alt="">`
                    : `<div class="event-image-placeholder"><i class="fas fa-bicycle"></i></div>`;

                return `
                    <div class="event-card" onclick="openEventModal(${e.id})">
                        <div class="event-header">
                            ${imageHtml}
                            <div class="event-info">
                                <span class="event-type ${typeClass}">${typeName}</span>
                                <div class="event-name">${e.name}</div>
                            </div>
                        </div>
                        <div class="event-meta">
                            <span><i class="fas fa-clock"></i> ${date}</span>
                            <span><i class="fas fa-route"></i> ${((e.distance_meters || 0) / 1000).toFixed(1)} км</span>
                            <span><i class="fas fa-users"></i> ${e.registered_count || 0}</span>
                        </div>
                    </div>
                `;
            }).join('');
        } catch (e) {
            document.getElementById('events-list').innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>Ошибка загрузки</p>
                </div>
            `;
        }
    }

    async function openEventModal(eventId) {
        currentEventId = eventId;
        const modal = document.getElementById('event-modal');
        modal.style.display = 'flex';

        document.getElementById('modal-content').innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin"></i></div>';

        try {
            // Fetch event details and registration status
            const [eventRes, regRes] = await Promise.all([
                fetch(`/api/events/${eventId}`),
                fetch(`/api/events/${eventId}/registrations`)
            ]);

            const event = await eventRes.json();
            const regData = await regRes.json();

            const typeClass = event.event_type === 'race' ? 'type-race' :
                event.event_type === 'group_workout' ? 'type-workout' : 'type-group';
            const typeName = event.event_type === 'race' ? 'Гонка' :
                event.event_type === 'group_workout' ? 'Тренировка' : 'Заезд';

            const startDate = new Date(event.start_time);
            const dateStr = startDate.toLocaleString('ru-RU', {
                weekday: 'short', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit'
            });

            const isRegistered = regData.is_registered || false;
            const participants = regData.participants || [];

            const imageHtml = event.image_url
                ? `<img src="${event.image_url}" class="modal-image" alt="">`
                : `<div class="modal-image-placeholder"><i class="fas fa-bicycle"></i></div>`;

            const participantsHtml = participants.length > 0
                ? participants.slice(0, 10).map(p => {
                    const initials = ((p.first_name || '?')[0] + (p.last_name || '')[0]).toUpperCase();
                    return `<div class="participant-avatar" title="${p.first_name} ${p.last_name}">${initials}</div>`;
                }).join('') + (participants.length > 10 ? `<div class="participant-avatar">+${participants.length - 10}</div>` : '')
                : '<span style="font-size: 0.75rem; color: var(--text-muted);">Пока никого</span>';

            document.getElementById('modal-content').innerHTML = `
                ${imageHtml}
                <span class="event-type ${typeClass}" style="margin-bottom: 8px;">${typeName}</span>
                <div class="modal-title">${event.name}</div>
                ${event.description ? `<div class="modal-desc">${event.description}</div>` : ''}
                
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-value">${dateStr.split(',')[0]}</div>
                        <div class="detail-label">${dateStr.split(',').slice(1).join(',').trim()}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-value">${((event.distance_meters || 0) / 1000).toFixed(1)} км</div>
                        <div class="detail-label">Дистанция</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-value">${event.laps || 1}</div>
                        <div class="detail-label">Кругов</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-value">${event.duration_minutes || '-'} мин</div>
                        <div class="detail-label">Длительность</div>
                    </div>
                </div>

                ${event.route_name ? `
                    <div class="route-info">
                        <div class="route-name"><i class="fas fa-route"></i> ${event.route_name}</div>
                        <div class="route-world">${event.world_name || 'Watopia'}</div>
                    </div>
                ` : ''}

                <div class="participants-section">
                    <div class="participants-title"><i class="fas fa-users"></i> Участники</div>
                    <div class="participants-count">${participants.length} зарегистрировано</div>
                    <div class="participants-list">${participantsHtml}</div>
                </div>

                <button class="btn-register ${isRegistered ? 'registered' : ''}" 
                        onclick="${isRegistered ? 'confirmUnregister()' : 'registerForEvent()'}" 
                        id="register-btn">
                    <i class="fas fa-${isRegistered ? 'check-circle' : 'plus-circle'}"></i>
                    ${isRegistered ? 'Вы зарегистрированы' : 'Записаться'}
                </button>
                <button class="btn-close" onclick="closeEventModal()">Закрыть</button>
            `;
        } catch (e) {
            console.error(e);
            document.getElementById('modal-content').innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>Ошибка загрузки</p>
                </div>
                <button class="btn-close" onclick="closeEventModal()">Закрыть</button>
            `;
        }
    }

    function closeEventModal() {
        document.getElementById('event-modal').style.display = 'none';
        currentEventId = null;
    }

    async function registerForEvent() {
        if (!currentEventId) return;

        const btn = document.getElementById('register-btn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Регистрация...';

        try {
            const res = await fetch(`/api/events/${currentEventId}/register`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });

            if (res.ok) {
                btn.className = 'btn-register registered';
                btn.innerHTML = '<i class="fas fa-check-circle"></i> Вы зарегистрированы';
                btn.onclick = confirmUnregister;

                // Refresh event data
                loadEvents();
            } else {
                const err = await res.json();
                tg.showAlert(err.error || 'Ошибка регистрации');
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-plus-circle"></i> Записаться';
            }
        } catch (e) {
            tg.showAlert('Ошибка сети');
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-plus-circle"></i> Записаться';
        }
    }

    function confirmUnregister() {
        showConfirm(
            'Отменить регистрацию?',
            'Вы уверены, что хотите отменить участие в этом событии?',
            unregisterFromEvent
        );
    }

    async function unregisterFromEvent() {
        if (!currentEventId) return;

        const btn = document.getElementById('register-btn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Отмена...';

        try {
            const res = await fetch(`/api/events/${currentEventId}/unregister`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });

            if (res.ok) {
                btn.className = 'btn-register';
                btn.innerHTML = '<i class="fas fa-plus-circle"></i> Записаться';
                btn.onclick = registerForEvent;
                btn.disabled = false;

                loadEvents();
            } else {
                tg.showAlert('Ошибка отмены регистрации');
                btn.disabled = false;
            }
        } catch (e) {
            tg.showAlert('Ошибка сети');
            btn.disabled = false;
        }
    }

    // Confirmation dialog
    function showConfirm(title, text, action) {
        document.getElementById('confirm-title').textContent = title;
        document.getElementById('confirm-text').textContent = text;
        pendingAction = action;
        document.getElementById('confirm-dialog').style.display = 'flex';
    }

    function closeConfirm() {
        document.getElementById('confirm-dialog').style.display = 'none';
        pendingAction = null;
    }

    function confirmAction() {
        closeConfirm();
        if (pendingAction) pendingAction();
    }

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