<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Достижения - CS2 Simulator</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .achievements-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .achievements-stats {
            display: flex;
            gap: 1.5rem;
        }
        .achievements-stats .stat {
            text-align: center;
        }
        .achievements-stats .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }
        .achievements-stats .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1rem;
        }
        .achievement-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .achievement-card.unlocked {
            border-color: var(--success-color);
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), transparent);
        }
        .achievement-card.unlocked::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(34, 197, 94, 0.08), transparent 70%);
            pointer-events: none;
        }
        .achievement-card.locked {
            opacity: 0.7;
        }
        .achievement-icon {
            font-size: 2rem;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-dark);
            border-radius: 10px;
            flex-shrink: 0;
        }
        .achievement-card.unlocked .achievement-icon {
            background: rgba(34, 197, 94, 0.15);
        }
        .achievement-info {
            flex: 1;
            min-width: 0;
        }
        .achievement-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        .achievement-desc {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }
        .achievement-reward {
            font-size: 0.8rem;
            color: var(--success-color);
        }
        .achievement-progress {
            margin-top: 0.5rem;
        }
        .progress-bar {
            height: 6px;
            background: var(--bg-dark);
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: var(--primary-color);
            border-radius: 3px;
            transition: width 0.5s ease;
        }
        .progress-fill.complete {
            background: var(--success-color);
        }
        .progress-text {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }
        .category-filter {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }
        .category-btn {
            padding: 0.4rem 1rem;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-color);
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .category-btn:hover {
            border-color: var(--primary-color);
        }
        .category-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        .new-achievement-popup {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #1a3a1a, #0d260d);
            border: 1px solid var(--success-color);
            border-radius: 12px;
            padding: 1rem 1.5rem;
            z-index: 9999;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            animation: slideInRight 0.5s ease;
            max-width: 350px;
        }
        .new-achievement-popup.hiding {
            animation: slideOutRight 0.5s ease forwards;
        }
        @keyframes slideInRight {
            from { transform: translateX(120%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(120%); opacity: 0; }
        }
        .new-achievement-popup .popup-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }
        .new-achievement-popup .popup-achievement {
            font-size: 1.1rem;
            font-weight: 600;
        }
        .new-achievement-popup .popup-reward {
            color: var(--success-color);
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body>
    {% include "_nav.html" %}

    <main class="container" style="padding: 2rem 1rem;">
        <div class="achievements-header">
            <div>
                <h1>🏆 Достижения</h1>
                <p class="page-subtitle">Выполняй задания и получай награды</p>
            </div>
            <div class="achievements-stats">
                <div class="stat">
                    <div class="stat-value">{{ unlocked }}</div>
                    <div class="stat-label">Открыто</div>
                </div>
                <div class="stat">
                    <div class="stat-value">{{ total }}</div>
                    <div class="stat-label">Всего</div>
                </div>
                <div class="stat">
                    <div class="stat-value">{{ "%.0f"|format(unlocked/total*100 if total > 0 else 0) }}%</div>
                    <div class="stat-label">Прогресс</div>
                </div>
            </div>
        </div>

        <div class="category-filter" id="categoryFilter">
            <button class="category-btn active" data-cat="all">Все</button>
            <button class="category-btn" data-cat="cases">📦 Кейсы</button>
            <button class="category-btn" data-cat="contracts">🔄 Контракты</button>
            <button class="category-btn" data-cat="upgrade">🆙 Апгрейд</button>
            <button class="category-btn" data-cat="crash">💥 Crash</button>
            <button class="category-btn" data-cat="general">🎯 Общие</button>
        </div>

        <div class="achievements-grid" id="achievementsGrid">
            {% for ach in achievements %}
            <div class="achievement-card {{ 'unlocked' if ach.unlocked else 'locked' }}" 
                 data-category="{{ ach.category }}">
                <div class="achievement-icon">{{ ach.icon }}</div>
                <div class="achievement-info">
                    <div class="achievement-title">{{ ach.title }}</div>
                    <div class="achievement-desc">{{ ach.description }}</div>
                    {% if ach.reward_amount > 0 %}
                    <div class="achievement-reward">+{{ ach.reward_amount|money }} ₽</div>
                    {% endif %}
                    <div class="achievement-progress">
                        <div class="progress-bar">
                            <div class="progress-fill {{ 'complete' if ach.unlocked else '' }}" 
                                 style="width: {{ (ach.progress / ach.requirement_value * 100)|round }}%"></div>
                        </div>
                        <div class="progress-text">
                            {% if ach.unlocked %}
                            ✅ Получено
                            {% else %}
                            {{ ach.progress }} / {{ ach.requirement_value }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </main>

    <div id="achievementPopup" class="new-achievement-popup" style="display:none;">
        <div class="popup-title">🏆 Новое достижение!</div>
        <div class="popup-achievement" id="popupTitle"></div>
        <div class="popup-reward" id="popupReward"></div>
    </div>

    <script src="/static/js/sounds.js"></script>
    <script src="/static/js/websocket.js"></script>
    <script src="/static/js/notifications.js"></script>
    <script src="/static/js/safemode.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Категории
            document.querySelectorAll('.category-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    const cat = btn.dataset.cat;
                    document.querySelectorAll('.achievement-card').forEach(card => {
                        card.style.display = (cat === 'all' || card.dataset.category === cat) ? 'flex' : 'none';
                    });
                });
            });
        });

        function showAchievementPopup(title, reward) {
            const popup = document.getElementById('achievementPopup');
            document.getElementById('popupTitle').textContent = title;
            document.getElementById('popupReward').textContent = reward ? `+${reward} ₽` : '';
            popup.style.display = 'block';
            SoundManager.achievement();
            setTimeout(() => {
                popup.classList.add('hiding');
                setTimeout(() => {
                    popup.style.display = 'none';
                    popup.classList.remove('hiding');
                }, 500);
            }, 4000);
        }

        async function logout() {
            await fetch('/web/api/auth/logout', { method: 'POST' });
            window.location.href = '/';
        }
    </script>
    <script>
        function toggleSound() {
            const enabled = SoundManager.toggle();
            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
        }
        document.addEventListener('DOMContentLoaded', () => {
            const btn = document.getElementById('soundToggle');
            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
        });
    </script>
{% include '_activity_sidebar.html' %}
</body>
</html>
