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

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

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

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

    .activities-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;
    }

    /* Header */
    .activities-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;
    }

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

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

    .btn-refresh {
        padding: 12px 20px;
        border-radius: 12px;
        border: 2px solid var(--orange-primary);
        background: rgba(255, 140, 0, 0.15);
        color: var(--orange-primary);
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

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

    .btn-refresh.spinning i {
        animation: spin 1s linear infinite;
    }

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

    /* Activity Card */
    .activity-card {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .activity-card:hover {
        border-color: var(--border-accent);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    .activity-main {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 12px;
    }

    .activity-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);
        flex-shrink: 0;
    }

    .activity-details {
        flex: 1;
        min-width: 0;
    }

    .activity-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .activity-meta {
        display: flex;
        gap: 12px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .activity-meta i {
        color: var(--orange-primary);
        margin-right: 4px;
    }

    .btn-download {
        padding: 10px 16px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #FF8C00, #FF6B00);
        color: white;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
    }

    .btn-download:hover {
        transform: scale(1.05);
    }

    /* Sync Status */
    .sync-status {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 12px;
        border-top: 1px solid var(--border-primary);
    }

    .sync-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid transparent;
    }

    .sync-item:hover {
        transform: scale(1.05);
    }

    .sync-item.success {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
        border-color: rgba(16, 185, 129, 0.3);
    }

    .sync-item.failed {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.3);
    }

    .sync-item.none {
        background: rgba(150, 150, 150, 0.1);
        color: var(--text-muted);
        border-color: rgba(150, 150, 150, 0.3);
    }

    .sync-item.loading {
        background: rgba(79, 172, 254, 0.15);
        color: #4facfe;
    }

    .sync-item.loading i {
        animation: spin 1s linear infinite;
    }

    /* Stats */
    .stats-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-box {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 12px;
        padding: 16px;
        text-align: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--orange-primary);
    }

    .stat-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Empty/Loading */
    .empty-state,
    .loading-spinner {
        text-align: center;
        padding: 40px;
        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 {
        color: var(--text-primary);
        margin-bottom: 10px;
    }

    .empty-state p {
        color: var(--text-muted);
    }

    .loading-spinner i {
        font-size: 2rem;
        color: var(--orange-primary);
    }

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

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

        .activity-main {
            flex-wrap: wrap;
        }

        .btn-download {
            width: 100%;
            justify-content: center;
            margin-top: 10px;
        }

        .stats-summary {
            grid-template-columns: 1fr;
        }

        .sync-status {
            justify-content: center;
        }
    }
</style>

