<!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>
        .activity-feed {
            max-width: 700px;
            margin: 0 auto;
        }
        .activity-item {
            display: flex;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin-bottom: 0.5rem;
            align-items: flex-start;
            transition: all 0.3s;
            animation: fadeInUp 0.3s ease;
        }
        .activity-item:hover {
            border-color: var(--primary-color);
        }
        .activity-icon {
            font-size: 1.2rem;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-dark);
            border-radius: 8px;
            flex-shrink: 0;
        }
        .activity-content {
            flex: 1;
            min-width: 0;
        }
        .activity-message {
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .activity-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }
        .activity-username {
            color: var(--primary-color);
            font-weight: 500;
        }
        .activity-empty {
            text-align: center;
            padding: 3rem;
            color: var(--text-secondary);
        }
        .activity-empty .big-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .activity-type-icon {
            display: inline-block;
            margin-right: 0.3rem;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .live-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--success-color);
        }
        .live-dot {
            width: 8px;
            height: 8px;
            background: var(--success-color);
            border-radius: 50%;
            animation: pulse 1.5s ease infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
    </style>
</head>
<body>
    {% include "_nav.html" %}

    <main class="container" style="padding: 2rem 1rem;">
        <div class="activity-header">
            <div>
                <h1>📰 Лента активностей</h1>
                <p class="page-subtitle">Что происходит на сервере</p>
            </div>
            <div class="live-indicator" id="liveIndicator">
                <span class="live-dot"></span>
                <span>Live</span>
            </div>
        </div>

        <div class="activity-feed" id="activityFeed">
            {% if activities %}
            {% for a in activities %}
            <div class="activity-item" data-activity-id="{{ a.id }}">
                <div class="activity-icon">
                    {% if a.activity_type == 'case_open' %}📦
                    {% elif a.activity_type == 'contract' %}🔄
                    {% elif a.activity_type == 'upgrade' %}🆙
                    {% elif a.activity_type == 'achievement' %}🏆
                    {% elif a.activity_type == 'crash' %}💥
                    {% else %}📌{% endif %}
                </div>
                <div class="activity-content">
                    <div class="activity-message">{{ a.message }}</div>
                    <div class="activity-meta">
                        <a href="/profiles/{{ a.user_id }}" class="activity-username" style="text-decoration:none;">{{ a.username }}</a>
                        <span>• {{ a.created_at }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="activity-empty">
                <div class="big-icon">📭</div>
                <h3>Пока нет активностей</h3>
                <p>Открой кейс или выполни контракт — это появится здесь в реальном времени!</p>
            </div>
            {% endif %}
        </div>
    </main>

    <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', () => {
            WS.on('activity', (data) => {
                const act = data.activity;
                if (!act) return;
                
                const feed = document.getElementById('activityFeed');
                
                const empty = feed.querySelector('.activity-empty');
                if (empty) empty.remove();
                
                const iconMap = {
                    'case_open': '📦',
                    'contract': '🔄',
                    'upgrade': '🆙',
                    'achievement': '🏆',
                    'crash': '💥'
                };
                
                const item = document.createElement('div');
                item.className = 'activity-item';
                item.style.animation = 'none';
                item.offsetHeight;
                item.style.animation = 'fadeInUp 0.3s ease';
                item.innerHTML = `
                    <div class="activity-icon">${iconMap[act.activity_type] || '📌'}</div>
                    <div class="activity-content">
                        <div class="activity-message">${act.message}</div>
                        <div class="activity-meta">
                            <a href="/profiles/${act.user_id || 0}" class="activity-username" style="text-decoration:none;">${escapeHtml(act.username)}</a>
                            <span>• только что</span>
                        </div>
                    </div>
                `;
                
                feed.insertBefore(item, feed.firstChild);
                
                while (feed.children.length > 100) {
                    feed.removeChild(feed.lastChild);
                }

                if (act.activity_type === 'achievement') {
                    SoundManager.achievement();
                } else if (act.activity_type === 'crash') {
                    SoundManager.crashCashout();
                }
            });
        });

        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>
</body>
</html>
