{% extends "./layout.html" %}
{% block content %}
<style>
  .events-wrapper {
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 15px;
  }

  .events-container {
    max-width: 900px;
    margin: 0 auto;
  }

  .header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
  }

  .header-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--yellow-glow);
  }

  [data-theme="light"] .header-title {
    color: var(--orange-primary);
  }

  .btn-primary {
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #FFD700;
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    color: white;
    font-weight: 700;
    cursor: pointer;
  }

  .btn-secondary {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 107, 0, 0.1);
    color: #FFA500;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-registered {
    background: rgba(56, 239, 125, 0.2);
    border-color: #38EF7D;
    color: #38EF7D;
  }

  .events-grid {
    display: grid;
    gap: 15px;
  }

  .event-card {
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    padding: 15px;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 15px;
    align-items: center;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .event-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--glass-medium);
  }

  .event-card-with-image {
    grid-template-columns: 80px 1fr auto;
    grid-template-rows: auto auto;
  }

  .event-image-container {
    grid-column: 1 / -1;
    border-radius: 8px;
    overflow: hidden;
    max-height: 150px;
  }

  .event-image-container img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .event-time {
    text-align: center;
    background: var(--glass-medium);
    padding: 10px;
    border-radius: 8px;
  }

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

  .event-hour {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--yellow-glow);
  }

  [data-theme="light"] .event-hour {
    color: var(--orange-primary);
  }

  .event-info h3 {
    color: var(--yellow-glow);
    margin: 0 0 5px 0;
  }

  [data-theme="light"] .event-info h3 {
    color: var(--text-primary);
  }

  .event-info p {
    color: var(--text-accent);
    margin: 0;
    font-size: 0.8rem;
  }
  }

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

  .event-type {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
  }

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

  .event-type.group_ride {
    background: rgba(56, 239, 125, 0.2);
    color: #38EF7D;
  }

  .categories {
    display: flex;
    gap: 5px;
  }

  .category-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
  }

  .category-badge.A {
    background: #EB3349;
  }

  .category-badge.B {
    background: #38EF7D;
  }

  .category-badge.C {
    background: #4FACFE;
  }

  .category-badge.D {
    background: #FFD700;
  }

  .tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
  }

  .tab {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--glass-light);
    color: var(--text-accent);
    font-weight: 600;
    cursor: pointer;
  }

  .tab.active {
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    color: white;
  }

  .event-card {
    cursor: pointer;
    transition: transform 0.2s;
  }

  .event-card:hover {
    transform: translateX(5px);
    border-color: #FFD700;
  }

  .participant-list {
    max-height: 300px;
    overflow-y: auto;
  }

  .participant-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.2);
  }

  .participant-item:last-child {
    border-bottom: none;
  }

  .participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
  }

  .back-link {
    color: var(--text-accent);
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
  }

  .back-link:hover {
    color: var(--yellow-glow);
  }

  [data-theme="light"] .back-link:hover {
    color: var(--orange-primary);
  }

  .empty-state {
    text-align: center;
    padding: 50px;
    color: var(--text-accent);
  }

  /* Modal */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .modal-overlay.active {
    opacity: 1;
  }

  .modal {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.98), rgba(30, 30, 30, 0.95));
    border: 2px solid rgba(255, 140, 0, 0.4);
    border-radius: 20px;
    padding: 25px;
    max-width: 520px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(255, 140, 0, 0.15);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .modal-overlay.active .modal {
    transform: scale(1) translateY(0);
  }

  [data-theme="light"] .modal {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.95));
  }

  .modal-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 20px;
  }

  [data-theme="light"] .modal-title {
    color: #e65100;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-label {
    display: block;
    color: #FFD700;
    font-size: 0.8rem;
    margin-bottom: 6px;
  }

  [data-theme="light"] .form-label {
    color: #333;
    font-weight: 600;
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid rgba(255, 140, 0, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }

  [data-theme="light"] .form-input,
  [data-theme="light"] .form-select,
  [data-theme="light"] .form-textarea {
    background: #fff;
    color: #333;
    border: 2px solid #ddd;
  }

  [data-theme="light"] .form-input:focus,
  [data-theme="light"] .form-select:focus,
  [data-theme="light"] .form-textarea:focus {
    border-color: #ff8c00;
    outline: none;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .admin-buttons {
    display: flex;
    gap: 5px;
    margin-top: 8px;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .btn-edit {
    background: rgba(79, 172, 254, 0.2);
    color: #4FACFE;
  }

  .btn-edit:hover {
    background: rgba(79, 172, 254, 0.4);
  }

  .btn-delete {
    background: rgba(235, 51, 73, 0.2);
    color: #EB3349;
  }

  .btn-delete:hover {
    background: rgba(235, 51, 73, 0.4);
  }

  /* === PREMIUM BETA BADGE === */
  .beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.3), rgba(79, 70, 229, 0.3));
    border: 1px solid rgba(147, 51, 234, 0.5);
    border-radius: 20px;
    color: #a78bfa;
    backdrop-filter: blur(4px);
    animation: betaPulse 3s ease-in-out infinite;
    vertical-align: middle;
  }

  .beta-badge i {
    font-size: 8px;
  }

  @keyframes betaPulse {

    0%,
    100% {
      box-shadow: 0 0 5px rgba(147, 51, 234, 0.3);
      opacity: 1;
    }

    50% {
      box-shadow: 0 0 15px rgba(147, 51, 234, 0.5);
      opacity: 0.9;
    }
  }

  [data-theme="light"] .beta-badge {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(79, 70, 229, 0.15));
    color: #7c3aed;
  }

  /* Experimental section wrapper */
  .experimental-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(147, 51, 234, 0.3);
  }

  .experimental-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .experimental-header i {
    font-size: 14px;
  }

  /* Confirm Dialog */
  .confirm-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: center;
    z-index: 2000;
    padding: 20px;
    animation: confirmFadeIn 0.2s ease;
  }

  @keyframes confirmFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .confirm-box {
    background: var(--bg-card);
    border: 2px solid var(--orange-primary);
    border-radius: 16px;
    padding: 25px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    animation: confirmScaleIn 0.2s ease;
  }

  @keyframes confirmScaleIn {
    from {
      transform: scale(0.9);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .confirm-icon {
    font-size: 3rem;
    color: #FFD700;
    margin-bottom: 15px;
  }

  .confirm-icon.danger {
    color: #FF4444;
  }

  .confirm-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFD700;
    margin-bottom: 10px;
  }

  .confirm-text {
    font-size: 0.9rem;
    color: var(--text-accent);
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .confirm-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
  }

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

  .confirm-btn.danger {
    background: linear-gradient(135deg, #FF4444, #CC0000);
    color: white;
  }

  .confirm-btn.secondary {
    background: rgba(255, 140, 0, 0.1);
    border: 2px solid rgba(255, 140, 0, 0.4);
    color: #FFA500;
  }

  .confirm-btn:hover {
    transform: translateY(-2px);
  }
</style>

<div class="events-wrapper">
  <div class="events-container">
    <a href="{{ url_for('user_home', username=username) }}" class="back-link">
      <i class="fas fa-arrow-left"></i> Назад
    </a>

    <div class="header-section">
      <div class="header-title"><i class="fas fa-calendar-alt"></i> События</div>
      {% if current_user.is_authenticated %}
      <button class="btn-primary" onclick="openModal()">
        <i class="fas fa-plus"></i> Создать
      </button>
      {% endif %}
    </div>

    <div class="tabs">
      <button class="tab active" onclick="filterEvents('all', this)">Все</button>
      <button class="tab" onclick="filterEvents('race', this)">Гонки</button>
      <button class="tab" onclick="filterEvents('group_ride', this)">Групповые</button>
      <button class="tab" onclick="filterEvents('workout', this)">Тренировки</button>
    </div>

    <div class="tabs" style="margin-top: -10px; margin-bottom: 15px;">
      <button class="tab archive-tab active" onclick="setArchiveMode(false, this)">📅 Предстоящие</button>
      <button class="tab archive-tab" onclick="setArchiveMode(true, this)">📁 Архив</button>
    </div>

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

<!-- Create Modal -->
<div class="modal-overlay" id="create-modal" onclick="if(event.target === this) closeModal()">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="modal-title"><i class="fas fa-plus-circle"></i> Создать событие</div>
    <form id="create-form">
      <div class="form-group">
        <label class="form-label">Название</label>
        <input type="text" class="form-input" name="name" required>
      </div>
      <div class="form-group">
        <label class="form-label">Описание</label>
        <textarea class="form-textarea" name="description" rows="2"></textarea>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Тип</label>
          <select class="form-select" name="event_type">
            <option value="group_ride">Групповой заезд</option>
            <option value="race">Гонка</option>
            <option value="workout">Тренировка</option>
            <option value="time_trial">Раздельный старт</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Мир</label>
          <select class="form-select" name="course_id" id="create-course" onchange="updateRoutes('create')">
            <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>
      <div class="form-group">
        <label class="form-label">Трасса <span class="beta-badge"><i class="fas fa-route"></i> New</span></label>
        <select class="form-select" name="route_id" id="create-route">
          <option value="">Загрузка...</option>
        </select>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Дата/время</label>
          <input type="datetime-local" class="form-input" name="start_time" required>
        </div>
        <div class="form-group">
          <label class="form-label">Круги (0 = без лимита)</label>
          <input type="number" class="form-input" name="laps" value="0" min="0">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Длительность (мин, 0 = без лимита)</label>
          <input type="number" class="form-input" name="duration_minutes" value="0" min="0">
        </div>
        <div class="form-group">
          <label class="form-label">Дистанция (км)</label>
          <input type="number" class="form-input" name="distance_km" id="create-distance" value="25" min="1" step="0.1">
          <small id="create-distance-hint" class="form-hint"
            style="color: var(--text-muted); font-size: 12px; margin-top: 5px; display: none;">
            <i class="fas fa-info-circle"></i> <span id="create-distance-text"></span>
          </small>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Картинка события</label>
        <div class="image-input-container" style="display: flex; flex-direction: column; gap: 10px;">
          <div class="image-preview" id="create-image-preview"
            style="display: none; border-radius: 8px; overflow: hidden; max-height: 150px; background: var(--glass-medium);">
            <img id="create-preview-img" style="width: 100%; height: 150px; object-fit: cover;" alt="Preview">
          </div>
          <div class="image-error" id="create-image-error" style="display: none; color: #EB3349; font-size: 12px;">
            <i class="fas fa-exclamation-triangle"></i> Не удалось загрузить изображение
          </div>
          <input type="text" class="form-input" name="image_url" id="create-image-url" placeholder="https://..."
            oninput="handleImageUrlInput('create')">
          <small class="form-hint" style="color: var(--text-muted); font-size: 12px; margin-top: 5px;">
            Стабильно работают ссылки с Imgur. Пример: <span
              style="user-select: all; color: var(--action-primary);">https://i.imgur.com/5o0k64L.png</span>
          </small>
          <div style="display: none; gap: 10px; align-items: center;">
            <span style="color: var(--text-muted); font-size: 12px;">или</span>
            <label class="btn-secondary" style="cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
              <i class="fas fa-upload"></i> Загрузить файл
              <input type="file" id="create-image-file" accept="image/*" style="display: none;"
                onchange="handleFileSelect(this, 'create')">
            </label>
          </div>
          <input type="hidden" name="uploaded_image" id="create-uploaded-image">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Категории (группы)</label>
        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
          <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
            <input type="checkbox" name="cat_a" value="A" checked> <span class="category-badge A">A</span>
          </label>
          <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
            <input type="checkbox" name="cat_b" value="B" checked> <span class="category-badge B">B</span>
          </label>
          <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
            <input type="checkbox" name="cat_c" value="C"> <span class="category-badge C">C</span>
          </label>
          <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
            <input type="checkbox" name="cat_d" value="D"> <span class="category-badge D">D</span>
          </label>
        </div>
      </div>

      <!-- Experimental Features Section -->
      <div class="experimental-section">
        <div class="experimental-header">
          <i class="fas fa-flask"></i> Экспериментальные функции
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Теги (через ;) <span class="beta-badge"><i class="fas fa-flask"></i>
                Beta</span></label>
            <input type="text" class="form-input" name="tags" placeholder="fenced;communityevent">
          </div>
          <div class="form-group" style="display: flex; align-items: center; padding-top: 25px;">
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" name="rubberbanding">
              <span>Keep Together <span class="beta-badge"><i class="fas fa-flask"></i> Beta</span></span>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">URL воркаута (.zwo) <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="url" class="form-input" name="workout_url"
            placeholder="https://cdn.zwift.com/workouts/CafeRide.zwo">
          <small style="color: var(--text-muted); font-size: 11px;">Только для типа "Тренировка"</small>
        </div>
        <div class="form-group">
          <label class="form-label">ID лидеров (через запятую) <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="text" class="form-input" name="leader_ids" placeholder="1, 2, 3">
          <small style="color: var(--text-muted); font-size: 11px;">Player ID лидеров заезда</small>
        </div>
        <div class="form-group">
          <label class="form-label">Jersey Hash <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="number" class="form-input" name="jersey_hash" placeholder="493134166">
          <small style="color: var(--text-muted); font-size: 11px;">ID кастомной майки события</small>
        </div>
      </div>
      <div class="modal-actions">
        <button type="submit" class="btn-primary">Создать</button>
        <button type="button" class="btn-secondary" onclick="closeModal()">Отмена</button>
      </div>
    </form>
  </div>
</div>

<script>
  // Set admin flag and player ID from server
  window.isAdmin = {{ 'true' if is_admin else 'false' }};
  window.currentPlayerId = {{ current_user.player_id if current_user.is_authenticated else 'null' }};

  let allEvents = [];
  let currentFilter = 'all';
  let showArchive = false;
  let routesData = {};  // Routes by course_id

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

  // Update route select when course changes
  function updateRoutes(prefix) {
    const courseSelect = document.getElementById(`${prefix}-course`);
    const routeSelect = document.getElementById(`${prefix}-route`);

    if (!courseSelect || !routeSelect) return;

    const courseId = courseSelect.value;
    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;

        // Store distance in data attribute
        option.dataset.distanceKm = route.distance_km || 0;

        // Format: "Название | 25.3 км ↗ 340 м"
        let label = route.name;
        if (route.distance_km) {
          label += ` | ${route.distance_km} км`;
          if (route.ascent_m) {
            label += ` ↗ ${route.ascent_m} м`;
          }
        }

        option.textContent = label;
        routeSelect.appendChild(option);
      });

      // Auto-fill distance when route changes (only for 'create' modal)
      if (prefix === 'create') {
        // Remove any existing listener to prevent duplicates
        const oldListener = routeSelect.dataset.changeListener;
        if (oldListener) {
          routeSelect.removeEventListener('change', eval(oldListener));
        }

        const newListener = function () {
          const selectedOption = this.options[this.selectedIndex];
          const routeDistance = parseFloat(selectedOption.dataset.distanceKm) || 0;
          const distanceInput = document.getElementById('create-distance');
          const distanceHint = document.getElementById('create-distance-hint');
          const distanceText = document.getElementById('create-distance-text');

          if (routeDistance > 0 && distanceInput) {
            distanceInput.value = routeDistance;
            distanceHint.style.display = 'block';
            distanceText.textContent = `Длина маршрута: ${routeDistance} км`;
          } else {
            distanceHint.style.display = 'none';
            distanceText.textContent = '';
          }
        };
        routeSelect.addEventListener('change', newListener);
        routeSelect.dataset.changeListener = newListener.name || newListener.toString(); // Store reference for removal

        // Trigger change event immediately after populating to set initial distance
        newListener.call(routeSelect);
      }
    } else {
      const option = document.createElement('option');
      option.value = '';
      option.textContent = 'Нет доступных трасс';
      routeSelect.appendChild(option);
      // If no routes, hide distance hint
      if (prefix === 'create') {
        const distanceHint = document.getElementById('create-distance-hint');
        if (distanceHint) distanceHint.style.display = 'none';
      }
    }
  }

  // Get route name by route_id
  function getRouteName(courseId, routeId) {
    if (!routesData || !courseId) return null;
    const worldData = routesData[courseId];
    if (!worldData || !worldData.routes) return null;
    const route = worldData.routes.find(r => r.id == routeId);
    return route ? route.name : null;
  }

  // Load routes on page load
  document.addEventListener('DOMContentLoaded', () => {
    loadRoutes();
  });

  function setArchiveMode(archive, clickedTab) {
    showArchive = archive;

    // Update active tab
    document.querySelectorAll('.archive-tab').forEach(t => t.classList.remove('active'));
    if (clickedTab) clickedTab.classList.add('active');

    filterEvents(currentFilter);
  }

  function filterEvents(type, clickedTab) {
    currentFilter = type;

    // Update type tabs
    if (clickedTab && !clickedTab.classList.contains('archive-tab')) {
      document.querySelectorAll('.tabs:first-of-type .tab').forEach(t => t.classList.remove('active'));
      clickedTab.classList.add('active');
    }

    const now = new Date();
    let filtered = allEvents.filter(ev => {
      // Type filter
      const typeMatch = type === 'all' || ev.event_type === type;

      // Date filter: upcoming vs archive
      const eventDate = new Date(ev.start_time);
      const dateMatch = showArchive ? eventDate < now : eventDate >= now;

      return typeMatch && dateMatch;
    });

    renderEvents(filtered);
  }

  async function loadEvents() {
    try {
      const response = await fetch('/api/events?upcoming=false');
      if (response.ok) {
        const data = await response.json();
        allEvents = data.events || data;  // Support both new and old format
        window.serverTime = data.server_time ? new Date(data.server_time) : new Date();
        filterEvents(currentFilter);
      } else {
        showError('Не удалось загрузить');
      }
    } catch (e) {
      console.error(e);
      showError('Ошибка загрузки');
    }
  }

  // Normalize image URLs for different services
  function normalizeImageUrl(url) {
    if (!url) return null;
    url = url.trim();
    if (!url) return null;

    // Check if it's a local upload path - return as-is
    if (url.startsWith('/event-images/')) {
      return url;
    }

    // Google Drive: convert share link to direct
    // Format: https://drive.google.com/file/d/FILE_ID/view?usp=sharing
    // or: https://drive.google.com/open?id=FILE_ID
    const driveMatch = url.match(/drive\.google\.com\/(?:file\/d\/|open\?id=)([a-zA-Z0-9_-]+)/);
    if (driveMatch) {
      return `https://drive.google.com/uc?export=view&id=${driveMatch[1]}`;
    }

    // Dropbox: convert www link to dl link
    if (url.includes('dropbox.com')) {
      return url.replace('www.dropbox.com', 'dl.dropboxusercontent.com').replace('?dl=0', '').replace('?dl=1', '');
    }

    // Imgur: convert page link to direct image
    const imgurMatch = url.match(/imgur\.com\/([a-zA-Z0-9]+)(?:\.\w+)?$/);
    if (imgurMatch && !url.includes('i.imgur.com')) {
      return `https://i.imgur.com/${imgurMatch[1]}.jpg`;
    }

    // VK Photos: extract from various VK photo URL formats
    // Format: https://vk.com/photo-123456_789 or album links
    if (url.includes('vk.com/photo') || url.includes('vk.com/wall') || url.includes('sun') && url.includes('.userapi.com')) {
      // VK direct CDN links (sun*.userapi.com) - return as-is
      if (url.includes('.userapi.com')) {
        return url;
      }
      // VK page links can't be easily converted, return as-is
      return url;
    }

    // Yandex Disk: use downloader API for public links
    // Format: https://disk.yandex.ru/i/HASH or https://yadi.sk/i/HASH
    const yandexMatch = url.match(/(?:disk\.yandex\.ru|yadi\.sk)\/(?:i|d)\/([a-zA-Z0-9_-]+)/);
    if (yandexMatch) {
      // Yandex Disk public API for getting direct download link
      return `https://getfile.dokpub.com/yandex/get/${url}`;
    }

    // Telegram CDN - various formats
    if (url.includes('telegram') || url.includes('t.me')) {
      // Telegram CDN direct links
      if (url.includes('cdn') || url.includes('telegram-cdn')) {
        return url;
      }
      // t.me links can't be directly embedded
      return url;
    }

    // Pinterest: extract image from pin
    if (url.includes('pinterest.com') || url.includes('pin.it')) {
      // Pinterest images from i.pinimg.com are direct
      if (url.includes('pinimg.com')) {
        return url;
      }
      // Pin pages can't be easily converted
      return url;
    }

    // Reddit: i.redd.it links are direct
    if (url.includes('i.redd.it') || url.includes('preview.redd.it')) {
      return url.split('?')[0]; // Remove query params
    }

    // Discord CDN
    if (url.includes('cdn.discordapp.com') || url.includes('media.discordapp.net')) {
      return url.split('?')[0]; // Clean URL
    }

    // Giphy
    if (url.includes('giphy.com')) {
      const giphyMatch = url.match(/giphy\.com\/(?:gifs|media)\/(?:.*-)?([a-zA-Z0-9]+)/);
      if (giphyMatch) {
        return `https://media.giphy.com/media/${giphyMatch[1]}/giphy.gif`;
      }
    }

    // Direct image links with common extensions
    const imageExtensions = /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i;
    if (imageExtensions.test(url)) {
      return url;
    }

    // Unknown format - return as-is, browser will try to load
    return url;
  }

  // Test if an image URL is loadable
  function testImageUrl(url, callback) {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => callback(true, url);
    img.onerror = () => callback(false, url);
    img.src = url;
  }

  // Debounce helper
  let imageUrlTimeout = null;
  function handleImageUrlInput(prefix) {
    clearTimeout(imageUrlTimeout);
    imageUrlTimeout = setTimeout(() => {
      loadImagePreview(prefix);
    }, 500);
  }

  // Load and show image preview from URL
  function loadImagePreview(prefix) {
    const urlInput = document.getElementById(`${prefix}-image-url`) || document.getElementById(`${prefix}-image_url`);
    const previewContainer = document.getElementById(`${prefix}-image-preview`);
    const previewImg = document.getElementById(`${prefix}-preview-img`);
    const errorDiv = document.getElementById(`${prefix}-image-error`);

    if (!urlInput || !previewContainer) return;

    const url = urlInput.value.trim();

    // Hide everything first
    previewContainer.style.display = 'none';
    if (errorDiv) errorDiv.style.display = 'none';

    if (!url) return;

    // For local uploads, show preview directly
    if (url.startsWith('/event-images/')) {
      previewImg.src = url;
      previewContainer.style.display = 'block';
      return;
    }

    // Normalize the URL
    const normalizedUrl = normalizeImageUrl(url);

    // Test if image loads
    testImageUrl(normalizedUrl, (success, testedUrl) => {
      if (success) {
        previewImg.src = testedUrl;
        previewContainer.style.display = 'block';
        if (errorDiv) errorDiv.style.display = 'none';
      } else {
        // CORS may block preview but URL might still be valid
        // Show "URL accepted" indicator instead of error
        previewContainer.style.display = 'none';
        if (errorDiv) {
          errorDiv.innerHTML = '<i class="fas fa-check-circle" style="color: #38EF7D;"></i> URL принят (превью недоступно из-за CORS)';
          errorDiv.style.color = '#38EF7D';
          errorDiv.style.display = 'block';
        }
      }
    });
  }

  // Interactive crop state
  let cropState = {
    prefix: null,
    img: null,
    filename: null,
    selection: { x: 0, y: 0, w: 0, h: 0 },
    dragging: false,
    resizing: false,
    startX: 0,
    startY: 0
  };

  // Handle file selection - open crop modal
  function handleFileSelect(input, prefix) {
    const file = input.files[0];
    if (!file) return;

    // Validate file type
    if (!file.type.startsWith('image/')) {
      alert('Пожалуйста, выберите изображение');
      return;
    }

    // Validate file size (max 10MB)
    if (file.size > 10 * 1024 * 1024) {
      alert('Файл слишком большой. Максимум 10MB');
      return;
    }

    cropState.prefix = prefix;
    cropState.filename = file.name;

    const reader = new FileReader();
    reader.onload = (e) => {
      openCropModal(e.target.result);
    };
    reader.readAsDataURL(file);

    // Reset input so same file can be selected again
    input.value = '';
  }

  // Open crop modal with image
  function openCropModal(dataUrl) {
    const modal = document.getElementById('crop-modal');
    const canvas = document.getElementById('crop-canvas');
    const ctx = canvas.getContext('2d');

    const img = new Image();
    img.onload = () => {
      cropState.img = img;

      // Fit image to modal (max 600px wide)
      const maxW = 600;
      const scale = img.width > maxW ? maxW / img.width : 1;
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;

      // Initialize selection (centered, 7:4 ratio)
      const ratio = 7 / 4;
      let selW = canvas.width * 0.8;
      let selH = selW / ratio;

      if (selH > canvas.height * 0.8) {
        selH = canvas.height * 0.8;
        selW = selH * ratio;
      }

      cropState.selection = {
        x: (canvas.width - selW) / 2,
        y: (canvas.height - selH) / 2,
        w: selW,
        h: selH
      };

      drawCropCanvas();
      modal.style.display = 'flex';
    };
    img.src = dataUrl;
  }

  // Draw crop canvas with selection overlay
  function drawCropCanvas() {
    const canvas = document.getElementById('crop-canvas');
    const ctx = canvas.getContext('2d');
    const img = cropState.img;
    const sel = cropState.selection;

    if (!img) return;

    // Draw image
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // Draw dark overlay
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Clear selection area to show image
    ctx.clearRect(sel.x, sel.y, sel.w, sel.h);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();
    ctx.rect(sel.x, sel.y, sel.w, sel.h);
    ctx.clip();
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.restore();

    // Selection border
    ctx.strokeStyle = '#FFD700';
    ctx.lineWidth = 2;
    ctx.setLineDash([5, 5]);
    ctx.strokeRect(sel.x, sel.y, sel.w, sel.h);
    ctx.setLineDash([]);

    // Corner handles
    const handleSize = 10;
    ctx.fillStyle = '#FFD700';
    // Top-left
    ctx.fillRect(sel.x - handleSize / 2, sel.y - handleSize / 2, handleSize, handleSize);
    // Top-right
    ctx.fillRect(sel.x + sel.w - handleSize / 2, sel.y - handleSize / 2, handleSize, handleSize);
    // Bottom-left
    ctx.fillRect(sel.x - handleSize / 2, sel.y + sel.h - handleSize / 2, handleSize, handleSize);
    // Bottom-right
    ctx.fillRect(sel.x + sel.w - handleSize / 2, sel.y + sel.h - handleSize / 2, handleSize, handleSize);

    // Size indicator - show final output size, not canvas size
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(sel.x, sel.y + sel.h + 5, 80, 20);
    ctx.fillStyle = '#FFD700';
    ctx.font = '12px Inter';
    ctx.fillText(`→ 700×400`, sel.x + 5, sel.y + sel.h + 19);
  }

  // Mouse events for crop selection
  document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('crop-canvas');
    if (!canvas) return;

    canvas.addEventListener('mousedown', (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const sel = cropState.selection;
      const handleSize = 15;

      // Check if on corner handle (resize)
      if (x >= sel.x + sel.w - handleSize && x <= sel.x + sel.w + handleSize &&
        y >= sel.y + sel.h - handleSize && y <= sel.y + sel.h + handleSize) {
        cropState.resizing = true;
        cropState.startX = x;
        cropState.startY = y;
        return;
      }

      // Check if inside selection (drag)
      if (x >= sel.x && x <= sel.x + sel.w && y >= sel.y && y <= sel.y + sel.h) {
        cropState.dragging = true;
        cropState.startX = x - sel.x;
        cropState.startY = y - sel.y;
      }
    });

    canvas.addEventListener('mousemove', (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const sel = cropState.selection;

      if (cropState.dragging) {
        sel.x = Math.max(0, Math.min(canvas.width - sel.w, x - cropState.startX));
        sel.y = Math.max(0, Math.min(canvas.height - sel.h, y - cropState.startY));
        drawCropCanvas();
      } else if (cropState.resizing) {
        const ratio = 7 / 4;
        const dx = x - cropState.startX;
        const newW = Math.max(100, sel.w + dx);
        const newH = newW / ratio;

        if (sel.x + newW <= canvas.width && sel.y + newH <= canvas.height) {
          sel.w = newW;
          sel.h = newH;
          cropState.startX = x;
          cropState.startY = y;
        }
        drawCropCanvas();
      }
    });

    canvas.addEventListener('mouseup', () => {
      cropState.dragging = false;
      cropState.resizing = false;
    });

    canvas.addEventListener('mouseleave', () => {
      cropState.dragging = false;
      cropState.resizing = false;
    });
  });

  // Confirm crop and upload
  async function confirmCrop() {
    const canvas = document.getElementById('crop-canvas');
    const sel = cropState.selection;
    const img = cropState.img;
    const prefix = cropState.prefix;

    // Calculate actual image coordinates (canvas may be scaled)
    const scale = img.width / canvas.width;
    const srcX = sel.x * scale;
    const srcY = sel.y * scale;
    const srcW = sel.w * scale;
    const srcH = sel.h * scale;

    // Create output canvas at 700x400
    const outCanvas = document.createElement('canvas');
    outCanvas.width = 700;
    outCanvas.height = 400;
    const outCtx = outCanvas.getContext('2d');

    outCtx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 700, 400);

    // Upload
    outCanvas.toBlob(async (blob) => {
      const formData = new FormData();
      formData.append('image', blob, `event_${Date.now()}.jpg`);

      try {
        const response = await fetch('/api/events/upload-image', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          const result = await response.json();
          const uploadedUrl = result.url;

          const urlInput = document.getElementById(`${prefix}-image-url`) || document.getElementById(`${prefix}-image_url`);
          if (urlInput) urlInput.value = uploadedUrl;

          // Show preview and hide any error messages
          const previewContainer = document.getElementById(`${prefix}-image-preview`);
          const previewImg = document.getElementById(`${prefix}-preview-img`);
          const errorDiv = document.getElementById(`${prefix}-image-error`);

          if (previewImg) previewImg.src = uploadedUrl;
          if (previewContainer) previewContainer.style.display = 'block';
          if (errorDiv) errorDiv.style.display = 'none';

          closeCropModal();
        } else {
          const error = await response.json();
          alert('Ошибка загрузки: ' + (error.error || 'Неизвестная ошибка'));
        }
      } catch (err) {
        console.error('Upload error:', err);
        alert('Ошибка при загрузке файла');
      }
    }, 'image/jpeg', 0.9);
  }



  function renderEvents(events) {
    const container = document.getElementById('events-list');

    if (!events.length) {
      container.innerHTML = '<div class="empty-state">Нет событий</div>';
      return;
    }

    // Map course_id to name
    const courseNames = {
      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'
    };

    container.innerHTML = events.map(ev => {
      const d = new Date(ev.start_time);
      // Use server time for countdown calculation (handles timezone difference)
      const now = window.serverTime || new Date();
      const diffMs = d - now;
      const diffMins = Math.floor(diffMs / 60000);
      const diffHours = Math.floor(diffMins / 60);
      const diffDays = Math.floor(diffHours / 24);

      // Format countdown
      let countdown = '';
      if (diffMs < 0) {
        countdown = 'Началось';
      } else if (diffDays > 0) {
        countdown = `через ${diffDays}д ${diffHours % 24}ч`;
      } else if (diffHours > 0) {
        countdown = `через ${diffHours}ч ${diffMins % 60}м`;
      } else if (diffMins > 0) {
        countdown = `через ${diffMins} мин`;
      } else {
        countdown = 'Скоро!';
      }

      const dateStr = d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
      const timeStr = d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
      const cats = (ev.subgroups || []).map(s => `<span class="category-badge ${s.label}">${s.label}</span>`).join('');

      const btnClass = ev.is_registered ? 'btn-secondary btn-registered' : 'btn-secondary';
      const btnText = ev.is_registered ? '<i class="fas fa-check"></i> Вы записаны' : '<i class="fas fa-user-plus"></i> Записаться';
      const btnAction = ev.is_registered ? `unregister(${ev.id})` : `register(${ev.id})`;

      const typeNames = {
        'race': 'Гонка',
        'group_ride': 'Групповой заезд',
        'workout': 'Тренировка',
        'time_trial': 'Раздельный старт'
      };

      // Format laps/duration/distance
      const lapsText = ev.laps > 0 ? (ev.laps === 1 ? '1 круг' : (ev.laps < 5 ? `${ev.laps} круга` : `${ev.laps} кругов`)) : '';
      const durationMin = Math.round((ev.duration_seconds || 0) / 60);
      const durationText = durationMin > 0 ? `${durationMin} мин` : '';
      const distanceKm = ((ev.distance_meters || 0) / 1000).toFixed(1);
      const distanceText = ev.distance_meters > 0 ? `${distanceKm} км` : '';

      const participantsText = (ev.registered_count || 0) === 1 ? '1 участник' : `${ev.registered_count || 0} участников`;
      const description = ev.description && ev.description !== ev.name ? ev.description : '';
      const mapName = courseNames[ev.course_id] || 'Watopia';

      // Edit/Delete buttons (only if owner or admin)
      const isOwner = window.currentPlayerId && ev.organizer_id === window.currentPlayerId;
      const canEdit = window.isAdmin || isOwner;
      const adminBtns = canEdit ? `
        <div class="admin-buttons">
          <button class="btn-icon btn-edit" onclick="event.stopPropagation(); openEditModal(${ev.id})" title="Редактировать">
            <i class="fas fa-edit"></i>
          </button>
          <button class="btn-icon btn-delete" onclick="event.stopPropagation(); deleteEvent(${ev.id})" title="Удалить">
            <i class="fas fa-trash"></i>
          </button>
        </div>
      ` : '';

      const imageUrl = normalizeImageUrl(ev.image_url);
      const imageHtml = imageUrl ? `
        <div class="event-image-container">
          <img src="${imageUrl}" alt="" onerror="this.parentElement.style.display='none'">
        </div>` : '';

      const routeName = getRouteName(ev.course_id, ev.route_id);
      const locationText = routeName ? `${mapName} • ${routeName}` : mapName;

      return `
      <div class="event-card${imageUrl ? ' event-card-with-image' : ''}" onclick="showEventDetails(${ev.id}, '${ev.name.replace(/'/g, "\\'")}')">
        ${imageHtml}
        <div class="event-time">
          <div class="event-date">${dateStr}</div>
          <div class="event-hour">${timeStr}</div>
          <div class="event-countdown" style="font-size: 11px; color: var(--accent); margin-top: 4px;">${countdown}</div>
        </div>
        <div class="event-info">
          <h3>${ev.name}</h3>
          ${description ? `<p>${description}</p>` : ''}
          <div class="event-meta">
            <span class="event-type ${ev.event_type}">${typeNames[ev.event_type] || ev.event_type}</span>
            <span><i class="fas fa-map-marker-alt"></i> ${locationText}</span>
            ${lapsText ? `<span><i class="fas fa-redo"></i> ${lapsText}</span>` : ''}
            ${durationText ? `<span><i class="fas fa-clock"></i> ${durationText}</span>` : ''}
            ${distanceText ? `<span><i class="fas fa-road"></i> ${distanceText}</span>` : ''}
            <span><i class="fas fa-users"></i> ${participantsText}</span>
          </div>
        </div>
        <div>
          <div class="categories">${cats}</div>
          <button class="${btnClass}" onclick="event.stopPropagation(); ${btnAction}" style="margin-top:10px;">${btnText}</button>
          ${adminBtns}
        </div>
      </div>
    `;
    }).join('');
  }

  function showError(msg) {
    document.getElementById('events-list').innerHTML = `<div class="empty-state">${msg}</div>`;
  }

  async function register(eventId) {
    const res = await fetch(`/api/events/${eventId}/register`, { method: 'POST', headers: { 'Content-Type': 'application/json' } });
    if (res.ok) {
      alert('Записан!');
      loadEvents();
    } else {
      const data = await res.json();
      alert(data.error || 'Ошибка');
    }
  }

  async function unregister(eventId) {
    showConfirmDialog('Отписаться?', 'Вы уверены, что хотите отменить регистрацию?', () => doUnregister(eventId), 'warning');
  }

  async function doUnregister(eventId) {
    const res = await fetch(`/api/events/${eventId}/unregister`, { method: 'POST', headers: { 'Content-Type': 'application/json' } });
    if (res.ok) {
      loadEvents();
    } else {
      alert('Ошибка');
    }
  }

  function openModal() {
    const modal = document.getElementById('create-modal');
    modal.style.display = 'flex';
    setTimeout(() => modal.classList.add('active'), 10);
  }

  function closeModal() {
    const modal = document.getElementById('create-modal');
    modal.classList.remove('active');
    setTimeout(() => modal.style.display = 'none', 300);
  }

  function openDetailsModal() {
    const modal = document.getElementById('details-modal');
    modal.style.display = 'flex';
    setTimeout(() => modal.classList.add('active'), 10);
  }

  function closeDetailsModal() {
    const modal = document.getElementById('details-modal');
    modal.classList.remove('active');
    setTimeout(() => modal.style.display = 'none', 300);
  }

  function openEditModal() {
    const modal = document.getElementById('edit-modal');
    modal.style.display = 'flex';
    setTimeout(() => modal.classList.add('active'), 10);
  }

  function closeEditModal() {
    const modal = document.getElementById('edit-modal');
    modal.classList.remove('active');
    setTimeout(() => modal.style.display = 'none', 300);
    editingEventId = null;
  }

  function openCropModal() {
    const modal = document.getElementById('crop-modal');
    modal.style.display = 'flex';
    setTimeout(() => modal.classList.add('active'), 10);
  }

  function closeCropModal() {
    const modal = document.getElementById('crop-modal');
    modal.classList.remove('active');
    setTimeout(() => modal.style.display = 'none', 300);
    if (typeof cropState !== 'undefined') cropState.img = null;
  }

  // Close modals on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      const modals = ['create-modal', 'details-modal', 'edit-modal', 'crop-modal'];
      modals.forEach(id => {
        const modal = document.getElementById(id);
        if (modal && modal.classList.contains('active')) {
          modal.classList.remove('active');
          setTimeout(() => modal.style.display = 'none', 300);
        }
      });
    }
  });

  document.getElementById('create-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const fd = new FormData(this);
    const data = {
      name: fd.get('name'),
      description: fd.get('description'),
      event_type: fd.get('event_type'),
      course_id: parseInt(fd.get('course_id')),
      route_id: parseInt(fd.get('route_id')) || null,
      start_time: fd.get('start_time'),
      laps: parseInt(fd.get('laps')) || 0,
      duration_seconds: (parseInt(fd.get('duration_minutes')) || 0) * 60,
      distance_meters: (parseFloat(fd.get('distance_km')) || 25) * 1000,
      image_url: fd.get('image_url') || '',
      tags: fd.get('tags') || '',
      rubberbanding: document.querySelector('input[name="rubberbanding"]')?.checked || false,
      workout_url: fd.get('workout_url') || '',
      leader_ids: (fd.get('leader_ids') || '').split(',').map(s => parseInt(s.trim())).filter(n => n > 0),
      jersey_hash: parseInt(fd.get('jersey_hash')) || 0,
      subgroups: []
    };

    // Build subgroups from selected checkboxes
    const cats = ['A', 'B', 'C', 'D'];
    const paceRanges = {
      'A': { pace_from: 4.0, pace_to: 15.0 },
      'B': { pace_from: 3.0, pace_to: 4.0 },
      'C': { pace_from: 2.0, pace_to: 3.0 },
      'D': { pace_from: 1.0, pace_to: 2.0 }
    };
    cats.forEach(cat => {
      const checkbox = document.querySelector(`input[name="cat_${cat.toLowerCase()}"]`);
      if (checkbox && checkbox.checked) {
        data.subgroups.push({
          label: cat,
          pace_from: paceRanges[cat].pace_from,
          pace_to: paceRanges[cat].pace_to
        });
      }
    });

    // Default to A if nothing selected
    if (data.subgroups.length === 0) {
      data.subgroups.push({ label: 'A', pace_from: 4.0, pace_to: 15.0 });
    }

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

    if (res.ok) {
      closeModal();
      loadEvents();
    } else {
      alert('Ошибка создания');
    }
  });

  document.addEventListener('DOMContentLoaded', loadEvents);

  async function showEventDetails(eventId, eventName) {
    const modal = document.getElementById('details-modal');
    const title = document.getElementById('details-title');
    const partList = document.getElementById('participants-list');
    const resList = document.getElementById('results-list');

    title.textContent = eventName;
    partList.innerHTML = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div>';
    resList.innerHTML = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div>';

    // Reset tabs
    document.querySelectorAll('#details-modal .tab').forEach(t => t.classList.remove('active'));
    document.querySelector('#details-modal .tab:first-child').classList.add('active');
    document.getElementById('details-participants').style.display = 'block';
    document.getElementById('details-results').style.display = 'none';

    modal.style.display = 'flex';
    setTimeout(() => modal.classList.add('active'), 10);

    try {
      // Get event details
      const eventRes = await fetch(`/api/events/${eventId}`);
      const event = eventRes.ok ? await eventRes.json() : {};
      const organizerId = event.organizer_id;

      // 1. Load Participants
      const regRes = await fetch(`/api/events/${eventId}/registrations`);
      const registrations = regRes.ok ? await regRes.json() : [];
      const statsRes = await fetch(`/api/events/${eventId}/registration-stats`);
      const stats = statsRes.ok ? await statsRes.json() : { total: 0, categories: {} };

      if (registrations.length === 0) {
        partList.innerHTML = '<div class="empty-state">Пока никто не записался</div>';
      } else {
        const byCategory = {};
        registrations.forEach(r => {
          const cat = r.category || 'A';
          if (!byCategory[cat]) byCategory[cat] = [];
          byCategory[cat].push(r);
        });

        let html = `<div style="margin-bottom: 15px; color: #FFD700; font-weight: bold;">Всего: ${stats.total} участников</div>`;

        Object.keys(byCategory).sort().forEach(cat => {
          const players = byCategory[cat];
          html += `<div style="margin-bottom: 10px;">
            <div style="color: #FFA500; font-weight: bold; margin-bottom: 5px;">Категория ${cat} (${players.length})</div>`;
          players.forEach(p => {
            const isOrganizer = p.player_id === organizerId;
            const crown = isOrganizer ? '<i class="fas fa-crown" style="color: gold; margin-left: 8px;" title="Организатор"></i>' : '';
            html += `
              <div class="participant-item">
                <div class="participant-avatar">${(p.name || 'U')[0].toUpperCase()}</div>
                <span>${p.name || 'Player ' + p.player_id}${crown}</span>
              </div>`;
          });
          html += '</div>';
        });
        partList.innerHTML = html;
      }

      // 2. Load Results (BETA)
      const resultsRes = await fetch(`/api/events/${eventId}/results`);
      const results = resultsRes.ok ? await resultsRes.json() : [];

      if (results.length === 0) {
        resList.innerHTML = '<div class="empty-state">Результатов пока нет</div>';
      } else {
        // Render results table
        let html = `
          <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
            <thead>
              <tr style="border-bottom: 1px solid rgba(255,140,0,0.3); text-align: left; color: #FFD700;">
                <th style="padding: 8px;">#</th>
                <th style="padding: 8px;">Имя</th>
                <th style="padding: 8px;">Время</th>
                <th style="padding: 8px;">Ватты</th>
                <th style="padding: 8px;">Пульс</th>
              </tr>
            </thead>
            <tbody>`;

        results.forEach((r, idx) => {
          const timeStr = new Date(r.time_ms).toISOString().substr(11, 8); // format HH:MM:SS
          const wkg = r.weight_kg > 0 ? (r.power_avg / r.weight_kg).toFixed(1) : '-';
          const pwr = Math.round(r.power_avg);

          html += `
            <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
              <td style="padding: 8px; color: var(--text-accent);">${idx + 1}</td>
              <td style="padding: 8px;">
                <div style="display: flex; gap: 5px; align-items: center;">
                  <span class="category-badge ${r.subgroup_label || 'A'}" style="width: 18px; height: 18px; font-size: 0.6rem;">${r.subgroup_label || 'A'}</span>
                  ${r.first_name} ${r.last_name}
                </div>
              </td>
              <td style="padding: 8px; font-family: monospace;">${timeStr}</td>
              <td style="padding: 8px;">
                <span style="color: #FFD700; font-weight: bold;">${pwr}W</span>
                <span style="color: var(--text-muted); font-size: 0.8em;">(${wkg} w/kg)</span>
              </td>
              <td style="padding: 8px; color: #EB3349;">
                ${r.heart_rate_avg > 0 ? `<i class="fas fa-heartbeat"></i> ${Math.round(r.heart_rate_avg)}` : '-'}
              </td>
            </tr>`;
        });

        html += '</tbody></table>';
        resList.innerHTML = html;
      }

    } catch (e) {
      console.error(e);
      partList.innerHTML = '<div class="empty-state">Ошибка</div>';
      resList.innerHTML = '<div class="empty-state">Ошибка</div>';
    }
  }

  function switchDetailsTab(tabName, btn) {
    // Update buttons
    const tabs = document.querySelectorAll('#details-modal .tab');
    tabs.forEach(t => t.classList.remove('active'));
    btn.classList.add('active');

    // Update content
    document.querySelectorAll('.details-content').forEach(c => c.style.display = 'none');
    document.getElementById(`details-${tabName}`).style.display = 'block';
  }

  // ===== ADMIN FUNCTIONS =====

  async function deleteEvent(eventId) {
    showConfirmDialog('Удалить событие?', 'Это событие будет удалено навсегда. Это действие нельзя отменить.', () => doDeleteEvent(eventId), 'danger');
  }

  async function doDeleteEvent(eventId) {

    const res = await fetch(`/api/events/${eventId}`, { method: 'DELETE' });
    if (res.ok) {
      loadEvents();
    } else {
      const data = await res.json();
      alert(data.error || 'Ошибка удаления');
    }
  }

  let editingEventId = null;

  async function openEditModal(eventId) {
    editingEventId = eventId;
    const event = allEvents.find(e => e.id === eventId);
    if (!event) return;

    document.getElementById('edit-name').value = event.name || '';
    document.getElementById('edit-description').value = event.description || '';
    document.getElementById('edit-event_type').value = event.event_type || 'group_ride';
    document.getElementById('edit-course_id').value = event.course_id || 6;
    document.getElementById('edit-laps').value = event.laps || 0;
    document.getElementById('edit-duration_minutes').value = Math.round((event.duration_seconds || 0) / 60);
    document.getElementById('edit-distance_km').value = ((event.distance_meters || 25000) / 1000).toFixed(1);
    document.getElementById('edit-image_url').value = event.image_url || '';
    document.getElementById('edit-tags').value = event.tags || '';
    document.getElementById('edit-rubberbanding').checked = event.rubberbanding || false;
    document.getElementById('edit-workout_url').value = event.workout_url || '';

    // Show existing image preview
    if (event.image_url) {
      loadImagePreview('edit');
    } else {
      // Hide preview if no image
      const previewContainer = document.getElementById('edit-image-preview');
      const errorDiv = document.getElementById('edit-image-error');
      if (previewContainer) previewContainer.style.display = 'none';
      if (errorDiv) errorDiv.style.display = 'none';
    }

    // Load and populate leaders
    fetch(`/api/events/${eventId}/leaders`)
      .then(r => r.json())
      .then(leaders => {
        document.getElementById('edit-leader_ids').value = leaders.map(l => l.player_id).join(', ');
      })
      .catch(() => { });

    // Populate jersey_hash
    document.getElementById('edit-jersey_hash').value = event.jersey_hash || '';

    // Format datetime for input
    if (event.start_time) {
      const d = new Date(event.start_time);
      const local = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
      document.getElementById('edit-start_time').value = local.toISOString().slice(0, 16);
    }

    document.getElementById('edit-modal').style.display = 'flex';
    setTimeout(() => document.getElementById('edit-modal').classList.add('active'), 10);
  }

  document.addEventListener('DOMContentLoaded', function () {
    const editForm = document.getElementById('edit-form');
    if (editForm) {
      editForm.addEventListener('submit', async function (e) {
        e.preventDefault();
        if (!editingEventId) return;

        const data = {
          name: document.getElementById('edit-name').value,
          description: document.getElementById('edit-description').value,
          event_type: document.getElementById('edit-event_type').value,
          course_id: parseInt(document.getElementById('edit-course_id').value),
          start_time: document.getElementById('edit-start_time').value,
          laps: parseInt(document.getElementById('edit-laps').value) || 0,
          duration_seconds: (parseInt(document.getElementById('edit-duration_minutes').value) || 0) * 60,
          distance_meters: (parseFloat(document.getElementById('edit-distance_km').value) || 25) * 1000,
          image_url: document.getElementById('edit-image_url').value || '',
          tags: document.getElementById('edit-tags').value || '',
          rubberbanding: document.getElementById('edit-rubberbanding').checked ? 1 : 0,
          workout_url: document.getElementById('edit-workout_url').value || '',
          jersey_hash: parseInt(document.getElementById('edit-jersey_hash').value) || 0
        };

        // Parse leader IDs
        const leaderIds = (document.getElementById('edit-leader_ids').value || '')
          .split(',').map(s => parseInt(s.trim())).filter(n => n > 0);

        const res = await fetch(`/api/events/${editingEventId}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });

        if (res.ok) {
          // Update leaders: first delete all, then add new ones
          const existingLeaders = await fetch(`/api/events/${editingEventId}/leaders`).then(r => r.json());
          for (const l of existingLeaders) {
            await fetch(`/api/events/${editingEventId}/leaders/${l.player_id}`, { method: 'DELETE' });
          }
          for (const pid of leaderIds) {
            await fetch(`/api/events/${editingEventId}/leaders`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ player_id: pid })
            });
          }
          closeEditModal();
          loadEvents();
        } else {
          const err = await res.json();
          alert(err.error || 'Ошибка сохранения');
        }
      });
    }
  });

  // Confirm Dialog
  let pendingConfirmAction = null;

  function showConfirmDialog(title, text, action, type = 'warning') {
    document.getElementById('confirm-title').textContent = title;
    document.getElementById('confirm-text').textContent = text;
    const icon = document.getElementById('confirm-icon');
    const btn = document.getElementById('confirm-action-btn');

    if (type === 'danger') {
      icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
      icon.className = 'confirm-icon danger';
      btn.className = 'confirm-btn danger';
      btn.textContent = 'Удалить';
    } else {
      icon.innerHTML = '<i class="fas fa-question-circle"></i>';
      icon.className = 'confirm-icon';
      btn.className = 'confirm-btn primary';
      btn.textContent = 'Да';
    }

    pendingConfirmAction = action;
    document.getElementById('confirm-dialog').style.display = 'flex';
  }

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

  function executeConfirmAction() {
    closeConfirmDialog();
    if (pendingConfirmAction) pendingConfirmAction();
  }
</script>

<!-- Confirm Dialog -->
<div class="confirm-overlay" id="confirm-dialog">
  <div class="confirm-box">
    <div class="confirm-icon" id="confirm-icon"><i class="fas fa-question-circle"></i></div>
    <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="closeConfirmDialog()">Отмена</button>
      <button class="confirm-btn primary" id="confirm-action-btn" onclick="executeConfirmAction()">Да</button>
    </div>
  </div>
</div>

<!-- Crop Modal -->
<div class="modal-overlay" id="crop-modal" onclick="closeCropModal()">
  <div class="modal" onclick="event.stopPropagation()" style="max-width: 700px;">
    <div class="modal-title"><i class="fas fa-crop-alt"></i> Обрезать изображение</div>
    <div style="text-align: center; margin-bottom: 15px;">
      <p style="color: var(--text-muted); font-size: 13px; margin-bottom: 10px;">
        <i class="fas fa-info-circle"></i> Перетащите область для перемещения. Тяните за угол для изменения размера.
      </p>
      <canvas id="crop-canvas" style="max-width: 100%; border-radius: 8px; cursor: move;"></canvas>
    </div>
    <div class="modal-actions">
      <button type="button" class="btn-secondary" onclick="closeCropModal()">Отмена</button>
      <button type="button" class="btn-primary" onclick="confirmCrop()">
        <i class="fas fa-check"></i> Применить
      </button>
    </div>
  </div>
</div>

<!-- Details Modal -->
<div class="modal-overlay" id="details-modal" onclick="closeDetailsModal()">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="modal-title"><i class="fas fa-users"></i> <span id="details-title">Участники</span></div>
    <div class="modal-title"><i class="fas fa-users"></i> <span id="details-title">Участники</span></div>

    <div class="tabs" style="margin-bottom: 20px;">
      <button class="tab active" onclick="switchDetailsTab('participants', this)">Участники</button>
      <button class="tab" onclick="switchDetailsTab('results', this)">Результаты <span
          class="beta-badge">BETA</span></button>
    </div>

    <div id="details-participants" class="details-content">
      <div class="participant-list" id="participants-list"></div>
    </div>

    <div id="details-results" class="details-content" style="display: none;">
      <div class="participant-list" id="results-list">
        <div class="empty-state">Результатов пока нет</div>
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn-secondary" onclick="closeDetailsModal()">Закрыть</button>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="modal-overlay" id="edit-modal" onclick="closeEditModal()">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="modal-title"><i class="fas fa-edit"></i> Редактировать событие</div>
    <form id="edit-form">
      <div class="form-group">
        <label class="form-label">Название</label>
        <input type="text" class="form-input" id="edit-name" required>
      </div>
      <div class="form-group">
        <label class="form-label">Описание</label>
        <textarea class="form-textarea" id="edit-description" rows="2"></textarea>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Тип</label>
          <select class="form-select" id="edit-event_type">
            <option value="group_ride">Групповой заезд</option>
            <option value="race">Гонка</option>
            <option value="workout">Тренировка</option>
            <option value="time_trial">Раздельный старт</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Мир</label>
          <select class="form-select" id="edit-course_id">
            <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="17">Scotland</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Дата/время</label>
          <input type="datetime-local" class="form-input" id="edit-start_time" required>
        </div>
        <div class="form-group">
          <label class="form-label">Круги (0 = без лимита)</label>
          <input type="number" class="form-input" id="edit-laps" value="0" min="0">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Длительность (мин)</label>
          <input type="number" class="form-input" id="edit-duration_minutes" value="0" min="0">
        </div>
        <div class="form-group">
          <label class="form-label">Дистанция (км)</label>
          <input type="number" class="form-input" id="edit-distance_km" value="25" min="1" step="0.1">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Картинка события</label>
        <div class="image-input-container" style="display: flex; flex-direction: column; gap: 10px;">
          <div class="image-preview" id="edit-image-preview"
            style="display: none; border-radius: 8px; overflow: hidden; max-height: 150px; background: var(--glass-medium);">
            <img id="edit-preview-img" style="width: 100%; height: 150px; object-fit: cover;" alt="Preview">
          </div>
          <div class="image-error" id="edit-image-error" style="display: none; color: #EB3349; font-size: 12px;">
            <i class="fas fa-exclamation-triangle"></i> Не удалось загрузить изображение
          </div>
          <input type="text" class="form-input" id="edit-image_url" placeholder="https://..."
            oninput="handleImageUrlInput('edit')">
          <small class="form-hint" style="color: var(--text-muted); font-size: 12px; margin-top: 5px;">
            Стабильно работают ссылки с Imgur. Пример: <span
              style="user-select: all; color: var(--action-primary);">https://i.imgur.com/5o0k64L.png</span>
          </small>
          <div style="display: none; gap: 10px; align-items: center;">
            <span style="color: var(--text-muted); font-size: 12px;">или</span>
            <label class="btn-secondary" style="cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
              <i class="fas fa-upload"></i> Загрузить файл
              <input type="file" id="edit-image-file" accept="image/*" style="display: none;"
                onchange="handleFileSelect(this, 'edit')">
            </label>
          </div>
          <input type="hidden" id="edit-uploaded-image">
        </div>
      </div>

      <!-- Experimental Features Section -->
      <div class="experimental-section">
        <div class="experimental-header">
          <i class="fas fa-flask"></i> Экспериментальные функции
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Теги (через ;) <span class="beta-badge"><i class="fas fa-flask"></i>
                Beta</span></label>
            <input type="text" class="form-input" id="edit-tags" placeholder="fenced;communityevent">
          </div>
          <div class="form-group" style="display: flex; align-items: center; padding-top: 25px;">
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" id="edit-rubberbanding">
              <span>Keep Together <span class="beta-badge"><i class="fas fa-flask"></i> Beta</span></span>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">URL воркаута (.zwo) <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="url" class="form-input" id="edit-workout_url" placeholder="https://cdn.zwift.com/workouts/...">
        </div>
        <div class="form-group">
          <label class="form-label">ID лидеров (через запятую) <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="text" class="form-input" id="edit-leader_ids" placeholder="1, 2, 3">
          <small style="color: var(--text-muted); font-size: 11px;">Player ID лидеров заезда</small>
        </div>
        <div class="form-group">
          <label class="form-label">Jersey Hash <span class="beta-badge"><i class="fas fa-flask"></i>
              Beta</span></label>
          <input type="number" class="form-input" id="edit-jersey_hash" placeholder="493134166">
          <small style="color: var(--text-muted); font-size: 11px;">ID кастомной майки события</small>
        </div>
      </div>
      <div class="modal-actions">
        <button type="submit" class="btn-primary">Сохранить</button>
        <button type="button" class="btn-secondary" onclick="closeEditModal()">Отмена</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}