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

  .goals-wrapper::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    animation: rotateGlow 25s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

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

  @keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

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

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

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

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

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

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

  /* Goals Header */
  .goals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: 14px;
  }

  .goals-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--yellow-glow);
  }

  .goals-title i {
    font-size: 1.5rem;
    color: #10b981;
  }

  .btn-add-goal {
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-add-goal:hover {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  }

  /* Goals List */
  .goals-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .goal-card {
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .goal-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  }

  .goal-card.completed {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), var(--bg-card));
  }

  .goal-card.completed::before {
    content: '🏆';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    animation: bounce 1s ease infinite;
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .goal-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .goal-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 140, 0, 0.1));
    border: 2px solid rgba(255, 140, 0, 0.3);
  }

  .goal-icon.cycling { background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 140, 0, 0.1)); }
  .goal-icon.running { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); border-color: rgba(59, 130, 246, 0.3); }

  .goal-details h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
  }

  .goal-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 140, 0, 0.15);
    color: var(--orange-primary);
    font-weight: 600;
  }

  .goal-type-badge.weekly { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
  .goal-type-badge.monthly { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

  .goal-actions {
    display: flex;
    gap: 8px;
  }

  .btn-goal-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid rgba(255, 140, 0, 0.3);
    background: rgba(255, 107, 0, 0.1);
    color: var(--text-accent);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-goal-action:hover {
    background: rgba(255, 107, 0, 0.2);
    border-color: var(--orange-primary);
    color: var(--orange-primary);
    transform: scale(1.1);
  }

  .btn-goal-action.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
  }

  /* Progress Bar */
  .goal-progress-container {
    margin-bottom: 12px;
  }

  .goal-progress-bar {
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }

  .goal-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
  }

  .goal-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* Progress colors based on percentage */
  .goal-progress-fill.p0-25 { background: linear-gradient(90deg, #ef4444, #f97316); }
  .goal-progress-fill.p25-50 { background: linear-gradient(90deg, #f97316, #eab308); }
  .goal-progress-fill.p50-75 { background: linear-gradient(90deg, #eab308, #84cc16); }
  .goal-progress-fill.p75-100 { background: linear-gradient(90deg, #84cc16, #22c55e); }
  .goal-progress-fill.p100 { background: linear-gradient(90deg, #10b981, #14b8a6); }

  .goal-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }

  .goal-values {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .goal-current {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--yellow-glow);
  }

  .goal-separator {
    color: var(--text-muted);
    font-size: 1rem;
  }

  .goal-target {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  .goal-unit {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 4px;
  }

  .goal-percentage {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 140, 0, 0.15);
    color: var(--orange-primary);
  }

  .goal-percentage.completed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
  }

  .goal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  .goal-time-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .goal-time-left i {
    color: var(--orange-primary);
  }

  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 2px dashed var(--border-primary);
    border-radius: 16px;
  }

  .empty-state-icon {
    font-size: 4rem;
    margin-bottom: 20px;
  }

  .empty-state h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 10px;
  }

  .empty-state p {
    color: var(--text-muted);
    margin-bottom: 20px;
  }

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

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

  .modal-container {
    background: var(--bg-card);
    border: 2px solid var(--border-accent);
    border-radius: 20px;
    padding: 0;
    max-width: 480px;
    width: 95%;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
  }

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

  .modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 107, 0, 0.1);
    color: var(--text-accent);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    transform: rotate(90deg);
  }

  .modal-body {
    padding: 24px;
  }

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

  .form-label {
    display: block;
    color: var(--yellow-glow);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .form-select, .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: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .form-select:focus, .form-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
  }

  .form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

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

  .btn-submit {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  }

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

  /* Loading */
  .loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
  }

  .loading-spinner i {
    font-size: 2rem;
    color: var(--orange-primary);
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Responsive */
  @media (max-width: 600px) {
    .goals-header {
      flex-direction: column;
      gap: 12px;
      text-align: center;
    }

    .btn-add-goal {
      width: 100%;
      justify-content: center;
    }

    .form-row {
      grid-template-columns: 1fr;
    }

    .goal-header {
      flex-direction: column;
      gap: 12px;
    }

    .goal-actions {
      align-self: flex-end;
    }
  }
</style>

<div class="goals-wrapper">
  <div class="main-header">
    <a href="{{ url_for('user_home', username=username) }}" class="header-title-link" style="text-decoration: none;">
      <div class="header-title">🎯 Мои цели</div>
    </a>
  </div>

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

    <!-- Goals Header -->
    <div class="goals-header">
      <div class="goals-title">
        <i class="fas fa-bullseye"></i>
        <span>Управление целями</span>
      </div>
      <button class="btn-add-goal" onclick="openCreateGoalModal()">
        <i class="fas fa-plus"></i> Добавить цель
      </button>
    </div>

    <!-- Goals List -->
    <div id="goalsList" class="goals-list">
      <div class="loading-spinner">
        <i class="fas fa-spinner"></i>
        <p>Загрузка целей...</p>
      </div>
    </div>
  </div>
</div>

<!-- Create Goal Modal -->
<div class="modal-overlay" id="createGoalModal">
  <div class="modal-container">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-plus-circle"></i> Новая цель
      </div>
      <button class="modal-close" onclick="closeCreateGoalModal()">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <form id="createGoalForm" onsubmit="createGoal(event)">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Вид спорта</label>
            <select class="form-select" name="sport" required>
              <option value="CYCLING">🚴 Велосипед</option>
              <option value="RUNNING">🏃 Бег</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Тип цели</label>
            <select class="form-select" name="type" required onchange="updateTargetLabel(this)">
              <option value="0">📏 Дистанция</option>
              <option value="1">⏱️ Время</option>
            </select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Период</label>
            <select class="form-select" name="periodicity" required>
              <option value="0">📅 Еженедельно</option>
              <option value="1">📆 Ежемесячно</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label" id="targetLabel">Цель (км)</label>
            <input type="number" class="form-input" name="target" placeholder="100" min="1" step="1" required>
          </div>
        </div>

        <button type="submit" class="btn-submit" id="submitBtn">
          <i class="fas fa-check"></i> Создать цель
        </button>
      </form>
    </div>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal-overlay" id="deleteModal">
  <div class="modal-container" style="max-width: 400px;">
    <div class="modal-header" style="background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)); border-color: rgba(239, 68, 68, 0.3);">
      <div class="modal-title" style="color: #ef4444;">
        <i class="fas fa-trash-alt"></i> Удалить цель?
      </div>
      <button class="modal-close" onclick="closeDeleteModal()">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p style="color: var(--text-muted); text-align: center; margin-bottom: 20px;">
        Вы уверены, что хотите удалить эту цель? Это действие нельзя отменить.
      </p>
      <div style="display: flex; gap: 12px;">
        <button class="btn-submit" style="background: rgba(100, 100, 100, 0.3); flex: 1;" onclick="closeDeleteModal()">
          Отмена
        </button>
        <button class="btn-submit" style="background: linear-gradient(135deg, #ef4444, #dc2626); flex: 1;" onclick="confirmDeleteGoal()">
          <i class="fas fa-trash"></i> Удалить
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  const playerId = {{ player_id }};
  let goalsData = [];
  let goalToDelete = null;

  // Load goals on page load
  document.addEventListener('DOMContentLoaded', loadGoals);

  async function loadGoals() {
    try {
      const response = await fetch(`/api/profiles/${playerId}/goals`, {
        headers: { 'Accept': 'application/json' }
      });
      goalsData = await response.json();
      renderGoals();
    } catch (error) {
      console.error('Error loading goals:', error);
      document.getElementById('goalsList').innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">❌</div>
          <h3>Ошибка загрузки</h3>
          <p>Не удалось загрузить цели. Попробуйте обновить страницу.</p>
        </div>
      `;
    }
  }

  function renderGoals() {
    const container = document.getElementById('goalsList');
    
    if (!goalsData || goalsData.length === 0) {
      container.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">🎯</div>
          <h3>Нет активных целей</h3>
          <p>Создайте свою первую цель, чтобы отслеживать прогресс!</p>
          <button class="btn-add-goal" onclick="openCreateGoalModal()">
            <i class="fas fa-plus"></i> Создать цель
          </button>
        </div>
      `;
      return;
    }

    container.innerHTML = goalsData.map(goal => renderGoalCard(goal)).join('');
  }

  function renderGoalCard(goal) {
    const isDistance = goal.type === 0;
    const isCycling = goal.sport === 'CYCLING';
    const isWeekly = goal.periodicity === 0;
    
    // Calculate progress
    const actual = isDistance ? (goal.actualDistanceInMeters || 0) / 1000 : (goal.actualDurationInMinutes || 0) / 60;
    const target = isDistance ? (goal.targetDistanceInMeters || 1) / 1000 : (goal.targetDurationInMinutes || 1) / 60;
    const percentage = Math.min(100, Math.round((actual / target) * 100));
    const isCompleted = percentage >= 100;
    
    // Progress bar color class
    let progressClass = 'p0-25';
    if (percentage >= 100) progressClass = 'p100';
    else if (percentage >= 75) progressClass = 'p75-100';
    else if (percentage >= 50) progressClass = 'p50-75';
    else if (percentage >= 25) progressClass = 'p25-50';
    
    // Time remaining
    const endDate = new Date(goal.periodEndDate);
    const now = new Date();
    const daysLeft = Math.max(0, Math.ceil((endDate - now) / (1000 * 60 * 60 * 24)));
    
    const unit = isDistance ? 'км' : 'ч';
    const icon = isCycling ? '🚴' : '🏃';
    const goalName = isDistance 
      ? (isWeekly ? 'Еженедельная дистанция' : 'Месячная дистанция')
      : (isWeekly ? 'Еженедельное время' : 'Месячное время');
    
    return `
      <div class="goal-card ${isCompleted ? 'completed' : ''}">
        <div class="goal-header">
          <div class="goal-info">
            <div class="goal-icon ${isCycling ? 'cycling' : 'running'}">${icon}</div>
            <div class="goal-details">
              <h3>${goalName}</h3>
              <span class="goal-type-badge ${isWeekly ? 'weekly' : 'monthly'}">
                <i class="fas fa-${isWeekly ? 'calendar-week' : 'calendar-alt'}"></i>
                ${isWeekly ? 'Еженедельно' : 'Ежемесячно'}
              </span>
            </div>
          </div>
          <div class="goal-actions">
            <button class="btn-goal-action delete" onclick="openDeleteModal(${goal.id})" title="Удалить">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
        
        <div class="goal-progress-container">
          <div class="goal-progress-bar">
            <div class="goal-progress-fill ${progressClass}" style="width: ${percentage}%"></div>
          </div>
          <div class="goal-stats">
            <div class="goal-values">
              <span class="goal-current">${actual.toFixed(1)}</span>
              <span class="goal-separator">/</span>
              <span class="goal-target">${target.toFixed(0)}</span>
              <span class="goal-unit">${unit}</span>
            </div>
            <span class="goal-percentage ${isCompleted ? 'completed' : ''}">${percentage}%</span>
          </div>
        </div>
        
        <div class="goal-footer">
          <span class="goal-time-left">
            <i class="fas fa-clock"></i>
            ${daysLeft > 0 ? `Осталось ${daysLeft} дн.` : 'Период завершён'}
          </span>
          <span>${isCompleted ? '✅ Цель достигнута!' : ''}</span>
        </div>
      </div>
    `;
  }

  function openCreateGoalModal() {
    document.getElementById('createGoalModal').classList.add('active');
    document.getElementById('createGoalForm').reset();
    updateTargetLabel(document.querySelector('select[name="type"]'));
  }

  function closeCreateGoalModal() {
    document.getElementById('createGoalModal').classList.remove('active');
  }

  function updateTargetLabel(select) {
    const label = document.getElementById('targetLabel');
    label.textContent = select.value === '0' ? 'Цель (км)' : 'Цель (часы)';
  }

  async function createGoal(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Создание...';
    
    const formData = new FormData(form);
    const isDistance = formData.get('type') === '0';
    const targetValue = parseFloat(formData.get('target'));
    
    const goalData = {
      profileId: playerId,
      sport: formData.get('sport'),
      name: isDistance 
        ? (formData.get('periodicity') === '0' ? 'Weekly distance goal' : 'Monthly distance goal')
        : (formData.get('periodicity') === '0' ? 'Weekly time goal' : 'Monthly time goal'),
      type: parseInt(formData.get('type')),
      periodicity: parseInt(formData.get('periodicity')),
      targetDistanceInMeters: isDistance ? targetValue * 1000 : targetValue * 60,
      targetDurationInMinutes: isDistance ? targetValue * 1000 : targetValue * 60,
      actualDistanceInMeters: 0,
      actualDurationInMinutes: 0,
      status: 0,
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
    };
    
    try {
      const response = await fetch(`/api/profiles/${playerId}/goals`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(goalData)
      });
      
      if (response.ok) {
        closeCreateGoalModal();
        await loadGoals();
      } else {
        throw new Error('Failed to create goal');
      }
    } catch (error) {
      console.error('Error creating goal:', error);
      alert('Ошибка при создании цели. Попробуйте снова.');
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-check"></i> Создать цель';
    }
  }

  function openDeleteModal(goalId) {
    goalToDelete = goalId;
    document.getElementById('deleteModal').classList.add('active');
  }

  function closeDeleteModal() {
    goalToDelete = null;
    document.getElementById('deleteModal').classList.remove('active');
  }

  async function confirmDeleteGoal() {
    if (!goalToDelete) return;
    
    try {
      const response = await fetch(`/api/profiles/${playerId}/goals/${goalToDelete}`, {
        method: 'DELETE'
      });
      
      if (response.ok) {
        closeDeleteModal();
        await loadGoals();
      } else {
        throw new Error('Failed to delete goal');
      }
    } catch (error) {
      console.error('Error deleting goal:', error);
      alert('Ошибка при удалении цели.');
    }
  }

  // Close modal on outside click
  document.querySelectorAll('.modal-overlay').forEach(overlay => {
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        overlay.classList.remove('active');
      }
    });
  });

  // Close modal on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      document.querySelectorAll('.modal-overlay.active').forEach(modal => {
        modal.classList.remove('active');
      });
    }
  });
</script>
{% endblock %}