{% extends "./layout.html" %}
{% block content %}
<style>
  .settings-wrapper {
    min-height: 100vh;
    max-height: 100vh;
    background: var(--bg-primary);
    padding: 10px;
    overflow-y: auto;
    position: relative;
  }

  .settings-wrapper::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 107, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
    pointer-events: none;
  }

  [data-theme="light"] .settings-wrapper::before {
    display: none;
  }

  .main-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    border: 2px solid var(--border-accent);
    border-radius: 12px;
    background: var(--glass-light);
    position: relative;
    z-index: 1;
  }

  .header-title-link {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
  }

  .header-title-link:hover {
    transform: scale(1.05);
  }

  .header-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--yellow-glow);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    margin-bottom: 5px;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
  }

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

  .header-title:hover {
    color: #FFA500;
    text-shadow: 0 0 18px rgba(255, 165, 0, 1);
  }

  .settings-container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .logo-header {
    text-align: center;
    margin-bottom: 12px;
  }

  .logo-img {
    max-width: 120px;
    filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.7));
  }

  .user-name {
    font-size: 0.8rem;
    color: var(--text-accent);
    margin-top: 6px;
  }

  .back-button {
    margin-bottom: 10px;
  }

  .btn-back {
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 107, 0, 0.1);
    color: #FFA500;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .btn-back:hover {
    background: rgba(255, 107, 0, 0.2);
    color: #FFD700;
    text-decoration: none;
    transform: translateY(-2px);
  }

  .settings-card {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    border: 2px solid var(--border-primary);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-card);
  }

  [data-theme="light"] .settings-card {
    backdrop-filter: none;
  }

  .card-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--yellow-glow);
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
  }

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

  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .setting-btn {
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--border-primary);
    background: var(--glass-light);
    color: var(--text-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
  }

  .setting-btn:hover {
    background: var(--glass-medium);
    border-color: var(--border-accent);
    color: var(--yellow-glow);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
  }

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

  .setting-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(100, 100, 100, 0.1);
    border-color: rgba(150, 150, 150, 0.3);
    color: #888;
  }

  .setting-btn.disabled:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .telegram-section {
    text-align: center;
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 10px;
  }

  .telegram-link {
    color: #FFD700;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
  }

  /* === КРУПНЫЕ КНОПКИ ДОНАТА === */
  .donate-card {
    margin-top: 15px;
  }

  .donate-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .donate-button-large {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    animation: pulseGlow 3s ease-in-out infinite;
    border: 3px solid transparent;
  }

  .donate-button-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
  }

  .donate-button-large:hover::before {
    left: 100%;
  }

  .donate-button-large:hover {
    transform: translateY(-4px) scale(1.02);
    animation-play-state: paused;
  }

  .donate-text {
    flex: 1;
  }

  .donate-title {
    font-size: 1rem;
    font-weight: 800;
    color: white;
    margin-bottom: 2px;
  }

  .donate-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }

  /* Boosty крупная */
  .donate-boosty-large {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    border-color: rgba(255, 107, 157, 0.5);
  }

  .donate-boosty-large:hover {
    background: linear-gradient(135deg, #ff8fa3 0%, #e17085 100%);
    border-color: rgba(255, 107, 157, 0.8);
    box-shadow: 0 8px 35px rgba(255, 107, 157, 0.5);
  }

  /* CloudTips крупная */
  .donate-cloudtips-large {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.5);
  }

  .donate-cloudtips-large:hover {
    background: linear-gradient(135deg, #7c8ff0 0%, #8a5cb8 100%);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 8px 35px rgba(102, 126, 234, 0.5);
  }

  /* Patreon крупная */
  .donate-patreon-large {
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
    border-color: rgba(233, 30, 99, 0.5);
  }

  .donate-patreon-large:hover {
    background: linear-gradient(135deg, #f06292 0%, #ba68c8 100%);
    border-color: rgba(233, 30, 99, 0.8);
    box-shadow: 0 8px 35px rgba(233, 30, 99, 0.5);
  }

  /* Telegram крупная */
  .donate-telegram-large {
    background: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange-primary) 100%);
    border-color: var(--border-orange);
  }

  .donate-telegram-large:hover {
    background: linear-gradient(135deg, var(--yellow-glow) 0%, var(--orange-bright) 100%);
    border-color: var(--border-yellow);
    box-shadow: 0 8px 35px var(--orange-primary);
  }

  /* Анимация пульсирующего свечения */
  @keyframes pulseGlow {

    0%,
    100% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    }

    50% {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 140, 0, 0.3);
    }
  }

  @media (max-width: 600px) {
    .settings-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="settings-wrapper">
  <!-- Заголовок -->
  <div class="main-header">
    <a href="https://t.me/rezwift" target="_blank" class="header-title-link">
      <div class="header-title">Ваш Резвифт</div>
    </a>
  </div>

  <div class="settings-container">
    <div class="logo-header">
      {% if username != "zoffline" %}
      <div class="user-name">Добро пожаловать, {{ username }}</div>
      {% endif %}
    </div>

    <!-- Player ID - заметный блок -->
    {% if username != "zoffline" %}
    <div class="settings-card"
      style="border-color: var(--orange-primary); background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 165, 0, 0.05)); margin-bottom: 15px; text-align: center; padding: 16px;">
      <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">
        <i class="fas fa-id-card"></i> Ваш игровой идентификатор
      </div>
      <div
        style="font-size: 1.8rem; font-weight: 900; color: var(--orange-primary); text-shadow: 0 0 10px rgba(255, 140, 0, 0.5); cursor: pointer;"
        onclick="navigator.clipboard.writeText('{{ player_id }}'); this.innerHTML='✅ Скопировано!'; setTimeout(() => this.innerHTML='{{ player_id }}', 2000);"
        title="Нажмите чтобы скопировать">
        {{ player_id }}
      </div>
      <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 6px;">
        🆔 Player ID · <span style="opacity: 0.7;">нажмите для копирования</span>
      </div>
    </div>
    {% endif %}

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

    <div class="settings-card">
      <div class="card-title">
        <i class="fas fa-cog"></i> Настройки
      </div>
      <div class="settings-grid">
        <a href="{{ url_for('profile', username=username) }}" class="setting-btn">
          <i class="fas fa-user"></i> Профиль Zwift
        </a>
        <button onclick="openProfileEditModal()" class="setting-btn" style="cursor: pointer;">
          <i class="fas fa-edit"></i> Изменить профиль <span class="beta-badge">β</span>
        </button>
        <a href="{{ url_for('garmin', username=username) }}" class="setting-btn">
          <i class="fas fa-watch"></i> Garmin
        </a>
        <a href="{{ url_for('intervals', username=username) }}" class="setting-btn">
          <i class="fas fa-calendar-alt"></i> Intervals.icu
        </a>
        <a href="{{ url_for('power_curves', username=username) }}" class="setting-btn">
          <i class="fas fa-chart-line"></i> Графики мощности
        </a>
        <a href="{{ url_for('goals_page', username=username) }}" class="setting-btn" style="border-color: #10b981;">
          <i class="fas fa-bullseye" style="color: #10b981;"></i> Мои цели <span class="beta-badge"
            style="background: #10b981;">NEW</span>
        </a>
        <a href="{{ url_for('reset', username=username) }}" class="setting-btn">
          <i class="fas fa-key"></i> Сменить пароль
        </a>
      </div>
    </div>

    <!-- Настройки игры -->
    <div class="settings-card">
      <div class="card-title">
        <i class="fas fa-gamepad"></i> Настройки игры
      </div>

      <div
        style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 10px;">
        <div>
          <div style="color: var(--text-primary); font-weight: 700; display: flex; align-items: center; gap: 8px;">
            👻 Тень призрака <span class="beta-badge" style="font-size: 0.6rem;">GHOSTS</span>
          </div>
          <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; line-height: 1.3;">
            Включает отображение 'призраков' - повторов ваших прошлых заездов.
          </div>
        </div>
        <label class="switch">
          <!-- Flask должен передать is_ghosts_enabled -->
          <input type="checkbox" id="ghosts-toggle" onchange="toggleGhostsSetting(this.checked)">
          <span class="slider round"></span>
        </label>
      </div>
    </div>

    <!-- Секция выбора темы -->
    <div class="settings-card">
      <div class="card-title">
        <i class="fas fa-palette"></i> Тема оформления
      </div>
      <div style="display: flex; justify-content: center; margin-top: 8px;">
        <div class="theme-switcher">
          <button type="button" class="theme-btn" data-theme="dark" onclick="setTheme('dark')">
            <i class="fas fa-moon"></i> Тёмная
          </button>
          <button type="button" class="theme-btn" data-theme="light" onclick="setTheme('light')">
            <i class="fas fa-sun"></i> Светлая
          </button>
        </div>
      </div>
    </div>

    <!-- Секция Приватности -->
    <div class="settings-card">
      <div class="card-title">
        <i class="fas fa-user-shield"></i> Приватность
      </div>
      <div
        style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 10px;">
        <div>
          <div style="color: var(--text-primary); font-weight: 700; display: flex; align-items: center; gap: 8px;">
            🕵️ Режим инкогнито <span class="beta-badge" style="font-size: 0.6rem;">LIVE</span>
          </div>
          <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; line-height: 1.3;">
            Скрыть ваш профиль из списка "Сейчас катают" (Live Riders).
          </div>
        </div>
        <label class="switch">
          <input type="checkbox" id="privacy-toggle" {% if privacy_live_hidden %}checked{% endif %}
            onchange="togglePrivacy(this.checked)">
          <span class="slider round"></span>
        </label>
      </div>
    </div>

    <!-- Донорские Настройки (только для доноров) -->
    {% if is_donor %}
    <div class="settings-card" style="border-color: #FFD700; background: rgba(255, 215, 0, 0.05);">
      <div class="card-title" style="color: #FFD700;">
        <i class="fas fa-crown"></i> Донорские Настройки <span class="donor-neon-badge"
          style="font-size: 0.6rem; padding: 1px 6px; margin-left: 4px;">PREMIUM</span>
      </div>
      <p style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 15px; text-align: center;">
        Настройте свой уникальный внешний вид в лидербордах и списках 👑
      </p>

      <div style="margin-bottom: 12px;">
        <label
          style="display: block; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 6px; font-weight: 600;">
          Стиль бейджа:
        </label>
        <select id="donor-badge-style" class="donor-select" onchange="updateDonorPreview()">
          <option value="both">👑 + DONOR (оба)</option>
          <option value="crown">👑 Только корона</option>
          <option value="donor">DONOR Только неоновый</option>
          <option value="none">Скрыто</option>
        </select>
      </div>

      <div style="margin-bottom: 12px;">
        <label
          style="display: block; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 6px; font-weight: 600;">
          Цвет имени:
        </label>
        <select id="donor-name-color" class="donor-select" onchange="updateDonorPreview()">
          <option value="gold_gradient">Золотой градиент ✨</option>
          <option value="gold">Золотой 🌟</option>
          <option value="rainbow">Радужный 🌈</option>
          <option value="default">Стандартный</option>
        </select>
      </div>

      <div style="margin-bottom: 15px;  background: rgba(0,0,0,0.2); padding: 12px; border-radius: 10px;">
        <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
          <input type="checkbox" id="donor-show-tooltip" checked onchange="updateDonorPreview()"
            style="width: 18px; height: 18px; cursor: pointer;">
          <span style="color: var(--text-primary); font-weight: 600; font-size: 0.85rem;">
            Показывать тултип "Поддерживает проект ❤️"
          </span>
        </label>
      </div>

      <!-- Equipment Unlock Toggle -->
      <div
        style="margin-bottom: 15px; background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 165, 0, 0.05)); padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.3);">
        <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
          <input type="checkbox" id="donor-unlock-equipment" checked onchange="toggleDonorEquipment(this.checked)"
            style="width: 18px; height: 18px; cursor: pointer; accent-color: #FFA500;">
          <div>
            <span style="color: var(--text-primary); font-weight: 600; font-size: 0.85rem;">
              🔓 Разблокировать всё оборудование
            </span>
            <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;">
              Если выключено — прогрессия по уровням как у обычных пользователей
            </div>
          </div>
        </label>
      </div>

      <button onclick="saveDonorSettings()" class="donor-save-btn">
        <i class="fas fa-save"></i> Сохранить настройки
      </button>

      <!-- Preview -->
      <div class="donor-preview-box">
        <div style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 8px; text-align: center;">
          <i class="fas fa-eye"></i> Предпросмотр:
        </div>
        <div id="donor-preview-name" style="text-align: center; font-size: 1.1rem;"></div>
      </div>
    </div>

    <style>
      .donor-select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 2px solid var(--border-primary);
        background: var(--input-bg);
        color: var(--text-primary);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .donor-select:hover {
        border-color: var(--border-accent);
      }

      .donor-select:focus {
        outline: none;
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
      }

      .donor-select option {
        background: #1a1a1a;
        color: #FFD700;
        padding: 10px;
      }

      .donor-select option:hover,
      .donor-select option:checked {
        background: #333;
        color: #FFD700;
      }

      .donor-save-btn {
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        border: 2px solid #FFD700;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
        color: #FFD700;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 15px;
      }

      .donor-save-btn:hover {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.3));
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
      }

      .donor-preview-box {
        background: rgba(0, 0, 0, 0.3);
        padding: 15px;
        border-radius: 10px;
        border: 2px solid rgba(255, 215, 0, 0.3);
      }

      [data-theme="light"] .donor-preview-box {
        background: rgba(255, 255, 255, 0.5);
      }
    </style>

    <script>
      // Load donor settings
      async function loadDonorSettings() {
        try {
          const response = await fetch('/api/donor/settings');
          if (response.ok) {
            const settings = await response.json();
            document.getElementById('donor-badge-style').value = settings.badge_style || 'both';
            document.getElementById('donor-name-color').value = settings.name_color || 'gold_gradient';
            document.getElementById('donor-show-tooltip').checked = settings.show_tooltip !== false;
            updateDonorPreview();
          }
        } catch (error) {
          console.error('Error loading donor settings:', error);
        }
      }

      // Save donor settings
      async function saveDonorSettings() {
        const settings = {
          badge_style: document.getElementById('donor-badge-style').value,
          name_color: document.getElementById('donor-name-color').value,
          show_tooltip: document.getElementById('donor-show-tooltip').checked
        };

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

          if (response.ok) {
            // Success notification
            const btn = document.querySelector(".donor-save-btn");
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i> Сохранено!';
            btn.style.background = 'linear-gradient(135deg, rgba(39, 174, 96, 0.3), rgba(46, 204, 113, 0.3))';
            btn.style.borderColor = '#27ae60';
            btn.style.color = '#27ae60';

            setTimeout(() => {
              btn.innerHTML = originalText;
              btn.style.background = '';
              btn.style.borderColor = '';
              btn.style.color = '';
            }, 2000);
          } else {
            const errorText = await response.text();
            alert('Ошибка при сохранении настроек: ' + response.status);
          }
        } catch (error) {
          alert('Ошибка соединения: ' + error.message);
        }
      }

      // Update preview
      function updateDonorPreview() {
        const firstName = '{{ first_name if first_name else "Ваше" }}';
        const lastName = '{{ last_name if last_name else "Имя" }}';
        const settings = {
          badge_style: document.getElementById('donor-badge-style').value,
          name_color: document.getElementById('donor-name-color').value,
          show_tooltip: document.getElementById('donor-show-tooltip').checked
        };

        const previewHTML = formatDonorName(firstName, lastName, true, settings);
        document.getElementById('donor-preview-name').innerHTML = previewHTML;
      }

      // Toggle equipment unlock preference
      async function toggleDonorEquipment(unlock) {
        try {
          const response = await fetch('/api/settings/donor-equipment', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ unlock_equipment: unlock })
          });

          if (response.ok) {
            console.log('Equipment unlock setting updated:', unlock);
          } else {
            console.error('Failed to update equipment setting');
            document.getElementById('donor-unlock-equipment').checked = !unlock;
            alert('Ошибка при сохранении настройки');
          }
        } catch (err) {
          console.error('Error:', err);
          document.getElementById('donor-unlock-equipment').checked = !unlock;
        }
      }

      // Load equipment unlock setting
      async function loadEquipmentSetting() {
        try {
          const response = await fetch('/api/settings/donor-equipment');
          if (response.ok) {
            const data = await response.json();
            document.getElementById('donor-unlock-equipment').checked = data.unlock_equipment;
          }
        } catch (err) {
          console.error('Error loading equipment setting:', err);
        }
      }

      // Load on page load if donor
      document.addEventListener('DOMContentLoaded', function () {
        // Donor status is always true here since this script block is inside the is_donor conditional
        loadDonorSettings();
        loadEquipmentSetting();
      });
    </script>
    {% else %}
    <!-- Full disabled teaser for non-donors -->
    <div class="settings-card" style="border-color: rgba(255, 215, 0, 0.3); background: rgba(255, 215, 0, 0.02);">
      <div class="card-title" style="color: rgba(255, 215, 0, 0.6);">
        <i class="fas fa-crown"></i> Донорские Настройки <span class="donor-neon-badge"
          style="font-size: 0.6rem; padding: 1px 6px; margin-left: 4px; opacity: 0.6;">PREMIUM</span>
      </div>
      <p style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 15px; text-align: center; opacity: 0.7;">
        Настройте свой уникальный внешний вид в лидербордах и списках 👑
      </p>

      <div style="margin-bottom: 12px; opacity: 0.5;">
        <label
          style="display: block; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 6px; font-weight: 600;">
          Стиль бейджа:
        </label>
        <select disabled class="donor-select" style="cursor: not-allowed;">
          <option>👑 + DONOR (оба)</option>
        </select>
      </div>

      <div style="margin-bottom: 12px; opacity: 0.5;">
        <label
          style="display: block; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 6px; font-weight: 600;">
          Цвет имени:
        </label>
        <select disabled class="donor-select" style="cursor: not-allowed;">
          <option>Золотой градиент ✨</option>
        </select>
      </div>

      <div style="margin-bottom: 15px; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 10px; opacity: 0.5;">
        <label style="display: flex; align-items: center; gap: 10px; cursor: not-allowed;">
          <input type="checkbox" disabled checked style="width: 18px; height: 18px; cursor: not-allowed;">
          <span style="color: var(--text-primary); font-weight: 600; font-size: 0.85rem;">
            Показывать тултип "Поддерживает проект ❤️"
          </span>
        </label>
      </div>

      <!-- Equipment Unlock Toggle (disabled) -->
      <div
        style="margin-bottom: 15px; background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 165, 0, 0.02)); padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.2); opacity: 0.5;">
        <label style="display: flex; align-items: center; gap: 10px; cursor: not-allowed;">
          <input type="checkbox" disabled checked
            style="width: 18px; height: 18px; cursor: not-allowed; accent-color: #FFA500;">
          <div>
            <span style="color: var(--text-muted); font-weight: 600; font-size: 0.85rem;">
              🔓 Разблокировать всё оборудование
            </span>
            <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;">
              Если выключено — прогрессия по уровням как у обычных пользователей
            </div>
          </div>
        </label>
      </div>

      <!-- BRIGHT CTA Button -->
      <button onclick="openDonateOptionsModal()" type="button"
        style="display: block; width: 100%; text-align: center; color: #fff; font-size: 0.9rem; font-weight: 700; border: none; padding: 12px 16px; background: linear-gradient(135deg, #FFD700, #FFA500); border-radius: 10px; box-shadow: 0 4px 15px rgba(255, 165, 0, 0.4); transition: all 0.3s ease; cursor: pointer;">
        <i class="fas fa-heart"></i> Стать донатером и получить доступ
      </button>
    </div>

    <!-- Donate Options Modal -->
    <div id="donate-options-modal" class="profile-modal-overlay"
      onclick="if(event.target===this)closeDonateOptionsModal()">
      <div class="profile-modal" style="max-width: 420px;">
        <div class="profile-modal-header"
          style="background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 215, 0, 0.2));">
          <h2 class="profile-modal-title" style="color: #FFD700;">
            <i class="fas fa-crown"></i> Стать донатером
          </h2>
          <button class="profile-modal-close" onclick="closeDonateOptionsModal()"><i class="fas fa-times"></i></button>
        </div>
        <div class="profile-modal-body" style="padding: 20px;">
          <p style="color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-bottom: 20px;">
            Выберите удобный способ поддержки проекта 💛
          </p>

          <!-- CloudTips - Recommended -->
          <a href="https://pay.cloudtips.ru/p/19a95b2c" target="_blank" class="donate-option-card" style="
            display: flex; align-items: center; gap: 15px; padding: 15px; margin-bottom: 12px;
            background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 215, 0, 0.1));
            border: 2px solid rgba(255, 165, 0, 0.5); border-radius: 12px;
            text-decoration: none; transition: all 0.3s ease;
          ">
            <div
              style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #FF8C00, #FFD700); display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-coins" style="font-size: 1.4rem; color: #fff;"></i>
            </div>
            <div style="flex: 1;">
              <div style="color: #FFD700; font-weight: 700; font-size: 1rem;">
                CloudTips <span
                  style="background: #27ae60; color: #fff; font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; margin-left: 6px;">РЕКОМЕНДУЕМ</span>
              </div>
              <div style="color: var(--text-muted); font-size: 0.75rem; margin-top: 2px;">
                Быстрый и удобный перевод с любой карты
              </div>
            </div>
            <i class="fas fa-chevron-right" style="color: rgba(255, 165, 0, 0.6);"></i>
          </a>

          <!-- Boosty -->
          <a href="https://boosty.to/cyberscoper/donate" target="_blank" class="donate-option-card" style="
            display: flex; align-items: center; gap: 15px; padding: 15px; margin-bottom: 12px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 165, 0, 0.3); border-radius: 12px;
            text-decoration: none; transition: all 0.3s ease;
          ">
            <div
              style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #F15F2C, #FF8C00); display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-fire" style="font-size: 1.4rem; color: #fff;"></i>
            </div>
            <div style="flex: 1;">
              <div style="color: #fff; font-weight: 700; font-size: 1rem;">Boosty</div>
              <div style="color: var(--text-muted); font-size: 0.75rem; margin-top: 2px;">
                Хорошая альтернатива, подписка или разовый донат
              </div>
            </div>
            <i class="fas fa-chevron-right" style="color: rgba(255, 165, 0, 0.4);"></i>
          </a>

          <!-- Binance USDC -->
          <div class="donate-option-card" style="
            padding: 15px; 
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 165, 0, 0.3); border-radius: 12px;
          ">
            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
              <div
                style="width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #F0B90B, #FCD535); display: flex; align-items: center; justify-content: center;">
                <i class="fab fa-bitcoin" style="font-size: 1.4rem; color: #1E2329;"></i>
              </div>
              <div style="flex: 1;">
                <div style="color: #fff; font-weight: 700; font-size: 1rem;">Binance USDC</div>
                <div style="color: var(--text-muted); font-size: 0.75rem; margin-top: 2px;">
                  Сеть BNB Smart Chain (BEP20)
                </div>
              </div>
            </div>
            <div
              style="background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; font-family: monospace; font-size: 0.7rem; color: #FFD700; word-break: break-all; cursor: pointer;"
              onclick="copyToClipboard('0x810ce25b7387f972299ce3100164838d03a9125b', this)">
              0x810ce25b7387f972299ce3100164838d03a9125b
              <i class="fas fa-copy" style="float: right; opacity: 0.6;"></i>
            </div>
            <div style="font-size: 0.65rem; color: var(--text-muted); margin-top: 6px; text-align: center;">
              Нажмите чтобы скопировать адрес
            </div>
          </div>

        </div>
      </div>
    </div>

    <script>
      function openDonateOptionsModal() {
        const modal = document.getElementById('donate-options-modal');
        if (modal) {
          modal.style.display = 'flex';
          setTimeout(() => modal.classList.add('active'), 10);
        }
      }

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

      function copyToClipboard(text, el) {
        navigator.clipboard.writeText(text).then(() => {
          const originalHTML = el.innerHTML;
          el.innerHTML = '<i class="fas fa-check" style="color: #27ae60;"></i> Скопировано!';
          setTimeout(() => el.innerHTML = originalHTML, 2000);
        });
      }
    </script>
    {% endif %}

    <!-- Секция Администрирования (только для админов) -->
    {% if is_admin %}
    <div class="donate-card" style="border: 2px solid #EB3349; background: rgba(235, 51, 73, 0.05);">
      <div class="card-title" style="color: #EB3349;">
        <i class="fas fa-shield-alt"></i> Администрирование
      </div>

      <div style="margin-bottom: 15px;">
        <div
          style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
          <div style="color: var(--text-primary); font-weight: 700;">🎄 Holiday Mode</div>
          <label class="switch">
            <input type="checkbox" id="holiday-toggle" onchange="toggleHolidayMode(this.checked)">
            <span class="slider round"></span>
          </label>
        </div>

        <div
          style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
          <div style="color: var(--text-primary); font-weight: 700;">❄️ Snow Enabled</div>
          <label class="switch">
            <input type="checkbox" id="snow-toggle" onchange="updateServerSettings()">
            <span class="slider round"></span>
          </label>
        </div>

        <div
          style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
          <div style="color: var(--text-primary); font-weight: 700;">📢 VK Popup</div>
          <label class="switch">
            <input type="checkbox" id="vk-popup-toggle" onchange="updateServerSettings()">
            <span class="slider round"></span>
          </label>
        </div>

        <div
          style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
          <div style="color: var(--text-primary); font-weight: 700;">🔒 Защита контента</div>
          <label class="switch">
            <input type="checkbox" id="content-protection-toggle" onchange="updateServerSettings()">
            <span class="slider round"></span>
          </label>
        </div>

        <div style="margin-top: 10px;">
          <label style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Кастомное
            сообщение:</label>
          <input type="text" id="custom-message" placeholder="Текст сообщения..."
            style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);"
            onchange="updateServerSettings()">
        </div>

        <!-- Окно техобслуживания -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,140,0,0.2);">
          <div style="color: #FFD700; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            🛠️ Окно техобслуживания
          </div>

          <div
            style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
            <div style="color: var(--text-primary); font-weight: 700;">Показывать баннер</div>
            <label class="switch">
              <input type="checkbox" id="maintenance-toggle" onchange="updateServerSettings()">
              <span class="slider round"></span>
            </label>
          </div>

          <div style="margin-bottom: 10px;">
            <label style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Текст
              уведомления:</label>
            <input type="text" id="maintenance-text" placeholder="Плановые работы..."
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);"
              onchange="updateServerSettings()">
          </div>

          <div>
            <label style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Время начала
              работ:</label>
            <input type="datetime-local" id="maintenance-time"
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);"
              onchange="updateServerSettings()">
          </div>
        </div>

        <!-- Управление новостями -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,140,0,0.2);">
          <div style="color: #FFD700; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            📰 Управление новостями
          </div>

          <button type="button" onclick="openNewsModal()"
            style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid var(--orange-primary); background: rgba(255,107,0,0.1); color: var(--orange-primary); font-weight: 700; cursor: pointer;">
            <i class="fas fa-newspaper"></i> Редактор новостей
          </button>
        </div>

        <!-- Управление дружественными каналами -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,140,0,0.2);">
          <div style="color: #FFD700; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            🤝 Дружественные каналы
          </div>

          <button type="button" onclick="openChannelsModal()"
            style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #29B6F6; background: rgba(41,182,246,0.1); color: #29B6F6; font-weight: 700; cursor: pointer;">
            <i class="fab fa-telegram"></i> Редактор каналов
          </button>
        </div>

        <!-- Управление донатерами -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,140,0,0.2);">
          <div style="color: #FFD700; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            💎 Управление донатерами
          </div>

          <div style="margin-bottom: 10px;">
            <label style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Username или
              Player ID:</label>
            <input type="text" id="donor-username" placeholder="username или 12345..."
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);">
          </div>

          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
            <button type="button" onclick="setDonorStatus(true)"
              style="padding: 10px; border-radius: 8px; border: 2px solid #27ae60; background: rgba(39,174,96,0.1); color: #27ae60; font-weight: 700; cursor: pointer;">
              ✅ Выдать
            </button>
            <button type="button" onclick="setDonorStatus(false)"
              style="padding: 10px; border-radius: 8px; border: 2px solid #e74c3c; background: rgba(231,76,60,0.1); color: #e74c3c; font-weight: 700; cursor: pointer;">
              ❌ Отозвать
            </button>
          </div>
          <div id="donor-result" style="margin-top: 8px; font-size: 0.8rem; text-align: center;"></div>
        </div>

        <!-- Резервное Копирование -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,140,0,0.2);">
          <div style="color: #FFD700; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            💾 Резервное Копирование
          </div>

          <button type="button" onclick="createBackup()" id="create-backup-btn"
            style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #27ae60; background: rgba(39,174,96,0.1); color: #27ae60; font-weight: 700; cursor: pointer; margin-bottom: 10px;">
            <i class="fas fa-save"></i> Создать Бэкап
          </button>

          <div id="backup-status"
            style="margin-bottom: 10px; font-size: 0.8rem; text-align: center; color: var(--text-muted);"></div>

          <div style="color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Последние бэкапы:</div>
          <div id="backups-list"
            style="max-height: 150px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 5px;">
            <div style="text-align: center; padding: 10px; color: var(--text-muted);">Загрузка...</div>
          </div>
        </div>

        <!-- Настройки AI Coach -->
        <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(139,92,246,0.3);">
          <div style="color: #a855f7; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem;">
            🧠 AI Coach
          </div>

          <div style="margin-bottom: 10px;">
            <label
              style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Кредитов/нед.
              (обычные):</label>
            <input type="number" id="ai-user-credits" min="1" max="100" value="3"
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);"
              onchange="updateAISettings()">
          </div>

          <div style="margin-bottom: 10px;">
            <label
              style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Кредитов/нед.
              (доноры):</label>
            <input type="number" id="ai-donor-credits" min="1" max="1000" value="30"
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);"
              onchange="updateAISettings()">
          </div>

          <div style="margin-bottom: 10px;">
            <label style="display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 5px;">Модель
              AI:</label>
            <select id="ai-model"
              style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary); cursor: pointer;"
              onchange="updateAISettings()">
              <option value="gemini-2.0-flash">Gemini 2.0 Flash (быстрый)</option>
              <option value="gemini-2.5-flash-lite">Gemini 2.5 Flash Lite (экономный)</option>
              <option value="gemini-2.5-flash">Gemini 2.5 Flash (баланс)</option>
              <option value="gemini-2.5-pro">Gemini 2.5 Pro (мощный)</option>
            </select>
          </div>

          <div id="ai-settings-status"
            style="font-size: 0.75rem; text-align: center; margin-top: 8px; color: var(--text-muted);"></div>

          <!-- AI Token Stats Dashboard -->
          <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(139,92,246,0.3);">
            <div
              style="color: #a855f7; font-weight: 700; margin-bottom: 10px; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center;">
              <span>📊 Статистика токенов</span>
              <button onclick="loadAIStats()"
                style="background: none; border: 1px solid #a855f7; color: #a855f7; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 0.7rem;">
                <i class="fas fa-sync-alt"></i>
              </button>
            </div>

            <!-- Stats Cards -->
            <div id="ai-stats-cards"
              style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;">
              <div style="background: rgba(139,92,246,0.1); border-radius: 8px; padding: 10px; text-align: center;">
                <div style="color: var(--text-muted); font-size: 0.7rem;">Час</div>
                <div id="stats-hour-tokens" style="color: #a855f7; font-weight: 700; font-size: 1rem;">-</div>
                <div id="stats-hour-cost" style="color: #10b981; font-size: 0.7rem;">$0.00</div>
              </div>
              <div style="background: rgba(139,92,246,0.1); border-radius: 8px; padding: 10px; text-align: center;">
                <div style="color: var(--text-muted); font-size: 0.7rem;">День</div>
                <div id="stats-day-tokens" style="color: #a855f7; font-weight: 700; font-size: 1rem;">-</div>
                <div id="stats-day-cost" style="color: #10b981; font-size: 0.7rem;">$0.00</div>
              </div>
              <div style="background: rgba(139,92,246,0.1); border-radius: 8px; padding: 10px; text-align: center;">
                <div style="color: var(--text-muted); font-size: 0.7rem;">Неделя</div>
                <div id="stats-week-tokens" style="color: #a855f7; font-weight: 700; font-size: 1rem;">-</div>
                <div id="stats-week-cost" style="color: #10b981; font-size: 0.7rem;">$0.00</div>
              </div>
            </div>

            <!-- By Model -->
            <div style="margin-bottom: 12px;">
              <div style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 6px;">По моделям (неделя):</div>
              <div id="ai-stats-models" style="font-size: 0.8rem; color: var(--text-secondary);">
                Загрузка...
              </div>
            </div>

            <!-- Top Users -->
            <div>
              <div style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 6px;">Топ пользователей:</div>
              <div id="ai-stats-users"
                style="max-height: 120px; overflow-y: auto; font-size: 0.75rem; background: rgba(0,0,0,0.2); border-radius: 6px; padding: 6px;">
                Загрузка...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <style>
      /* Toggle Switch Styles */
      .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--bg-tertiary);
        transition: .4s;
        border-radius: 24px;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
      }

      input:checked+.slider {
        background-color: var(--orange-primary);
      }

      input:checked+.slider:before {
        transform: translateX(26px);
      }
    </style>

    <script>
      function loadAdminSettings() {
        fetch('/api/admin/settings')
          .then(response => response.json())
          .then(data => {
            document.getElementById('holiday-toggle').checked = data.holiday_mode;
            document.getElementById('snow-toggle').checked = data.snow_enabled;
            document.getElementById('vk-popup-toggle').checked = data.vk_popup_enabled !== false;
            document.getElementById('content-protection-toggle').checked = data.content_protection_enabled !== false;
            document.getElementById('custom-message').value = data.custom_message || '';
            // Maintenance settings
            document.getElementById('maintenance-toggle').checked = data.maintenance_enabled || false;
            document.getElementById('maintenance-text').value = data.maintenance_text || '';
            if (data.maintenance_time) {
              // Convert ISO to datetime-local format
              const dt = new Date(data.maintenance_time);
              if (!isNaN(dt.getTime())) {
                document.getElementById('maintenance-time').value = dt.toISOString().slice(0, 16);
              }
            }
          })
          .catch(err => console.error('Error loading admin settings:', err));
      }

      // AI Coach Settings
      function loadAISettings() {
        fetch('/api/admin/settings')
          .then(response => response.json())
          .then(data => {
            if (data.ai_user_credits) {
              document.getElementById('ai-user-credits').value = data.ai_user_credits;
            }
            if (data.ai_donor_credits) {
              document.getElementById('ai-donor-credits').value = data.ai_donor_credits;
            }
            if (data.ai_model) {
              document.getElementById('ai-model').value = data.ai_model;
            }
          })
          .catch(err => console.error('Error loading AI settings:', err));
      }

      function updateAISettings() {
        const statusEl = document.getElementById('ai-settings-status');
        const settings = {
          ai_user_credits: parseInt(document.getElementById('ai-user-credits').value) || 3,
          ai_donor_credits: parseInt(document.getElementById('ai-donor-credits').value) || 30,
          ai_model: document.getElementById('ai-model').value
        };

        // Validate
        if (settings.ai_user_credits < 1 || settings.ai_user_credits > 100) {
          statusEl.innerHTML = '<span style="color: #e74c3c;">Кредиты юзеров: 1-100</span>';
          return;
        }
        if (settings.ai_donor_credits < 1 || settings.ai_donor_credits > 1000) {
          statusEl.innerHTML = '<span style="color: #e74c3c;">Кредиты доноров: 1-1000</span>';
          return;
        }

        fetch('/api/admin/settings', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(settings)
        })
          .then(response => {
            if (response.ok) {
              statusEl.innerHTML = '<span style="color: #27ae60;">✓ Сохранено</span>';
              setTimeout(() => statusEl.innerHTML = '', 2000);
            } else {
              statusEl.innerHTML = '<span style="color: #e74c3c;">Ошибка сохранения</span>';
            }
          })
          .catch(err => {
            statusEl.innerHTML = '<span style="color: #e74c3c;">Ошибка соединения</span>';
          });
      }

      // Load AI Token Stats
      function loadAIStats() {
        fetch('/api/admin/ai-stats')
          .then(response => response.json())
          .then(data => {
            // Format token count
            const formatTokens = (n) => {
              if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
              if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
              return n.toString();
            };

            // Update period cards
            ['hour', 'day', 'week'].forEach(period => {
              const p = data[period] || {};
              document.getElementById(`stats-${period}-tokens`).textContent =
                formatTokens((p.input_tokens || 0) + (p.output_tokens || 0));
              document.getElementById(`stats-${period}-cost`).textContent =
                '$' + (p.cost_usd || 0).toFixed(4);
            });

            // Update models breakdown
            const modelsEl = document.getElementById('ai-stats-models');
            if (data.by_model && data.by_model.length > 0) {
              modelsEl.innerHTML = data.by_model.map(m =>
                `<div style="display: flex; justify-content: space-between; padding: 2px 0;">
                  <span>${m.model}</span>
                  <span style="color: #10b981;">$${m.cost_usd.toFixed(4)} (${m.requests} запр.)</span>
                </div>`
              ).join('');
            } else {
              modelsEl.innerHTML = '<span style="color: var(--text-muted);">Нет данных</span>';
            }

            // Update users breakdown
            const usersEl = document.getElementById('ai-stats-users');
            if (data.by_user && data.by_user.length > 0) {
              usersEl.innerHTML = data.by_user.map(u =>
                `<div style="display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
                  <span>ID: ${u.player_id}</span>
                  <span style="color: #a855f7;">${formatTokens(u.input_tokens + u.output_tokens)} ток.</span>
                  <span style="color: #10b981;">$${u.cost_usd.toFixed(4)}</span>
                </div>`
              ).join('');
            } else {
              usersEl.innerHTML = '<span style="color: var(--text-muted);">Нет данных</span>';
            }
          })
          .catch(err => {
            console.error('Error loading AI stats:', err);
            document.getElementById('ai-stats-models').innerHTML = '<span style="color: #e74c3c;">Ошибка загрузки</span>';
          });
      }

      function toggleHolidayMode(enabled) {
        fetch('/api/admin/holiday-mode', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ enabled: enabled })
        })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              // Toast or simple robust notification could be added here
            }
          });
      }

      function updateServerSettings() {
        const maintenanceTimeInput = document.getElementById('maintenance-time').value;
        let maintenanceTime = '';
        if (maintenanceTimeInput) {
          maintenanceTime = new Date(maintenanceTimeInput).toISOString();
        }

        const settings = {
          snow_enabled: document.getElementById('snow-toggle').checked,
          vk_popup_enabled: document.getElementById('vk-popup-toggle').checked,
          content_protection_enabled: document.getElementById('content-protection-toggle').checked,
          custom_message: document.getElementById('custom-message').value,
          maintenance_enabled: document.getElementById('maintenance-toggle').checked,
          maintenance_text: document.getElementById('maintenance-text').value,
          maintenance_time: maintenanceTime
        };

        fetch('/api/admin/settings', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(settings)
        });
      }

      // Load settings if admin panel exists
      document.addEventListener('DOMContentLoaded', function () {
        // Initialize ghost toggle
        const ghostToggle = document.getElementById('ghosts-toggle');
        if (ghostToggle) {
          // '{{ enable_ghosts }}' renders as True/False in Python, we need true/false for JS
          const isGhostsEnabled = "{{ enable_ghosts }}" === "True";
          ghostToggle.checked = isGhostsEnabled;
        }

        if (document.getElementById('holiday-toggle')) {
          loadAdminSettings();
        }

        if (document.getElementById('ai-stats-cards')) {
          loadAIStats();
        }

        if (document.getElementById('backups-list')) {
          loadBackups();
        }

        if (document.getElementById('ai-user-credits')) {
          loadAISettings();
        }
      });

      // Backup Functions
      async function loadBackups() {
        try {
          const response = await fetch('/api/admin/backups');
          const backups = await response.json();

          const listEl = document.getElementById('backups-list');
          if (!listEl) return;

          listEl.innerHTML = '';

          if (backups.length === 0) {
            listEl.innerHTML = '<div style="text-align: center; color: #bdc3c7;">Нет доступных бэкапов</div>';
            return;
          }

          backups.forEach(backup => {
            const item = document.createElement('div');
            item.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1);';

            // Convert size to MB
            const sizeMb = (backup.size / (1024 * 1024)).toFixed(2);

            item.innerHTML = `
                    <div>
                        <div style="font-weight: 500; color: var(--text-primary); font-size: 0.85rem;">${backup.created}</div>
                        <div style="font-size: 0.7rem; color: var(--text-muted);">${sizeMb} MB</div>
                    </div>
                    <a href="/api/admin/backups/download/${backup.filename}" class="setting-btn" style="width: auto; padding: 4px 10px; font-size: 0.8rem; text-decoration: none;">
                        <i class="fas fa-download"></i>
                    </a>
                `;
            listEl.appendChild(item);
          });

        } catch (error) {
          console.error('Error loading backups:', error);
          const listEl = document.getElementById('backups-list');
          if (listEl) listEl.innerHTML = '<div style="text-align: center; color: #e74c3c;">Ошибка загрузки</div>';
        }
      }

      async function createBackup() {
        const btn = document.getElementById('create-backup-btn');
        const statusEl = document.getElementById('backup-status');

        if (!confirm('Создать новый бэкап? Это может занять некоторое время.')) {
          return;
        }

        btn.disabled = true;
        btn.style.opacity = '0.7';
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Создание...';
        statusEl.textContent = 'Процесс запущен...';

        try {
          const response = await fetch('/api/admin/backups/create', { method: 'POST' });
          const data = await response.json();

          if (response.ok && data.success) {
            statusEl.textContent = 'Бэкап создан успешно';
            statusEl.style.color = '#27ae60';
            loadBackups();
          } else {
            throw new Error(data.error || 'Unknown error');
          }
        } catch (error) {
          console.error('Error creating backup:', error);
          statusEl.textContent = `Ошибка: ${error.message}`;
          statusEl.style.color = '#e74c3c';
        } finally {
          btn.disabled = false;
          btn.style.opacity = '1';
          btn.innerHTML = '<i class="fas fa-save"></i> Создать Бэкап';
        }
      }

      function toggleGhostsSetting(enabled) {
        fetch('/api/settings/ghosts', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ enabled: enabled })
        })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              // Optional: show a small toast notification
              console.log('Ghosts setting updated:', enabled);
            } else {
              console.error('Failed to update ghosts setting:', data.error);
              // Revert toggle if failed
              document.getElementById('ghosts-toggle').checked = !enabled;
              alert('Ошибка при сохранении настройки');
            }
          })
          .catch(err => {
            console.error('Error:', err);
            document.getElementById('ghosts-toggle').checked = !enabled;
          });
      }

      function togglePrivacy(hidden) {
        fetch('/api/settings/privacy', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ live_hidden: hidden })
        })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              console.log('Privacy setting updated:', hidden);
            } else {
              console.error('Failed to update privacy setting:', data.error);
              document.getElementById('privacy-toggle').checked = !hidden;
              alert('Ошибка при сохранении настройки приватности');
            }
          })
          .catch(err => {
            console.error('Error:', err);
            document.getElementById('privacy-toggle').checked = !hidden;
          });
      }

      // Donor management
      async function setDonorStatus(isDonor) {
        const username = document.getElementById('donor-username').value.trim();
        const resultEl = document.getElementById('donor-result');

        if (!username) {
          resultEl.innerHTML = '<span style="color: #e74c3c;">Введите имя пользователя</span>';
          return;
        }

        try {
          const response = await fetch('/api/admin/set-donor', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username, is_donor: isDonor })
          });

          const data = await response.json();

          if (response.ok) {
            const status = data.is_donor ? '✅ Донатер' : '❌ Обычный';
            resultEl.innerHTML = `<strong>${data.username}</strong>: ${status}`;
            resultEl.style.color = data.is_donor ? '#27ae60' : '#7f8c8d';
          } else {
            resultEl.innerHTML = `<span style="color: #e74c3c;">Ошибка: ${data.error}</span>`;
          }
        } catch (error) {
          resultEl.innerHTML = '<span style="color: #e74c3c;">Ошибка соединения</span>';
        }
      }
    </script>
    {% endif %}

    <!-- Секция Telegram бота -->
    <div class="donate-card">
      <div class="card-title">
        <i class="fab fa-telegram"></i> Telegram Bot
      </div>
      <p style="color: var(--yellow-bright); font-size: 0.75rem; margin-bottom: 15px; text-align: center;">
        Привяжите Telegram для автоматического получения FIT файлов после каждой тренировки 📊
      </p>
      <div style="text-align: center;">
        <a href="{{ url_for('telegram_link') }}" target="_blank" class="donate-button-large"
          style="display: inline-block; background: linear-gradient(135deg, #0088cc, #229ED9); border: none; color: white;">
          <i class="fab fa-telegram"></i>
          <div class="donate-text">
            <div class="donate-title">Привязать Telegram</div>
            <div class="donate-subtitle">Автоматическая отправка FIT</div>
          </div>
        </a>
      </div>
    </div>

  </div>
