{% extends "tg_layout.html" %}

{% block title %}Создать событие - reZwift{% endblock %}

{% block extra_styles %}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.form-select {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border-primary);
background: rgba(0, 0, 0, 0.4);
color: var(--text-primary);
font-size: 1rem;
outline: none;
}

.form-select:focus {
border-color: var(--orange-primary);
}

.form-select option {
background: #1a1a2e;
color: #fff;
}

.type-selector {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}

.type-btn {
padding: 12px 8px;
border-radius: 10px;
border: 1px solid var(--border-primary);
background: rgba(0, 0, 0, 0.3);
color: var(--text-muted);
font-size: 0.75rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}

.type-btn.active {
background: rgba(255, 107, 0, 0.2);
border-color: var(--orange-primary);
color: var(--gold);
}

.type-btn i {
display: block;
font-size: 1.2rem;
margin-bottom: 4px;
}

.alert {
padding: 12px;
border-radius: 10px;
margin-bottom: 12px;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
}

.alert-success {
background: rgba(56, 239, 125, 0.15);
border: 1px solid rgba(56, 239, 125, 0.3);
color: #38ef7d;
}

.alert-error {
background: rgba(235, 51, 73, 0.15);
border: 1px solid rgba(235, 51, 73, 0.3);
color: #ff6b6b;
}
{% endblock %}

{% block content %}
<div class="page-header">
    <a href="/tg/events" class="back-btn"><i class="fas fa-arrow-left"></i></a>
    <div class="page-title"><i class="fas fa-plus-circle"></i> Создать событие</div>
</div>

<div id="message"></div>

<form id="eventForm">
    <div class="card">
        <div class="form-group">
            <label class="form-label">Название события *</label>
            <input type="text" name="name" class="form-input" placeholder="Вечерняя гонка" required maxlength="100">
        </div>

        <div class="form-group">
            <label class="form-label">Тип события</label>
            <div class="type-selector">
                <div class="type-btn active" data-type="group_ride">
                    <i class="fas fa-biking"></i>
                    Заезд
                </div>
                <div class="type-btn" data-type="race">
                    <i class="fas fa-flag-checkered"></i>
                    Гонка
                </div>
                <div class="type-btn" data-type="time_trial">
                    <i class="fas fa-stopwatch"></i>
                    TT
                </div>
                <div class="type-btn" data-type="workout">
                    <i class="fas fa-heartbeat"></i>
                    Тренировка
                </div>
            </div>
            <input type="hidden" name="event_type" value="group_ride">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Дата *</label>
                <input type="date" name="date" class="form-input" required>
            </div>
            <div class="form-group">
                <label class="form-label">Время *</label>
                <input type="time" name="time" class="form-input" required>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Мир</label>
            <select name="course_id" id="course-select" class="form-select" onchange="updateRoutes()">
                <option value="6">Watopia</option>
                <option value="7">London</option>
                <option value="8">New York</option>
                <option value="9">Innsbruck</option>
                <option value="10">Bologna</option>
                <option value="11">Yorkshire</option>
                <option value="12">Crit City</option>
                <option value="13">Makuri Islands</option>
                <option value="14">France</option>
                <option value="15">Paris</option>
                <option value="16">Richmond</option>
                <option value="17">Scotland</option>
            </select>
        </div>

        <div class="form-group">
            <label class="form-label">Трасса</label>
            <select name="route_id" id="route-select" class="form-select">
                <option value="">Загрузка...</option>
            </select>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Дистанция (км)</label>
                <input type="number" name="distance" class="form-input" placeholder="30" min="1" max="500" value="30">
            </div>
            <div class="form-group">
                <label class="form-label">Круги</label>
                <input type="number" name="laps" class="form-input" placeholder="1" min="1" max="100" value="1">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Описание</label>
            <input type="text" name="description" class="form-input" placeholder="Описание события (опционально)"
                maxlength="500">
        </div>
    </div>

    <button type="submit" class="btn btn-primary" id="submitBtn" style="width: 100%;">
        <i class="fas fa-check"></i> Создать событие
    </button>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
    // Routes data storage
    let routesData = {};

    // Load routes from API
    async function loadRoutes() {
        try {
            const res = await fetch('/api/routes');
            if (res.ok) {
                routesData = await res.json();
                updateRoutes();
            }
        } catch (e) {
            console.error('Failed to load routes:', e);
        }
    }

    // Update routes dropdown when world changes
    function updateRoutes() {
        const courseId = document.getElementById('course-select').value;
        const routeSelect = document.getElementById('route-select');
        const worldData = routesData[courseId];

        routeSelect.innerHTML = '';

        if (worldData && worldData.routes && worldData.routes.length > 0) {
            worldData.routes.forEach(route => {
                const option = document.createElement('option');
                option.value = route.id;
                option.textContent = route.name;
                routeSelect.appendChild(option);
            });
        } else {
            const option = document.createElement('option');
            option.value = '';
            option.textContent = 'Нет трасс';
            routeSelect.appendChild(option);
        }
    }

    // Load routes on page load
    loadRoutes();

    // Set default date to tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    document.querySelector('input[name="date"]').value = tomorrow.toISOString().split('T')[0];
    document.querySelector('input[name="time"]').value = '20:00';

    // Type selector
    document.querySelectorAll('.type-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            document.querySelector('input[name="event_type"]').value = this.dataset.type;
        });
    });

    // Form submission
    document.getElementById('eventForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Создание...';

        const formData = new FormData(this);
        const startTime = `${formData.get('date')}T${formData.get('time')}:00`;

        const eventData = {
            name: formData.get('name'),
            event_type: formData.get('event_type'),
            course_id: parseInt(formData.get('course_id')),
            route_id: parseInt(formData.get('route_id')) || null,
            start_time: startTime,
            distance_meters: parseInt(formData.get('distance') || 30) * 1000,
            laps: parseInt(formData.get('laps') || 1),
            description: formData.get('description') || '',
            visible: true,
            subgroups: [
                { label: 'A', pace_from: 4.0, pace_to: 10.0 },
                { label: 'B', pace_from: 3.2, pace_to: 4.0 },
                { label: 'C', pace_from: 2.5, pace_to: 3.2 },
                { label: 'D', pace_from: 1.0, pace_to: 2.5 }
            ]
        };

        try {
            const res = await fetch('/api/events', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(eventData)
            });

            const data = await res.json();

            if (res.ok) {
                document.getElementById('message').innerHTML = `
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i> Событие создано!
                    </div>
                `;
                setTimeout(() => {
                    window.location.href = '/tg/events';
                }, 1500);
            } else {
                document.getElementById('message').innerHTML = `
                    <div class="alert alert-error">
                        <i class="fas fa-exclamation-circle"></i> ${data.error || 'Ошибка создания'}
                    </div>
                `;
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check"></i> Создать событие';
            }
        } catch (err) {
            document.getElementById('message').innerHTML = `
                <div class="alert alert-error">
                    <i class="fas fa-exclamation-circle"></i> Ошибка сети
                </div>
            `;
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-check"></i> Создать событие';
        }
    });
</script>
{% endblock %}