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

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

    [data-theme="light"] .coach-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;
    }

    .coach-container {
        max-width: 900px;
        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);
    }

    /* Credits Info */
    .credits-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
        border: 2px solid rgba(139, 92, 246, 0.4);
        color: #a78bfa;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .credits-badge.unlimited {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
        border-color: rgba(16, 185, 129, 0.4);
        color: #10b981;
    }

    .credits-badge i {
        font-size: 1.1rem;
    }

    /* Period Selector */
    .period-selector {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        padding: 16px;
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .period-btn {
        padding: 14px 24px;
        border-radius: 12px;
        border: 2px solid rgba(139, 92, 246, 0.3);
        background: rgba(139, 92, 246, 0.1);
        color: #a78bfa;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .period-btn:hover {
        background: rgba(139, 92, 246, 0.2);
        border-color: rgba(139, 92, 246, 0.5);
        transform: translateY(-2px);
    }

    .period-btn.active {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
        border-color: #8b5cf6;
        box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
    }

    /* Activities List */
    .activities-section {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--yellow-glow);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .activities-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .activities-table th {
        text-align: left;
        padding: 10px 8px;
        color: var(--text-muted);
        font-weight: 600;
        border-bottom: 1px solid rgba(255, 140, 0, 0.2);
    }

    .activities-table td {
        padding: 10px 8px;
        color: var(--text-primary);
        border-bottom: 1px solid rgba(255, 140, 0, 0.1);
    }

    .activities-table tr {
        cursor: pointer;
        transition: background 0.2s;
    }

    .activities-table tr:hover {
        background: rgba(139, 92, 246, 0.1);
    }

    .activities-table tr.selected {
        background: rgba(139, 92, 246, 0.2);
        border-left: 3px solid #8b5cf6;
    }

    .activity-name {
        font-weight: 600;
        color: var(--text-accent);
    }

    .activity-stats {
        display: flex;
        gap: 16px;
        font-size: 0.8rem;
    }

    .activity-stat {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
    }

    .activity-stat i {
        color: var(--orange-primary);
        font-size: 0.75rem;
    }

    /* Analyze Button */
    .analyze-section {
        text-align: center;
        margin-bottom: 20px;
    }

    .btn-analyze {
        padding: 18px 40px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
        font-size: 1.1rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .btn-analyze:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
    }

    .btn-analyze:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .btn-analyze i {
        font-size: 1.3rem;
    }

    /* Inline analyze button for single activity */
    .btn-analyze-inline {
        padding: 8px 14px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .btn-analyze-inline:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

    .btn-analyze-inline i {
        margin-right: 4px;
    }

    /* Result Area */
    .result-section {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 14px;
        padding: 20px;
        margin-bottom: 20px;
        display: none;
    }

    .result-section.visible {
        display: block;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .result-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    }

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

    .cached-badge {
        padding: 4px 10px;
        border-radius: 12px;
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .result-content {
        color: var(--text-primary);
        line-height: 1.7;
    }

    .result-content h1,
    .result-content h2,
    .result-content h3 {
        color: var(--yellow-glow);
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }

    .result-content h1 {
        font-size: 1.5rem;
    }

    .result-content h2 {
        font-size: 1.3rem;
    }

    .result-content h3 {
        font-size: 1.1rem;
        color: #a78bfa;
    }

    .result-content ul,
    .result-content ol {
        padding-left: 20px;
        margin: 12px 0;
    }

    .result-content li {
        margin-bottom: 8px;
    }

    .result-content strong {
        color: var(--orange-primary);
    }

    .result-content code {
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.9em;
    }

    /* Loading State */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        flex-direction: column;
        gap: 20px;
    }

    .loading-overlay.visible {
        display: flex;
    }

    .loading-spinner-large {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(139, 92, 246, 0.3);
        border-top: 4px solid #8b5cf6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

    .loading-text {
        color: #a78bfa;
        font-size: 1.1rem;
        font-weight: 600;
    }

    /* History Section */
    .history-section {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 20px;
    }

    .history-item {
        padding: 12px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid transparent;
    }

    .history-item:hover {
        background: rgba(139, 92, 246, 0.1);
        border-color: rgba(139, 92, 246, 0.3);
    }

    .history-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .history-period {
        font-weight: 700;
        color: #a78bfa;
        font-size: 0.9rem;
    }

    .history-date {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .history-preview {
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
    }

    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 12px;
    }

    .empty-state p {
        margin: 0;
        font-size: 0.9rem;
    }

    /* Error State */
    .error-message {
        padding: 16px;
        border-radius: 12px;
        background: rgba(239, 68, 68, 0.1);
        border: 2px solid rgba(239, 68, 68, 0.3);
        color: #f87171;
        text-align: center;
        margin-bottom: 20px;
        display: none;
    }

    .error-message.visible {
        display: block;
    }

    /* Donor tag */
    .donor-tag {
        margin-left: 6px;
        font-size: 0.9rem;
    }

    /* Limit Modal */
    .limit-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: 2000;
    }

    .limit-modal-overlay.visible {
        display: flex;
    }

    .limit-modal {
        background: var(--bg-card);
        border: 2px solid rgba(239, 68, 68, 0.5);
        border-radius: 20px;
        padding: 30px;
        max-width: 450px;
        text-align: center;
        animation: modalAppear 0.3s ease;
    }

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

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

    .limit-modal-icon {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .limit-modal-title {
        font-size: 1.4rem;
        font-weight: 800;
        color: #f87171;
        margin-bottom: 12px;
    }

    .limit-modal-text {
        color: var(--text-primary);
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .limit-modal-text strong {
        color: var(--orange-primary);
    }

    .limit-modal-cta {
        padding: 14px 28px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        margin: 8px;
        transition: all 0.3s;
    }

    .limit-modal-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    }

    .limit-modal-close {
        padding: 12px 24px;
        border-radius: 10px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: transparent;
        color: var(--text-muted);
        font-size: 0.9rem;
        cursor: pointer;
        margin: 8px;
    }

    .limit-modal-close:hover {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--text-primary);
    }

    /* Responsive */
    @media (max-width: 600px) {
        .period-selector {
            flex-direction: column;
        }

        .period-btn {
            justify-content: center;
        }

        .activities-table {
            font-size: 0.8rem;
        }

        .activity-stats {
            flex-direction: column;
            gap: 4px;
        }

        .limit-modal {
            margin: 20px;
            padding: 24px;
        }
    }
</style>

<div class="coach-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">🤖 AI Тренер</div>
        </a>
    </div>

    <div class="coach-container">
        <div
            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;">
            <a href="{{ url_for('user_home', username=username) }}" class="btn-back">
                <i class="fas fa-arrow-left"></i> Назад
            </a>

            <span class="credits-badge {% if is_donor %}unlimited{% endif %}" id="creditsBadge">
                <i class="fas fa-coins"></i>
                <span id="creditsCount">{{ credits_info.get('credits', 0) }}</span>/<span id="creditsMax">{{
                    credits_info.get('max_credits', 3) }}</span>
                кредитов/нед.
                {% if is_donor %}<span class="donor-tag">⭐</span>{% endif %}
            </span>
        </div>

        <!-- Error Message -->
        <div class="error-message" id="errorMessage"></div>

        <!-- Period Selector -->
        <div class="period-selector">
            <button class="period-btn" data-period="single" onclick="selectPeriod('single')">
                <i class="fas fa-bicycle"></i> Одна тренировка
            </button>
            <button class="period-btn active" data-period="week" onclick="selectPeriod('week')">
                <i class="fas fa-calendar-week"></i> Неделя
            </button>
            <button class="period-btn" data-period="month" onclick="selectPeriod('month')">
                <i class="fas fa-calendar-alt"></i> Месяц
            </button>
        </div>

        <!-- Activities Section (for single selection) -->
        <div class="activities-section" id="activitiesSection" style="display: none;">
            <div class="section-title">
                <i class="fas fa-list"></i> Выберите тренировку для анализа
            </div>
            <div id="activitiesList">
                <div class="empty-state">
                    <div class="empty-state-icon">⏳</div>
                    <p>Загрузка...</p>
                </div>
            </div>
        </div>

        <!-- Analyze Button -->
        <div class="analyze-section">
            <button class="btn-analyze" id="analyzeBtn" onclick="runAnalysis()">
                <i class="fas fa-magic"></i> Анализировать
            </button>
        </div>

        <!-- Result Section -->
        <div class="result-section" id="resultSection">
            <div class="result-header">
                <div class="result-title">
                    <i class="fas fa-robot"></i> Анализ тренировок
                </div>
                <span class="cached-badge" id="cachedBadge" style="display: none;">
                    <i class="fas fa-database"></i> Из кэша
                </span>
                <span class="cached-badge" id="historyBadge"
                    style="display: none; background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.4); color: #fbbf24;">
                    <i class="fas fa-history"></i> Из истории
                </span>
            </div>
            <div class="result-content" id="resultContent"></div>
        </div>

        <!-- History Section -->
        <div class="history-section">
            <div class="section-title">
                <i class="fas fa-history"></i> История анализов
            </div>
            <div id="historyList">
                <div class="empty-state">
                    <div class="empty-state-icon">📋</div>
                    <p>История пуста</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner-large"></div>
    <div class="loading-text" id="loadingText">AI анализирует ваши тренировки...</div>
    <div class="loading-fact" id="loadingFact"
        style="color: #a78bfa; font-size: 0.9rem; max-width: 400px; text-align: center; margin-top: 10px; opacity: 0.8;">
    </div>
</div>

<!-- Limit Modal -->
<div class="limit-modal-overlay" id="limitModal">
    <div class="limit-modal">
        <div class="limit-modal-icon" id="limitModalIcon">⏰</div>
        <div class="limit-modal-title" id="limitModalTitle">Лимит достигнут</div>
        <div class="limit-modal-text" id="limitModalText">
            Вы исчерпали лимит запросов.
        </div>
        <div id="limitModalButtons">
            <button class="limit-modal-close" onclick="closeLimitModal()">Понятно</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    const isDonor = {{ 'true' if is_donor else 'false' }};
    let selectedPeriod = 'week';
    let selectedActivityId = null;
    let activities = [];
    let factsInterval = null;
    let historyData = [];  // Store full history for display

    // Правдивые факты о велоспорте и тренировках
    const cyclingFacts = [
        // FTP и мощность
        "💡 FTP (Functional Threshold Power) — это максимальная мощность, которую велосипедист может поддерживать в течение часа.",
        "🚴 Средний профессиональный велосипедист имеет FTP около 5-6 Вт/кг, в то время как любители обычно имеют 2-4 Вт/кг.",
        "📊 TSS (Training Stress Score) — это способ измерить нагрузку тренировки относительно вашего FTP.",
        "⚡ Normalized Power (NP) учитывает вариабельность мощности и показывает физиологическую «стоимость» тренировки.",
        "📈 Intensity Factor (IF) — отношение NP к FTP. IF > 1.0 означает, что вы ехали выше своего порога.",
        "🎯 CTL (Chronic Training Load) — ваша «форма», усреднённая нагрузка за последние 42 дня.",
        "📉 ATL (Acute Training Load) — усталость, усреднённая нагрузка за 7 дней.",
        "⚖️ TSB (Training Stress Balance) = CTL - ATL. Положительный TSB означает свежесть, отрицательный — усталость.",

        // Пульс и VO2max
        "❤️ Максимальный пульс снижается примерно на 1 удар в минуту каждый год после 20 лет.",
        "📈 Регулярные интервальные тренировки могут увеличить VO2max на 10-20% за несколько месяцев.",
        "💓 Вариабельность сердечного ритма (HRV) — индикатор восстановления. Низкая HRV утром может означать недовосстановление.",
        "🫀 Сердце элитного велосипедиста может перекачивать до 35hrs литров крови в минуту (у обычного человека — 20 литров).",
        "📊 VO2max у профессиональных велосипедистов достигает 80-90 мл/кг/мин, у нетренированных людей — 35-40.",

        // Энергия и калории
        "🔥 При интенсивной езде на велосипеде можно сжечь до 1000 калорий в час.",
        "💪 Мышечный гликоген истощается примерно после 90-120 минут интенсивной езды.",
        "🏆 Тур де Франс — гонка протяжённостью около 3500 км, где гонщики сжигают около 6000-8000 калорий в день.",
        "🍌 На каждый час интенсивной езды рекомендуется потреблять 60-90 граммов углеводов.",
        "⚡ Углеводная загрузка перед гонкой может увеличить запасы гликогена на 25-100%.",
        "🧊 Кофеин улучшает выносливость на 2-4% и снижает ощущение усталости.",

        // Физиология и техника
        "🧠 Каденс 90-100 оборотов в минуту считается оптимальным для большинства велосипедистов.",
        "⚡ Аэродинамическое сопротивление составляет до 90% всего сопротивления при скорости выше 30 км/ч.",
        "🧪 Лактатный порог — это интенсивность, при которой молочная кислота начинает накапливаться быстрее, чем выводится.",
        "🎯 Зона 2 (60-70% от FTP) — это зона, где организм наиболее эффективно сжигает жиры.",
        "🏔️ На высоте 2000 метров доступность кислорода снижается примерно на 20%.",
        "🌡️ При тренировках в жару производительность может падать на 10-15% из-за перегрева.",
        "💨 Езда в группе экономит до 30-40% энергии благодаря аэродинамическому эффекту.",
        "⚙️ Снижение веса велосипеда на 1 кг даёт выигрыш около 30 секунд на 10 км подъёма.",

        // Восстановление и сон
        "💤 Качественный сон критически важен для восстановления — именно во сне вырабатывается гормон роста.",
        "🔄 Суперкомпенсация происходит через 24-72 часа после тренировки в зависимости от её интенсивности.",
        "🥤 Потеря 2% веса тела из-за обезвоживания может снизить производительность на 10-20%.",
        "🍫 Оптимальное окно для восстановления — первые 30-60 минут после тренировки.",
        "💊 Белок после тренировки (20-40г) ускоряет восстановление мышц.",
        "🧊 Холодовая терапия (ледяные ванны) может уменьшать воспаление, но также замедляет адаптацию.",
        "🧘 Активное восстановление (лёгкое педалирование) ускоряет выведение лактата лучше, чем полный отдых.",

        // Тренировочные методы
        "⚡ HIIT (высокоинтенсивные интервалы) эффективнее для роста VO2max, чем длительные тренировки.",
        "📅 Правило 80/20: 80% тренировочного времени в низких зонах, 20% — в высоких.",
        "🔥 Тренировки натощак улучшают жировой метаболизм, но могут снижать качество интенсивных сессий.",
        "📊 Polarized training (полярная модель) — тренировки только в зонах 1-2 и 4-5, избегая «серую зону».",
        "🎯 Sweet Spot (88-94% FTP) — золотая середина между интенсивностью и временем в зоне.",
        "⏱️ Интервалы 4x8 минут в зоне 4 — классическая тренировка для развития FTP.",
        "🚴 Спринты по 30 секунд с 4+ минутами отдыха развивают анаэробную мощность.",

        // Интересные факты
        "🌍 Велосипед — самый эффективный способ передвижения: на 1 калорию можно проехать 5+ км.",
        "🏅 Мировой рекорд часовой езды — 56.792 км (Виктор Кампенаертс, 2019).",
        "⛰️ Col du Tourmalet был впервые включён в Тур де Франс в 1910 году.",
        "🚴‍♂️ Средняя скорость победителя Тур де Франс выросла с 25 км/ч в 1903 до 42 км/ч в 2020-х.",
        "💪 Ноги профессионального велосипедиста могут производить более 2000 Вт на спринте.",
        "🎖️ Эдди Меркс — рекордсмен по победам на Гранд-турах: 11 побед (5 Тур, 5 Джиро, 1 Вуэльта).",
        "🫁 Легкие тренированного велосипедиста могут обрабатывать до 200 литров воздуха в минуту.",

        // Здоровье и предотвращение травм
        "🦵 Правильная настройка седла снижает риск травм колена на 60%.",
        "🦴 Велоспорт — низкоударная активность, щадящая суставы в отличие от бега.",
        "💆 Растяжка после тренировки улучшает гибкость и ускоряет восстановление.",
        "🧠 Регулярные тренировки на выносливость улучшают когнитивные функции и память.",
        "❤️ Велосипедисты имеют на 50% ниже риск сердечно-сосудистых заболеваний.",
        "🩺 3+ часа езды в неделю снижают риск диабета 2 типа на 20%."
    ];

    function showRandomFact() {
        const factEl = document.getElementById('loadingFact');
        if (factEl) {
            const randomFact = cyclingFacts[Math.floor(Math.random() * cyclingFacts.length)];
            factEl.style.opacity = '0';
            setTimeout(() => {
                factEl.textContent = randomFact;
                factEl.style.opacity = '0.9';
            }, 300);
        }
    }

    function startFactsRotation() {
        showRandomFact();
        factsInterval = setInterval(showRandomFact, 4000);
    }

    function stopFactsRotation() {
        if (factsInterval) {
            clearInterval(factsInterval);
            factsInterval = null;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadHistory();
        // Don't load activities initially - only when 'single' is selected
    });

    function selectPeriod(period) {
        selectedPeriod = period;
        selectedActivityId = null;

        // Update UI
        document.querySelectorAll('.period-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.period === period);
        });

        const activitiesSection = document.getElementById('activitiesSection');
        const mainAnalyzeBtn = document.querySelector('.analyze-section');
        if (period === 'single') {
            activitiesSection.style.display = 'block';
            mainAnalyzeBtn.style.display = 'none';
            loadActivities();
        } else {
            activitiesSection.style.display = 'none';
            mainAnalyzeBtn.style.display = 'block';
        }

        hideError();
    }

    async function loadActivities() {
        const container = document.getElementById('activitiesList');
        container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">⏳</div><p>Загрузка...</p></div>';

        try {
            const response = await fetch(`/api/ai/activities?period=month`);
            if (!response.ok) throw new Error('Failed to load activities');

            activities = await response.json();

            if (activities.length === 0) {
                container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🚴</div><p>Нет тренировок за последний месяц</p></div>';
                return;
            }

            container.innerHTML = `
        <table class="activities-table">
          <thead>
            <tr>
              <th>Дата</th>
              <th>Название</th>
              <th>Данные</th>
              <th style="width: 90px; text-align: center;">Действие</th>
            </tr>
          </thead>
          <tbody>
            ${activities.map(a => `
              <tr id="activity-${a.id}">
                <td>${formatDate(a.date)}</td>
                <td class="activity-name">${a.name || 'Тренировка'}</td>
                <td>
                  <div class="activity-stats">
                    <span class="activity-stat"><i class="fas fa-road"></i> ${a.distance_km} км</span>
                    <span class="activity-stat"><i class="fas fa-bolt"></i> ${a.avg_watts} Вт</span>
                    <span class="activity-stat"><i class="fas fa-clock"></i> ${a.duration_min} мин</span>
                  </div>
                </td>
                <td style="text-align: center;">
                  <button class="btn-analyze-inline" onclick="analyzeActivity(${a.id})">
                    <i class="fas fa-magic"></i> Анализ
                  </button>
                </td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
        } catch (error) {
            console.error('Error loading activities:', error);
            container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">❌</div><p>Ошибка загрузки</p></div>';
        }
    }

    function selectActivity(id) {
        selectedActivityId = id;

        // Update UI
        document.querySelectorAll('.activities-table tr').forEach(row => {
            row.classList.remove('selected');
        });
        const selectedRow = document.getElementById(`activity-${id}`);
        if (selectedRow) selectedRow.classList.add('selected');

        hideError();
    }

    function analyzeActivity(id) {
        selectedActivityId = id;
        selectedPeriod = 'single';
        runAnalysis();
    }

    async function runAnalysis() {
        // Validation
        if (selectedPeriod === 'single' && !selectedActivityId) {
            showError('Выберите тренировку для анализа');
            return;
        }

        const btn = document.getElementById('analyzeBtn');
        const loading = document.getElementById('loadingOverlay');

        btn.disabled = true;
        loading.classList.add('visible');
        startFactsRotation();
        hideError();

        try {
            const payload = { period: selectedPeriod };
            if (selectedActivityId) {
                payload.activity_id = selectedActivityId;
            }

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

            const data = await response.json();

            // Handle rate limit error
            if (response.status === 429) {
                btn.disabled = false;
                stopFactsRotation();
                loading.classList.remove('visible');
                showLimitModal('rate_limit', data.retry_after || 60);
                return;
            }

            // Handle credit limit error
            if (!response.ok && data.error === 'No credits remaining this week') {
                btn.disabled = false;
                stopFactsRotation();
                loading.classList.remove('visible');
                showLimitModal('credits_exhausted');
                return;
            }

            if (!response.ok || !data.success) {
                throw new Error(data.error || 'Analysis failed');
            }

            // Show result
            const resultSection = document.getElementById('resultSection');
            const resultContent = document.getElementById('resultContent');
            const cachedBadge = document.getElementById('cachedBadge');
            const historyBadge = document.getElementById('historyBadge');

            // Parse markdown
            resultContent.innerHTML = marked.parse(data.analysis);
            cachedBadge.style.display = data.cached ? 'inline-flex' : 'none';
            historyBadge.style.display = 'none';
            resultSection.classList.add('visible');

            // Update credits display
            if (data.credits !== undefined) {
                document.getElementById('creditsCount').textContent = data.credits;
            }
            if (data.max_credits !== undefined) {
                document.getElementById('creditsMax').textContent = data.max_credits;
            }

            // Reload history
            loadHistory();

            // Scroll to result
            resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });

        } catch (error) {
            console.error('Analysis error:', error);
            showError(error.message || 'Ошибка анализа');
        } finally {
            btn.disabled = false;
            stopFactsRotation();
            loading.classList.remove('visible');
        }
    }

    async function loadHistory() {
        const container = document.getElementById('historyList');

        try {
            const response = await fetch('/api/ai/history?limit=5');
            if (!response.ok) throw new Error('Failed to load history');

            historyData = await response.json();

            if (historyData.length === 0) {
                container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><p>История пуста</p></div>';
                return;
            }

            container.innerHTML = historyData.map((item, index) => `
        <div class="history-item" onclick="showHistoryItem(${index})">
          <div class="history-item-header">
            <span class="history-period">${getPeriodLabel(item.period)}</span>
            <span class="history-date">${formatDate(item.created_at)}</span>
          </div>
          <div class="history-preview">${item.preview}</div>
        </div>
      `).join('');
        } catch (error) {
            console.error('Error loading history:', error);
        }
    }

    function showHistoryItem(index) {
        const item = historyData[index];
        if (!item || !item.response) return;

        const resultSection = document.getElementById('resultSection');
        const resultContent = document.getElementById('resultContent');
        const cachedBadge = document.getElementById('cachedBadge');
        const historyBadge = document.getElementById('historyBadge');

        // Parse markdown and display
        resultContent.innerHTML = marked.parse(item.response);
        cachedBadge.style.display = 'none';
        historyBadge.style.display = 'inline-flex';
        resultSection.classList.add('visible');

        // Scroll to result
        resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function getPeriodLabel(period) {
        const labels = {
            'single': '🚴 Одна тренировка',
            'week': '📅 Неделя',
            'month': '📆 Месяц'
        };
        return labels[period] || period;
    }

    function formatDate(dateStr) {
        if (!dateStr) return '-';
        const date = new Date(dateStr);
        return date.toLocaleDateString('ru-RU', {
            day: 'numeric',
            month: 'short',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    function showError(message) {
        const el = document.getElementById('errorMessage');
        el.textContent = message;
        el.classList.add('visible');
    }

    function hideError() {
        document.getElementById('errorMessage').classList.remove('visible');
    }

    function showLimitModal(type, retryAfter = 60) {
        const modal = document.getElementById('limitModal');
        const icon = document.getElementById('limitModalIcon');
        const title = document.getElementById('limitModalTitle');
        const text = document.getElementById('limitModalText');
        const buttons = document.getElementById('limitModalButtons');

        if (type === 'rate_limit') {
            icon.textContent = '⏰';
            title.textContent = 'Слишком много запросов';
            text.innerHTML = `
                <p>Вы отправляете запросы слишком часто.</p>
                <p>Пожалуйста, подождите <strong>${retryAfter} секунд</strong> перед следующей попыткой.</p>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 12px;">
                    Лимит: 3 запроса в минуту для защиты сервера.
                </p>
            `;
            buttons.innerHTML = '<button class="limit-modal-close" onclick="closeLimitModal()">Понятно</button>';
        } else if (type === 'credits_exhausted') {
            icon.textContent = '💳';
            title.textContent = 'Кредиты закончились';

            if (isDonor) {
                text.innerHTML = `
                    <p>Вы использовали все кредиты на этой неделе.</p>
                    <p>Кредиты автоматически восстановятся <strong>в понедельник</strong>.</p>
                    <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 12px;">
                        Как донор, у вас увеличенный лимит кредитов каждую неделю. Спасибо за поддержку! ⭐
                    </p>
                `;
                buttons.innerHTML = '<button class="limit-modal-close" onclick="closeLimitModal()">Понятно</button>';
            } else {
                text.innerHTML = `
                    <p>Вы использовали все <strong>3 бесплатных кредита</strong> на этой неделе.</p>
                    <p>Кредиты восстановятся в понедельник.</p>
                    <p style="margin-top: 16px; padding: 12px; background: rgba(16, 185, 129, 0.1); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.3);">
                        💡 <strong>Станьте донором</strong> и получите <strong>30 кредитов в неделю</strong> + другие бонусы!
                    </p>
                `;
                buttons.innerHTML = `
                    <a href="/donate" class="limit-modal-cta" style="text-decoration: none; display: inline-block;">
                        ⭐ Стать донором
                    </a>
                    <button class="limit-modal-close" onclick="closeLimitModal()">В другой раз</button>
                `;
            }
        }

        modal.classList.add('visible');
    }

    function closeLimitModal() {
        document.getElementById('limitModal').classList.remove('visible');
    }

    // Close modal on overlay click
    document.getElementById('limitModal').addEventListener('click', function (e) {
        if (e.target === this) {
            closeLimitModal();
        }
    });
</script>
{% endblock %}