<div class="activities-wrapper">
    <div class="main-header">
        <a href="{{ url_for('user_home', username=username) }}" style="text-decoration: none;">
            <div class="header-title">📁 Мои тренировки</div>
        </a>
    </div>

    <div class="activities-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>

        <div class="stats-summary" id="statsSummary" style="display: none;">
            <div class="stat-box">
                <span class="stat-value" id="totalFiles">0</span>
                <div class="stat-label">Всего файлов</div>
            </div>
            <div class="stat-box">
                <span class="stat-value" id="totalSize">0 MB</span>
                <div class="stat-label">Общий размер</div>
            </div>
            <div class="stat-box">
                <span class="stat-value" id="lastActivity">—</span>
                <div class="stat-label">Последняя</div>
            </div>
        </div>

        <div class="activities-header">
            <div class="activities-title">
                <i class="fas fa-file-archive"></i>
                <span>FIT файлы</span>
            </div>
            <button class="btn-refresh" onclick="loadActivities()" id="refreshBtn">
                <i class="fas fa-sync-alt"></i> Обновить
            </button>
        </div>

        <div id="activitiesList">
            <div class="loading-spinner">
                <i class="fas fa-spinner fa-spin"></i>
                <p>Загрузка тренировок...</p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', loadActivities);

    async function loadActivities() {
        const list = document.getElementById('activitiesList');
        const stats = document.getElementById('statsSummary');
        const btn = document.getElementById('refreshBtn');

        btn.classList.add('spinning');
        list.innerHTML = '<div class="loading-spinner"><i class="fas fa-spinner fa-spin"></i><p>Загрузка...</p></div>';

        try {
            const res = await fetch('/api/fit-files');
            const data = await res.json();
            const files = data.files || [];

            if (!files.length) {
                list.innerHTML = `<div class="empty-state">
          <div class="empty-state-icon">🚴</div>
          <h3>Пока нет тренировок</h3>
          <p>После первой поездки здесь появятся FIT файлы</p>
        </div>`;
                stats.style.display = 'none';
                return;
            }

            const totalSize = files.reduce((s, f) => s + f.size, 0);
            document.getElementById('totalFiles').textContent = files.length;
            document.getElementById('totalSize').textContent = formatSize(totalSize);
            document.getElementById('lastActivity').textContent = files[0].date.split(' ')[0];
            stats.style.display = 'grid';

            list.innerHTML = files.map(f => renderActivity(f)).join('');
        } catch (e) {
            list.innerHTML = `<div class="empty-state"><div class="empty-state-icon">❌</div><h3>Ошибка</h3><p>Не удалось загрузить</p></div>`;
        } finally {
            btn.classList.remove('spinning');
        }
    }

    function renderActivity(file) {
        const sync = file.sync || {};
        return `
      <div class="activity-card" id="card-${file.filename}">
        <div class="activity-main">
          <div class="activity-icon">🚴</div>
          <div class="activity-details">
            <div class="activity-name" title="${file.filename}">${file.filename}</div>
            <div class="activity-meta">
              <span><i class="fas fa-calendar"></i>${file.date}</span>
              <span><i class="fas fa-file"></i>${formatSize(file.size)}</span>
            </div>
          </div>
          <button class="btn-download" onclick="downloadFile('${file.filename}')">
            <i class="fas fa-download"></i> Скачать
          </button>
        </div>
        <div class="sync-status">
          ${renderSyncItem(file.filename, 'telegram', '📱 Telegram', sync.telegram)}
          ${renderSyncItem(file.filename, 'garmin', '⌚ Garmin', sync.garmin)}
          ${renderSyncItem(file.filename, 'intervals', '📊 Intervals', sync.intervals)}
        </div>
      </div>`;
    }

    function renderSyncItem(filename, service, label, data) {
        const status = data?.status || 'none';
        const date = data?.synced_at || '';
        const icon = status === 'success' ? 'fa-check' : status === 'failed' ? 'fa-times' : 'fa-arrow-right';
        const title = data?.error ? `Ошибка: ${data.error}` : (date ? `Синхронизировано: ${date}` : 'Нажмите для отправки');

        return `<div class="sync-item ${status}" id="sync-${service}-${filename}" 
      onclick="resync('${filename}', '${service}')" title="${title}">
      <i class="fas ${icon}"></i> ${label}
    </div>`;
    }

    async function resync(filename, service) {
        const el = document.getElementById(`sync-${service}-${filename}`);
        if (!el || el.classList.contains('loading')) return;

        el.className = 'sync-item loading';
        el.innerHTML = `<i class="fas fa-spinner"></i> Отправка...`;

        try {
            const res = await fetch(`/api/resync/${encodeURIComponent(filename)}/${service}`, { method: 'POST' });
            const data = await res.json();

            const status = data.success ? 'success' : 'failed';
            const icon = data.success ? 'fa-check' : 'fa-times';
            const labels = { telegram: '📱 Telegram', garmin: '⌚ Garmin', intervals: '📊 Intervals' };

            el.className = `sync-item ${status}`;
            el.innerHTML = `<i class="fas ${icon}"></i> ${labels[service]}`;
            el.title = data.error || (data.success ? 'Успешно!' : 'Ошибка');
        } catch (e) {
            el.className = 'sync-item failed';
            el.innerHTML = `<i class="fas fa-times"></i> Ошибка`;
        }
    }

    function downloadFile(f) { window.location.href = '/download/fit/' + encodeURIComponent(f); }
    function formatSize(b) { return b < 1024 ? b + ' B' : b < 1048576 ? (b / 1024).toFixed(1) + ' KB' : (b / 1048576).toFixed(1) + ' MB'; }
</script>
{% endblock %}