</div>

<!-- Premium Profile Edit Modal -->
<style>
  .profile-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;
  }

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

  .profile-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: 0;
    max-width: 520px;
    width: 95%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(255, 140, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

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

  .profile-modal-header {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 140, 0, 0.1));
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .profile-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #FFD700;
    margin: 0;
  }

  .profile-modal-title i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #FF8C00, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .profile-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 107, 0, 0.1);
    color: #FFA500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-modal-close:hover {
    background: rgba(235, 51, 73, 0.2);
    color: #EB3349;
    transform: rotate(90deg);
  }

  .profile-modal-body {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(85vh - 150px);
  }

  .profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .profile-form-group {
    position: relative;
  }

  .profile-form-group.full-width {
    grid-column: 1 / -1;
  }

  .profile-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFD700;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .profile-form-label i {
    color: #FFA500;
    width: 16px;
  }

  .profile-form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255, 140, 0, 0.25);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
  }

  .profile-form-input:focus {
    border-color: #FFD700;
    background: rgba(255, 107, 0, 0.08);
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.15), 0 0 20px rgba(255, 140, 0, 0.1);
  }

  .profile-form-input::placeholder {
    color: rgba(255, 165, 0, 0.4);
  }

  .profile-form-hint {
    font-size: 0.7rem;
    color: rgba(255, 165, 0, 0.5);
    margin-top: 5px;
  }

  .profile-stats-preview {
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .profile-stats-title {
    font-size: 0.75rem;
    color: #FFA500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .profile-stat-item {
    text-align: center;
  }

  .profile-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFD700;
  }

  .profile-stat-label {
    font-size: 0.65rem;
    color: rgba(255, 165, 0, 0.6);
    text-transform: uppercase;
  }

  .profile-modal-footer {
    padding: 20px 25px;
    background: rgba(255, 107, 0, 0.05);
    border-top: 1px solid rgba(255, 140, 0, 0.2);
    display: flex;
    gap: 12px;
  }

  .profile-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .profile-btn-primary {
    background: linear-gradient(135deg, #FF6B00, #FF8C00);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
  }

  .profile-btn-primary:hover {
    background: linear-gradient(135deg, #FF8C00, #FFD700);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 140, 0, 0.5);
  }

  .profile-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

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

  .profile-btn-secondary:hover {
    background: rgba(255, 107, 0, 0.1);
    border-color: #FFD700;
  }

  .profile-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #FFA500;
    gap: 10px;
  }

  .profile-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #38EF7D;
    border-radius: 12px;
    padding: 15px 25px;
    color: #38EF7D;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }

  .profile-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  .profile-toast.error {
    border-color: #EB3349;
    color: #EB3349;
  }

  @media (max-width: 600px) {
    .profile-form-grid {
      grid-template-columns: 1fr;
    }

    .profile-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>

<div id="profile-modal" class="profile-modal-overlay" onclick="if(event.target === this) closeProfileModal()">
  <div class="profile-modal">
    <div class="profile-modal-header">
      <h3 class="profile-modal-title">
        <i class="fas fa-user-astronaut"></i>
        Редактировать профиль
      </h3>
      <button class="profile-modal-close" onclick="closeProfileModal()" title="Закрыть">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <form id="profile-form">
      <div class="profile-modal-body" id="profile-modal-body">
        <div class="profile-loading" id="profile-loading">
          <i class="fas fa-spinner fa-spin"></i> Загрузка данных...
        </div>

        <div id="profile-form-content" style="display: none;">
          <div class="profile-form-grid">
            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-user"></i> Имя
              </label>
              <input type="text" class="profile-form-input" id="edit-first-name" placeholder="Ваше имя" required>
            </div>

            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-user-tag"></i> Фамилия
              </label>
              <input type="text" class="profile-form-input" id="edit-last-name" placeholder="Ваша фамилия" required>
            </div>

            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-weight"></i> Вес
              </label>
              <input type="number" step="0.1" class="profile-form-input" id="edit-weight" placeholder="75.0" min="30"
                max="200">
              <div class="profile-form-hint">в килограммах</div>
            </div>

            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-ruler-vertical"></i> Рост
              </label>
              <input type="number" class="profile-form-input" id="edit-height" placeholder="175" min="100" max="250">
              <div class="profile-form-hint">в сантиметрах</div>
            </div>

            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-bolt"></i> FTP
              </label>
              <input type="number" class="profile-form-input" id="edit-ftp" placeholder="200" min="50" max="500">
              <div class="profile-form-hint">функциональная пороговая мощность (Вт)</div>
            </div>

            <div class="profile-form-group">
              <label class="profile-form-label">
                <i class="fas fa-heartbeat"></i> Макс. пульс
              </label>
              <input type="number" class="profile-form-input" id="edit-max-hr" placeholder="185" min="100" max="220">
              <div class="profile-form-hint">максимальная ЧСС</div>
            </div>
          </div>

          <div class="profile-stats-preview" id="profile-stats-preview">
            <div class="profile-stats-title">
              <i class="fas fa-chart-line"></i> Расчётные показатели
            </div>
            <div class="profile-stats-grid">
              <div class="profile-stat-item">
                <div class="profile-stat-value" id="calc-wkg">-</div>
                <div class="profile-stat-label">W/kg</div>
              </div>
              <div class="profile-stat-item">
                <div class="profile-stat-value" id="calc-bmi">-</div>
                <div class="profile-stat-label">BMI</div>
              </div>
              <div class="profile-stat-item">
                <div class="profile-stat-value" id="calc-zones">Z3: -</div>
                <div class="profile-stat-label">Зона 3</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="profile-modal-footer">
        <button type="button" class="profile-btn profile-btn-secondary" onclick="closeProfileModal()">
          <i class="fas fa-times"></i> Отмена
        </button>
        <button type="submit" class="profile-btn profile-btn-primary" id="profile-save-btn">
          <i class="fas fa-save"></i> Сохранить
        </button>
      </div>
    </form>
  </div>
</div>

<div id="profile-toast" class="profile-toast">
  <i class="fas fa-check-circle"></i>
  <span id="profile-toast-text">Профиль сохранён!</span>
</div>

<script>
  function showProfileToast(message, isError = false) {
    const toast = document.getElementById('profile-toast');
    const text = document.getElementById('profile-toast-text');
    text.textContent = message;
    toast.className = 'profile-toast' + (isError ? ' error' : '');
    toast.querySelector('i').className = isError ? 'fas fa-exclamation-circle' : 'fas fa-check-circle';
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 3000);
  }

  function calculateStats() {
    const weight = parseFloat(document.getElementById('edit-weight').value) || 0;
    const height = parseInt(document.getElementById('edit-height').value) || 0;
    const ftp = parseInt(document.getElementById('edit-ftp').value) || 0;
    const maxHr = parseInt(document.getElementById('edit-max-hr').value) || 0;

    // W/kg
    if (weight > 0 && ftp > 0) {
      document.getElementById('calc-wkg').textContent = (ftp / weight).toFixed(2);
    } else {
      document.getElementById('calc-wkg').textContent = '-';
    }

    // BMI
    if (weight > 0 && height > 0) {
      const bmi = weight / Math.pow(height / 100, 2);
      document.getElementById('calc-bmi').textContent = bmi.toFixed(1);
    } else {
      document.getElementById('calc-bmi').textContent = '-';
    }

    // Zone 3 HR
    if (maxHr > 0) {
      const z3 = Math.round(maxHr * 0.76) + '-' + Math.round(maxHr * 0.85);
      document.getElementById('calc-zones').textContent = z3;
    } else {
      document.getElementById('calc-zones').textContent = '-';
    }
  }

  async function openProfileEditModal() {
    const modal = document.getElementById('profile-modal');
    const loading = document.getElementById('profile-loading');
    const content = document.getElementById('profile-form-content');

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

    loading.style.display = 'flex';
    content.style.display = 'none';

    try {
      const res = await fetch('/api/profile');
      if (res.ok) {
        const data = await res.json();
        document.getElementById('edit-first-name').value = data.first_name || '';
        document.getElementById('edit-last-name').value = data.last_name || '';
        document.getElementById('edit-weight').value = data.weight ? (data.weight / 1000).toFixed(1) : '';
        document.getElementById('edit-height').value = data.height ? Math.round(data.height / 10) : '';
        document.getElementById('edit-ftp').value = data.ftp || '';
        document.getElementById('edit-max-hr').value = data.max_heart_rate || '';

        calculateStats();
      }
    } catch (e) {
      console.error(e);
      showProfileToast('Ошибка загрузки профиля', true);
    }

    loading.style.display = 'none';
    content.style.display = 'block';
  }

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

  // Add input listeners for live stats calculation
  ['edit-weight', 'edit-height', 'edit-ftp', 'edit-max-hr'].forEach(id => {
    document.getElementById(id).addEventListener('input', calculateStats);
  });

  // Close on Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      const modal = document.getElementById('profile-modal');
      if (modal.classList.contains('active')) {
        closeProfileModal();
      }
    }
  });

  document.getElementById('profile-form').addEventListener('submit', async (e) => {
    e.preventDefault();

    const saveBtn = document.getElementById('profile-save-btn');
    saveBtn.disabled = true;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Сохраняю...';

    const weight = parseFloat(document.getElementById('edit-weight').value) || 70;
    const height = parseInt(document.getElementById('edit-height').value) || 175;

    const data = {
      first_name: document.getElementById('edit-first-name').value,
      last_name: document.getElementById('edit-last-name').value,
      weight: Math.round(weight * 1000),
      height: height * 10,
      ftp: parseInt(document.getElementById('edit-ftp').value) || 200,
      max_heart_rate: parseInt(document.getElementById('edit-max-hr').value) || 185
    };

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

      if (res.ok) {
        closeProfileModal();
        showProfileToast('✅ Профиль обновлён! Изменения будут видны после перезапуска игры.');
        setTimeout(() => location.reload(), 1500);
      } else {
        const err = await res.json();
        showProfileToast(err.error || 'Ошибка сохранения', true);
      }
    } catch (e) {
      showProfileToast('Ошибка: ' + e.message, true);
    }

    saveBtn.disabled = false;
    saveBtn.innerHTML = '<i class="fas fa-save"></i> Сохранить';
  });
