<style>
.activity-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 60px;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.activity-sidebar.closed {
    transform: translateX(-100%);
}
.activity-sidebar-header {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.activity-sidebar-header h3 {
    font-size: 0.8rem;
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.live-dot {
    width: 5px; height: 5px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s ease infinite;
}
@keyframes pulse {
    0%,100%{opacity:1}50%{opacity:0.3}
}
.activity-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
}
.activity-sidebar-list::-webkit-scrollbar { width: 3px; }
.activity-sidebar-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
.activity-sidebar-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.15rem;
    transition: background 0.15s;
    animation: fadeInItem 0.3s ease;
}
.activity-sidebar-item:hover { background: var(--bg-dark); }
.activity-sidebar-item .asi-icon {
    font-size: 0.85rem;
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border-radius: 5px;
    flex-shrink: 0;
}
.activity-sidebar-item .asi-content {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.25;
}
.activity-sidebar-item .asi-content .asi-username {
    color: var(--primary-color);
    font-weight: 500;
}
.activity-sidebar-item .asi-content .asi-time {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}
.activity-sidebar-item .asi-item-preview {
    width: 28px; height: 21px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}
.activity-sidebar-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.activity-sidebar-close:hover { opacity: 1; }

/* Кнопка открытия ленты (слева, по центру) */
.activity-toggle-btn {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    padding: 0.6rem 0.3rem;
    cursor: pointer;
    z-index: 49;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.2s;
    writing-mode: vertical-rl;
    letter-spacing: 0.05em;
    display: none;
    user-select: none;
}
.activity-toggle-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.activity-toggle-btn.visible {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

@keyframes fadeInItem {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.has-activity-sidebar {
    padding-left: 260px;
    transition: padding-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.has-activity-sidebar.sidebar-closed {
    padding-left: 0;
}
@media (max-width: 900px) {
    .activity-sidebar { display: none; }
    .activity-toggle-btn { display: none !important; }
    .has-activity-sidebar { padding-left: 0; }
}
</style>

<div class="activity-sidebar" id="activitySidebar">
    <div class="activity-sidebar-header">
        <h3><span class="live-dot"></span> Лента</h3>
        <span style="font-size:0.7rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.25rem;">
            <span id="onlineCount">0</span> 👤
        </span>
        <button class="activity-sidebar-close" onclick="toggleActivitySidebar()" title="Скрыть">✕</button>
    </div>
    <div class="activity-sidebar-list" id="activitySidebarList">
        <div style="text-align:center;padding:2rem;color:var(--text-secondary);font-size:0.85rem;">Загрузка...</div>
    </div>
</div>

<button class="activity-toggle-btn" id="activityToggleBtn" onclick="toggleActivitySidebar()" title="Показать ленту">
    📰 Лента
</button>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const list = document.getElementById('activitySidebarList');
    const sidebar = document.getElementById('activitySidebar');
    document.body.classList.add('has-activity-sidebar');

    if (localStorage.getItem('sidebar_closed') === 'true') {
        sidebar.classList.add('closed');
        document.body.classList.add('sidebar-closed');
        document.getElementById('activityToggleBtn').classList.add('visible');
    }

    function loadActivities() {
        fetch('/web/api/activity?limit=10')
            .then(r => r.json())
            .then(data => {
                if (data.success && data.activities) {
                    renderActivities(data.activities);
                }
            })
            .catch(() => {
                if (list && !list.querySelector('.activity-sidebar-item')) {
                    list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-secondary);font-size:0.85rem;">Не удалось загрузить</div>';
                }
            });
    }

    WS.on('online_count', (data) => {
        const el = document.getElementById('onlineCount');
        if (el) el.textContent = data.online || 0;
    });

    WS.on('activity', (data) => {
        const act = data.activity;
        if (!act || !list) return;
        const empty = list.querySelector('div[style*="text-align:center"]');
        if (empty) empty.remove();
        const item = createActivityItem(act);
        list.insertBefore(item, list.firstChild);
        if (act.activity_type === 'achievement') SoundManager.achievement();
        while (list.children.length > 15) {
            list.removeChild(list.lastChild);
        }
    });

    WS.on('connected', loadActivities);

    loadActivities();
});

const ACTIVITY_RARITY_COLORS = {
    'consumer-grade': '#b0b0b0', 'industrial-grade': '#5e98d9',
    'mil-spec': '#4b69ff', 'mil-spec-grade': '#4b69ff',
    'restricted': '#8847ff', 'classified': '#d32ce6',
    'covert': '#eb4b4b', 'rare-special-item': '#ffd700',
    'rare-special': '#ffd700', 'extraordinary': '#ffd700',
    'contraband': '#ffaa00'
};

function createActivityItem(act) {
    const iconMap = {
        'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙',
        'achievement': '🏆', 'crash': '💥'
    };
    const item = document.createElement('div');
    item.className = 'activity-sidebar-item';
    item.style.cursor = 'pointer';

    const raritySlug = (act.data && act.data.rarity || '').toLowerCase().replace(/ /g, '-').replace(/_/g, '-').replace(/™/g, '');
    const rarityColor = ACTIVITY_RARITY_COLORS[raritySlug] || '';
    if (rarityColor) {
        item.style.background = `rgba(${hexToRgb(rarityColor)}, 0.08)`;
    }

    item.addEventListener('click', () => window.location.href = `/profiles/${act.user_id}`);

    const icon = iconMap[act.activity_type] || '📌';
    const imgHtml = (act.data && act.data.item_image)
        ? `<img class="asi-item-preview" src="${act.data.item_image}" onerror="this.style.display='none'">`
        : '';
    const timeStr = act.created_at
        ? new Date(act.created_at).toLocaleTimeString('ru-RU', {hour:'2-digit',minute:'2-digit'})
        : '';
    item.innerHTML = `
        <div class="asi-icon">${icon}</div>
        <div class="asi-content">
            <span class="asi-username">${escapeHtml(act.username)}</span>
            <span>${escapeHtml(act.message)}</span>
            <div class="asi-time">${timeStr}</div>
        </div>
        ${imgHtml}
    `;
    return item;
}

function hexToRgb(hex) {
    const v = parseInt(hex.replace('#', ''), 16);
    return (v >> 16) + ',' + ((v >> 8) & 255) + ',' + (v & 255);
}

function renderActivities(activities) {
    const list = document.getElementById('activitySidebarList');
    if (!list) return;
    if (!activities || activities.length === 0) {
        list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-secondary);font-size:0.85rem;">Пока нет активностей</div>';
        return;
    }
    list.innerHTML = '';
    activities.forEach(a => list.appendChild(createActivityItem(a)));
}

function toggleActivitySidebar() {
    const s = document.getElementById('activitySidebar');
    const btn = document.getElementById('activityToggleBtn');
    if (!s) return;
    const isOpen = !s.classList.contains('closed');
    s.classList.toggle('closed', isOpen);
    document.body.classList.toggle('sidebar-closed', isOpen);
    btn.classList.toggle('visible', isOpen);
    localStorage.setItem('sidebar_closed', isOpen ? 'true' : 'false');
}

function escapeHtml(text) {
    const d = document.createElement('div');
    d.textContent = text || '';
    return d.innerHTML;
}
</script>