</script>

<!-- News Editor Modal -->
<div id="news-modal" class="profile-modal-overlay" onclick="if(event.target === this) closeNewsModal()">
  <div class="profile-modal" style="max-width: 600px;">
    <div class="profile-modal-header">
      <h3 class="profile-modal-title">
        <i class="fas fa-newspaper"></i>
        Редактор новостей
      </h3>
      <button class="profile-modal-close" onclick="closeNewsModal()" title="Закрыть">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="profile-modal-body" style="max-height: 60vh;">
      <button type="button" onclick="showAddNewsForm()"
        style="width: 100%; margin-bottom: 15px; padding: 12px; border-radius: 10px; border: 2px dashed var(--orange-primary); background: rgba(255,107,0,0.05); color: var(--orange-primary); font-weight: 700; cursor: pointer;">
        <i class="fas fa-plus"></i> Добавить новость
      </button>

      <div id="add-news-form"
        style="display: none; background: rgba(255,107,0,0.08); border: 1px solid rgba(255,107,0,0.2); border-radius: 10px; padding: 15px; margin-bottom: 15px;">
        <input type="text" id="new-news-title" placeholder="Заголовок (25.12.2025 - Название)"
          style="width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);">
        <textarea id="new-news-content" placeholder="Содержание новости..." rows="3"
          style="width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary); resize: vertical;"></textarea>
        <select id="new-news-icon"
          style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--border-primary); background: var(--input-bg); color: var(--text-primary);">
          <option value="fas fa-newspaper">📰 Новость</option>
          <option value="fas fa-trophy">🏆 Достижение</option>
          <option value="fas fa-tools">🔧 Обновление</option>
          <option value="fas fa-chart-line">📈 Статистика</option>
          <option value="fas fa-users">👥 Сообщество</option>
          <option value="fas fa-globe">🌍 Глобальное</option>
          <option value="fas fa-lightbulb">💡 Совет</option>
          <option value="fas fa-camera">📷 Медиа</option>
        </select>
        <div style="display: flex; gap: 10px;">
          <button type="button" onclick="addNews()"
            style="flex: 1; padding: 10px; border-radius: 8px; border: none; background: linear-gradient(135deg, #38ef7d, #11998e); color: white; font-weight: 700; cursor: pointer;">
            <i class="fas fa-check"></i> Добавить
          </button>
          <button type="button" onclick="document.getElementById('add-news-form').style.display='none'"
            style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border-primary); background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer;">
            Отмена
          </button>
        </div>
      </div>

      <div id="news-list" style="display: flex; flex-direction: column; gap: 10px;">
        <div style="text-align: center; color: var(--text-muted); padding: 20px;">
          <i class="fas fa-spinner fa-spin"></i> Загрузка...
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let newsData = [];

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

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

  async function loadNews() {
    try {
      const res = await fetch('/api/admin/news');
      if (res.ok) {
        const data = await res.json();
        newsData = data.news || [];
        renderNewsList();
      }
    } catch (e) {
      document.getElementById('news-list').innerHTML = '<div style="color: #ff6b6b;">Ошибка загрузки</div>';
    }
  }

  function renderNewsList() {
    const container = document.getElementById('news-list');
    if (!newsData.length) {
      container.innerHTML = '<div style="text-align: center; color: var(--text-muted);">Нет новостей</div>';
      return;
    }

    container.innerHTML = newsData.map((item, idx) => `
      <div style="background: rgba(255,107,0,0.05); border: 1px solid rgba(255,107,0,0.15); border-radius: 10px; padding: 12px;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;">
          <div style="flex: 1;">
            <div style="font-weight: 700; color: var(--yellow-glow); font-size: 0.85rem; margin-bottom: 4px;">
              <i class="${item.icon}"></i> ${item.title}
            </div>
            <div style="font-size: 0.75rem; color: var(--text-muted); line-height: 1.4;">${item.content.substring(0, 100)}${item.content.length > 100 ? '...' : ''}</div>
          </div>
          <div style="display: flex; gap: 6px;">
            <button onclick="deleteNews(${idx})" style="width: 28px; height: 28px; border-radius: 6px; border: none; background: rgba(235,51,73,0.15); color: #ff6b6b; cursor: pointer;">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      </div>
    `).join('');
  }

  function showAddNewsForm() {
    document.getElementById('add-news-form').style.display = 'block';
    document.getElementById('new-news-title').focus();
  }

  async function addNews() {
    const title = document.getElementById('new-news-title').value.trim();
    const content = document.getElementById('new-news-content').value.trim();
    const icon = document.getElementById('new-news-icon').value;

    if (!title) {
      alert('Введите заголовок');
      return;
    }

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

      if (res.ok) {
        document.getElementById('new-news-title').value = '';
        document.getElementById('new-news-content').value = '';
        document.getElementById('add-news-form').style.display = 'none';
        loadNews();
        showProfileToast('Новость добавлена!');
      } else {
        const err = await res.json();
        showProfileToast(err.error || 'Ошибка', true);
      }
    } catch (e) {
      showProfileToast('Ошибка сети', true);
    }
  }

  async function deleteNews(index) {
    if (!confirm('Удалить эту новость?')) return;

    try {
      const res = await fetch(`/api/admin/news/${index}`, { method: 'DELETE' });
      if (res.ok) {
        loadNews();
        showProfileToast('Новость удалена!');
      } else {
        showProfileToast('Ошибка удаления', true);
      }
    } catch (e) {
      showProfileToast('Ошибка сети', true);
    }
  }

  // === РЕДАКТОР КАНАЛОВ ===
  let channelsData = [];

  function openChannelsModal() {
    const modal = document.getElementById('channels-modal');
    if (modal) {
      modal.style.display = 'flex';
      // Trigger animation by adding .active class after display change
      setTimeout(() => modal.classList.add('active'), 10);
      loadChannels();
    }
  }

  function closeChannelsModal() {
    const modal = document.getElementById('channels-modal');
    if (modal) {
      modal.classList.remove('active');
      setTimeout(() => modal.style.display = 'none', 300); // Wait for fade-out animation
    }
  }

  async function loadChannels() {
    try {
      const res = await fetch('/api/admin/friendly-channels');
      channelsData = await res.json();
      renderChannelsList();
    } catch (e) {
      console.error('Error loading channels:', e);
    }
  }

  function renderChannelsList() {
    const container = document.getElementById('channels-list');
    if (!container) return;

    if (!channelsData || channelsData.length === 0) {
      container.innerHTML = '<div style="text-align:center; color: var(--text-muted); padding: 20px;">Нет каналов</div>';
      return;
    }

    container.innerHTML = channelsData.map((ch, idx) => `
      <div style="display:flex; align-items:center; gap:10px; padding:10px; background:rgba(0,0,0,0.2); border-radius:8px; margin-bottom:8px;">
        <span style="font-size:1.2rem;">${ch.channel_type === 'channel' ? '📢' : '💬'}</span>
        <div style="flex:1;">
          <div style="font-weight:700; color:var(--text-primary);">${ch.name}</div>
          <div style="font-size:0.7rem; color:var(--text-muted);">${ch.url}</div>
        </div>
        <button onclick="editChannel(${ch.id})" style="padding:5px 10px; border:none; background:#FFA500; color:white; border-radius:5px; cursor:pointer;">
          <i class="fas fa-edit"></i>
        </button>
        <button onclick="deleteChannel(${ch.id})" style="padding:5px 10px; border:none; background:#EB3349; color:white; border-radius:5px; cursor:pointer;">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    `).join('');
  }

  function showAddChannelForm() {
    document.getElementById('channel-form-title').textContent = 'Добавить канал';
    document.getElementById('channel-id').value = '';
    document.getElementById('channel-name').value = '';
    document.getElementById('channel-url').value = '';
    document.getElementById('channel-type').value = 'chat';
    document.getElementById('channel-desc').value = '';
    document.getElementById('channel-form').style.display = 'block';
  }

  function editChannel(id) {
    const ch = channelsData.find(c => c.id === id);
    if (!ch) return;

    document.getElementById('channel-form-title').textContent = 'Редактировать';
    document.getElementById('channel-id').value = ch.id;
    document.getElementById('channel-name').value = ch.name;
    document.getElementById('channel-url').value = ch.url;
    document.getElementById('channel-type').value = ch.channel_type;
    document.getElementById('channel-desc').value = ch.description || '';
    document.getElementById('channel-form').style.display = 'block';
  }

  async function saveChannel() {
    const id = document.getElementById('channel-id').value;
    const data = {
      name: document.getElementById('channel-name').value,
      url: document.getElementById('channel-url').value,
      channel_type: document.getElementById('channel-type').value,
      description: document.getElementById('channel-desc').value
    };

    try {
      const url = id ? `/api/admin/friendly-channels/${id}` : '/api/admin/friendly-channels';
      const method = id ? 'PUT' : 'POST';

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

      if (res.ok) {
        document.getElementById('channel-form').style.display = 'none';
        loadChannels();
        showProfileToast('Канал сохранён!');
      } else {
        showProfileToast('Ошибка сохранения', true);
      }
    } catch (e) {
      showProfileToast('Ошибка сети', true);
    }
  }

  async function deleteChannel(id) {
    if (!confirm('Удалить этот канал?')) return;

    try {
      const res = await fetch(`/api/admin/friendly-channels/${id}`, { method: 'DELETE' });
      if (res.ok) {
        loadChannels();
        showProfileToast('Канал удалён!');
      } else {
        showProfileToast('Ошибка удаления', true);
      }
    } catch (e) {
      showProfileToast('Ошибка сети', true);
    }
  }
</script>

<!-- Модальное окно редактора каналов -->
<div id="channels-modal" class="profile-modal-overlay" onclick="if(event.target===this)closeChannelsModal()">
  <div class="profile-modal" style="max-width:600px;">
    <div class="profile-modal-header">
      <h2 class="profile-modal-title"><i class="fab fa-telegram"></i> Дружественные каналы</h2>
      <button class="profile-modal-close" onclick="closeChannelsModal()"><i class="fas fa-times"></i></button>
    </div>
    <div class="profile-modal-body">
      <button onclick="showAddChannelForm()"
        style="width:100%; padding:10px; margin-bottom:15px; border-radius:8px; border:2px dashed #29B6F6; background:rgba(41,182,246,0.1); color:#29B6F6; font-weight:700; cursor:pointer;">
        <i class="fas fa-plus"></i> Добавить канал
      </button>

      <!-- Форма добавления/редактирования -->
      <div id="channel-form"
        style="display:none; background:rgba(0,0,0,0.3); padding:15px; border-radius:10px; margin-bottom:15px;">
        <h4 id="channel-form-title" style="color:#FFD700; margin-bottom:10px;">Добавить канал</h4>
        <input type="hidden" id="channel-id">
        <div style="margin-bottom:10px;">
          <label style="display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">Название</label>
          <input type="text" id="channel-name" placeholder="reZwift Chat"
            style="width:100%; padding:8px; border-radius:6px; border:1px solid var(--border-primary); background:var(--input-bg); color:var(--text-primary);">
        </div>
        <div style="margin-bottom:10px;">
          <label style="display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">URL</label>
          <input type="text" id="channel-url" placeholder="https://t.me/..."
            style="width:100%; padding:8px; border-radius:6px; border:1px solid var(--border-primary); background:var(--input-bg); color:var(--text-primary);">
        </div>
        <div style="margin-bottom:10px;">
          <label style="display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">Тип</label>
          <select id="channel-type"
            style="width:100%; padding:8px; border-radius:6px; border:1px solid var(--border-primary); background:var(--input-bg); color:var(--text-primary);">
            <option value="chat">💬 Чат</option>
            <option value="channel">📢 Канал</option>
          </select>
        </div>
        <div style="margin-bottom:10px;">
          <label style="display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">Описание</label>
          <input type="text" id="channel-desc" placeholder="Описание..."
            style="width:100%; padding:8px; border-radius:6px; border:1px solid var(--border-primary); background:var(--input-bg); color:var(--text-primary);">
        </div>
        <div style="display:flex; gap:10px;">
          <button onclick="saveChannel()"
            style="flex:1; padding:10px; border-radius:8px; border:none; background:#4CAF50; color:white; font-weight:700; cursor:pointer;">
            <i class="fas fa-save"></i> Сохранить
          </button>
          <button onclick="document.getElementById('channel-form').style.display='none'"
            style="padding:10px 20px; border-radius:8px; border:none; background:#666; color:white; cursor:pointer;">
            Отмена
          </button>
        </div>
      </div>

      <!-- Список каналов -->
      <div id="channels-list">
        <div style="text-align:center; color:var(--text-muted); padding:20px;">
          <i class="fas fa-spinner fa-spin"></i> Загрузка...
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}