{% extends "base.html" %}

{% block title %}Dashboard - {{ APP_NAME }}{% endblock %}

{% block content %}
{% include '_nav.html' %}

<!-- Main Content Area -->
<main class="main-content">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-section">
            <h3>Content Filters</h3>
            <div id="filter-list" class="filter-list">
                <!-- Filters will be loaded dynamically -->
                <div class="loading-filters">Loading filters...</div>
            </div>
        </div>
        
        <div class="sidebar-section">
            <h3>Communities</h3>
            <div id="community-list" class="community-list">
                <!-- Communities will be loaded dynamically -->
                <div class="loading-communities">Loading communities...</div>
            </div>
        </div>
        
        <div class="sidebar-section">
            <h3>Quick Stats</h3>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">{{ quick_stats.posts_today if quick_stats else 0 }}</div>
                    <div class="stat-label">Posts Today</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">{{ user_settings.get('communities', [])|length or 'All' }}</div>
                    <div class="stat-label">Communities</div>
                </div>
            </div>
        </div>
    </aside>
    
    <!-- Content Feed -->
    <section class="content-section">
        <div class="content-header">
            <h1>{% if anonymous %}Public Feed{% else %}Your Feed{% endif %}</h1>
            <div class="content-actions">
                <button class="refresh-btn" onclick="refreshFeed()">🔄 Refresh</button>
                {% if not anonymous %}
                    <a href="{{ url_for('settings_filters') }}" class="filter-btn">🔧 Customize</a>
                {% endif %}
            </div>
        </div>
        
        <div class="feed-container">
            <div id="loading-indicator" class="loading">
                <div class="loading-spinner"></div>
                <p>Loading your feed...</p>
            </div>
            <div id="posts-container" class="posts-grid">
                <!-- Posts will be loaded here dynamically -->
            </div>
            
            <!-- Pagination Controls -->
            <div class="pagination-controls">
                <button id="prev-btn" class="pagination-btn" onclick="loadPreviousPage()" disabled>
                    ← Previous
                </button>
                <span id="page-info" class="page-info">Page 1 of 1</span>
                <button id="next-btn" class="pagination-btn" onclick="loadNextPage()" disabled>
                    Next →
                </button>
            </div>
        </div>
    </section>
</main>

<style>
/* Top Navigation */
.top-nav {
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e5e7eb;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
}

.nav-left .logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
}

.brand-balance {
    color: #4db6ac;
}

.brand-board {
    color: #2c3e50;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 16px;
    min-width: 400px;
    transition: all 0.2s ease;
}

.search-bar:focus-within {
    border-color: #4db6ac;
    box-shadow: 0 0 0 3px rgba(77, 182, 172, 0.1);
}

.search-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    color: #2c3e50;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
}

.user-menu {
    position: relative;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.user-info:hover {
    background: #f1f5f9;
}

.user-avatar img, .avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    background: linear-gradient(135deg, #4db6ac, #26a69a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.username {
    font-weight: 500;
    color: #2c3e50;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.user-menu:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: #f8fafc;
    color: #4db6ac;
}

/* Main Content Layout */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    padding: 24px;
    min-height: calc(100vh - 64px);
}

/* Sidebar */
.sidebar {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 88px;
}

.sidebar-section {
    margin-bottom: 32px;
}

.sidebar-section h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.filter-item, .community-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.filter-item:hover, .community-item:hover {
    background: #f8fafc;
}

.filter-item.active {
    background: #e0f7fa;
    color: #4db6ac;
    font-weight: 500;
}

.community-item.active {
    background: #e0f7fa;
    color: #4db6ac;
    font-weight: 500;
}

.filter-icon, .community-icon {
    font-size: 16px;
}

.count {
    margin-left: auto;
    background: #e2e8f0;
    color: #64748b;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.loading-communities, .loading-filters {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 20px;
}

.no-communities, .no-filters {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 20px;
}

.community-name {
    flex: 1;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-card {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4db6ac;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Content Section */
.content-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.content-header {
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafbfc;
}

.content-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
}

.content-actions {
    display: flex;
    gap: 12px;
}

.refresh-btn, .filter-btn {
    background: #4db6ac;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.refresh-btn:hover, .filter-btn:hover {
    background: #26a69a;
    transform: translateY(-1px);
}

.clear-search-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    background: #e2e8f0;
    color: #2c3e50;
    transform: translateY(-1px);
}

.feed-container {
    padding: 0;
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #64748b;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4db6ac;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.posts-grid {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.post-card:hover {
    border-color: #4db6ac;
    box-shadow: 0 4px 12px rgba(77, 182, 172, 0.1);
    transform: translateY(-2px);
}

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.platform-badge {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.platform-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.platform-reddit {
    background: #ff4500;
}

.platform-hackernews {
    background: #ff6600;
}

.platform-unknown {
    background: #64748b;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
}

.post-author {
    font-weight: 500;
    color: #2c3e50;
}

.post-source {
    color: #4db6ac;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
}

.post-source:hover {
    background: rgba(77, 182, 172, 0.1);
    text-decoration: underline;
}

.post-separator {
    color: #cbd5e1;
}

.post-time {
    color: #64748b;
}

.external-link-indicator {
    margin-left: 8px;
    color: #4db6ac;
}

.post-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 12px 0 8px 0;
    line-height: 1.4;
}

.post-preview {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.post-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #64748b;
}

.post-score {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-comments {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-actions {
    display: flex;
    gap: 8px;
}

.post-action {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-action:hover {
    border-color: #4db6ac;
    color: #4db6ac;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 32px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    margin-top: 20px;
}

.pagination-btn {
    background: #4db6ac;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #26a69a;
    transform: translateY(-1px);
}

.pagination-btn:disabled {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    transform: none;
}

.page-info {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
    min-width: 120px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    
    .sidebar {
        position: static;
        margin-bottom: 16px;
    }
    
    .nav-content {
        padding: 0 16px;
    }
    
    .search-bar {
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .nav-center {
        display: none;
    }
    
    .nav-content {
        justify-content: space-between;
    }
}
</style>

<script>
// Global state
let postsData = [];
let currentPage = 1;
let currentCommunity = '';
let currentPlatform = '';
let currentFilter = 'no_filter';
let paginationData = {};
let platformConfig = {};
let communitiesData = [];
let filtersData = [];

// User experience settings
let userSettings = {{ user_settings|tojson }};

// Load posts on page load
document.addEventListener('DOMContentLoaded', function() {
    loadPlatformConfig();
    loadFilters();
    loadPosts();
    setupInfiniteScroll();
    setupAutoRefresh();
});

// Load platform configuration and communities
async function loadPlatformConfig() {
    try {
        const response = await fetch('/api/platforms');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        platformConfig = data.platforms || {};
        communitiesData = data.communities || [];

        console.log('Loaded communities:', communitiesData);
        renderCommunities(communitiesData);
        setupCommunityFiltering();
    } catch (error) {
        console.error('Error loading platform configuration:', error);
        // Show fallback communities
        const fallbackCommunities = [
            {platform: 'reddit', id: 'programming', display_name: 'r/programming', icon: '💻', count: 117},
            {platform: 'hackernews', id: 'front_page', display_name: 'Hacker News', icon: '🧮', count: 117},
            {platform: 'reddit', id: 'technology', display_name: 'r/technology', icon: '⚡', count: 0}
        ];
        communitiesData = fallbackCommunities;
        renderCommunities(fallbackCommunities);
        setupCommunityFiltering();
    }
}

// Load available filters
async function loadFilters() {
    try {
        const response = await fetch('/api/filters');
        const data = await response.json();
        filtersData = data.filters || [];
        
        renderFilters(filtersData);
        setupFilterSwitching();
    } catch (error) {
        console.error('Error loading filters:', error);
        // Show fallback filters
        const fallbackFilters = [
            {id: 'no_filter', name: 'All Content', icon: '🌐', active: true, description: 'No filtering'}
        ];
        renderFilters(fallbackFilters);
        setupFilterSwitching();
    }
}

// Render filters in sidebar
function renderFilters(filters) {
    const filterList = document.getElementById('filter-list');
    if (!filterList) return;
    
    if (filters.length === 0) {
        filterList.innerHTML = '<div class="no-filters">No filters available</div>';
        return;
    }
    
    const filtersHTML = filters.map(filter => {
        return `
            <div class="filter-item ${filter.active ? 'active' : ''}" data-filter="${filter.id}" title="${filter.description}">
                <span class="filter-icon">${filter.icon}</span>
                <span>${filter.name}</span>
            </div>
        `;
    }).join('');
    
    filterList.innerHTML = filtersHTML;
    
    // Set current filter based on active filter
    const activeFilter = filters.find(f => f.active);
    if (activeFilter) {
        currentFilter = activeFilter.id;
    }
}

// Render communities in sidebar
function renderCommunities(communities) {
    const communityList = document.getElementById('community-list');
    if (!communityList) return;

    console.log('Rendering communities:', communities);

    if (!communities || communities.length === 0) {
        // Always show fallback communities if none are loaded
        const fallbackCommunities = [
            {platform: 'reddit', id: 'programming', display_name: 'r/programming', icon: '💻', count: 117},
            {platform: 'hackernews', id: 'front_page', display_name: 'Hacker News', icon: '🧮', count: 117},
            {platform: 'reddit', id: 'technology', display_name: 'r/technology', icon: '⚡', count: 0}
        ];
        communities = fallbackCommunities;
    }
    
    // Add "All Communities" option at the top
    let communitiesHTML = `
        <div class="community-item all-communities active" data-platform="" data-community="">
            <span class="community-icon">🌐</span>
            <span class="community-name">All Communities</span>
            <span class="count">${communities.reduce((sum, c) => sum + c.count, 0)}</span>
        </div>
    `;
    
    communitiesHTML += communities.map(community => {
        return `
            <div class="community-item" data-platform="${community.platform}" data-community="${community.id}">
                <span class="community-icon">${community.icon}</span>
                <span class="community-name">${community.display_name}</span>
                <span class="count">${community.count}</span>
            </div>
        `;
    }).join('');
    
    communityList.innerHTML = communitiesHTML;
}

// Load posts from API
async function loadPosts(page = 1, community = '', platform = '', append = false, filter = null) {
    try {
        // Build query parameters
        const params = new URLSearchParams();
        params.append('page', page);
        params.append('per_page', 20);
        if (community) params.append('community', community);
        if (platform) params.append('platform', platform);
        if (filter || currentFilter) params.append('filter', filter || currentFilter);
        if (currentSearchQuery) params.append('q', currentSearchQuery);

        const response = await fetch(`/api/posts?${params}`);
        const data = await response.json();
        const newPosts = data.posts || [];
        paginationData = data.pagination || {};

        // Update current state
        currentPage = page;
        currentCommunity = community;
        currentPlatform = platform;

        if (append && userSettings?.experience?.infinite_scroll) {
            // Append new posts for infinite scroll
            postsData = [...postsData, ...newPosts];
            renderPosts(newPosts, true);
        } else {
            // Replace posts for pagination
            postsData = newPosts;
            renderPosts(postsData, false);
        }

        updatePaginationControls();
    } catch (error) {
        console.error('Error loading posts:', error);
        showError('Failed to load posts');
    }
}

// Render posts to the feed
function renderPosts(posts, append = false) {
    const loadingIndicator = document.getElementById('loading-indicator');
    const postsContainer = document.getElementById('posts-container');

    // Hide loading indicator
    loadingIndicator.style.display = 'none';

    if (!append && posts.length === 0) {
        postsContainer.innerHTML = '<div class="no-posts">No posts available</div>';
        return;
    }

    if (append && posts.length === 0) {
        // No more posts to append
        return;
    }

    const postsHTML = posts.map(post => createPostCard(post)).join('');

    if (append) {
        // Append new posts for infinite scroll
        postsContainer.insertAdjacentHTML('beforeend', postsHTML);
    } else {
        // Replace all posts for pagination
        postsContainer.innerHTML = postsHTML;
    }
}

// Create individual post card HTML
function createPostCard(post) {
    const timeAgo = formatTimeAgo(post.timestamp);
    const platformClass = `platform-${post.platform}`;
    const platformInitial = post.platform.charAt(0).toUpperCase();
    const hasExternalLink = post.external_url && !post.external_url.includes(window.location.hostname);
    
    return `
        <article class="post-card" onclick="openPost('${post.id}')">
            <div class="post-header">
                <div class="platform-badge ${platformClass}" onclick="event.stopPropagation(); filterByPlatform('${post.platform}')" title="Filter by ${post.platform}">
                    ${platformInitial}
                </div>
                <div class="post-meta">
                    <span class="post-author">${escapeHtml(post.author)}</span>
                    <span class="post-separator">•</span>
                    ${post.source_display ? `<span class="post-source" onclick="event.stopPropagation(); filterByCommunity('${post.source}', '${post.platform}')" title="Filter by ${post.source_display}">${escapeHtml(post.source_display)}</span><span class="post-separator">•</span>` : ''}
                    <span class="post-time">${timeAgo}</span>
                    ${hasExternalLink ? '<span class="external-link-indicator">🔗</span>' : ''}
                </div>
            </div>
            
            <h3 class="post-title">${escapeHtml(post.title)}</h3>
            
            ${post.content_preview ? `<div class="post-preview">${escapeHtml(post.content_preview)}</div>` : ''}
            
            ${post.tags && post.tags.length > 0 ? `
                <div class="post-tags">
                    ${post.tags.map(tag => `<span class="tag">${escapeHtml(tag)}</span>`).join('')}
                </div>
            ` : ''}
            
            <div class="post-footer">
                <div class="post-stats">
                    <div class="post-score">
                        <span>▲</span>
                        <span>${post.score}</span>
                    </div>
                    <div class="post-comments">
                        <span>💬</span>
                        <span>${post.comments_count} comments</span>
                    </div>
                </div>
                <div class="post-actions">
                    ${hasExternalLink ? `<button class="post-action" onclick="event.stopPropagation(); window.open('${escapeHtml(post.external_url)}', '_blank')">🔗 Source</button>` : ''}
                    <button class="post-action" onclick="event.stopPropagation(); sharePost('${post.id}')">Share</button>
                    <button class="post-action" onclick="event.stopPropagation(); savePost('${post.id}')">Save</button>
                </div>
            </div>
        </article>
    `;
}

// Utility functions
function formatTimeAgo(timestamp) {
    const now = Date.now() / 1000;
    const diff = now - timestamp;
    
    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
    return `${Math.floor(diff / 86400)}d ago`;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function showError(message) {
    const postsContainer = document.getElementById('posts-container');
    postsContainer.innerHTML = `<div class="error-message">${message}</div>`;
}

// Platform and community filtering functions
function filterByPlatform(platform) {
    // Remove active from all community items
    document.querySelectorAll('.community-item').forEach(c => c.classList.remove('active'));
    
    // Update header
    const contentHeader = document.querySelector('.content-header h1');
    contentHeader.textContent = `${platform.charAt(0).toUpperCase() + platform.slice(1)} Posts`;
    
    // Show loading state
    const postsContainer = document.getElementById('posts-container');
    const loadingIndicator = document.getElementById('loading-indicator');
    loadingIndicator.style.display = 'flex';
    postsContainer.innerHTML = '';
    
    // Load filtered posts by platform
    loadPosts(1, '', platform);
}

function filterByCommunity(community, platform) {
    // Remove active from all community items
    document.querySelectorAll('.community-item').forEach(c => c.classList.remove('active'));
    
    // Set active state on matching community if it exists
    const matchingCommunity = document.querySelector(`.community-item[data-community="${community}"][data-platform="${platform}"]`);
    if (matchingCommunity) {
        matchingCommunity.classList.add('active');
    }
    
    // Update header
    const contentHeader = document.querySelector('.content-header h1');
    contentHeader.textContent = community ? `${community} Posts` : 'Your Feed';
    
    // Show loading state
    const postsContainer = document.getElementById('posts-container');
    const loadingIndicator = document.getElementById('loading-indicator');
    loadingIndicator.style.display = 'flex';
    postsContainer.innerHTML = '';
    
    // Load filtered posts
    loadPosts(1, community, platform);
}

// Post actions
function openPost(postId) {
    window.open(`/post/${postId}`, '_blank');
}

function sharePost(postId) {
    const url = `${window.location.origin}/post/${postId}`;
    navigator.clipboard.writeText(url).then(() => {
        alert('Link copied to clipboard!');
    });
}

function savePost(postId) {
    alert('Save functionality coming soon!');
}

// Filter switching functionality
function setupFilterSwitching() {
    document.addEventListener('click', function(event) {
        if (event.target.closest('.filter-item')) {
            const filterItem = event.target.closest('.filter-item');
            
            // Remove active class from all filter items
            document.querySelectorAll('.filter-item').forEach(f => f.classList.remove('active'));
            
            // Add active class to clicked item
            filterItem.classList.add('active');
            
            // Get filter type
            const filterType = filterItem.dataset.filter;
            currentFilter = filterType;
            
            // Update header to show current filter
            const contentHeader = document.querySelector('.content-header h1');
            const filterName = filterItem.textContent.trim();
            contentHeader.textContent = `${filterName} Feed`;
            
            // Show loading state
            const postsContainer = document.getElementById('posts-container');
            const loadingIndicator = document.getElementById('loading-indicator');
            loadingIndicator.style.display = 'flex';
            postsContainer.innerHTML = '';
            
            // Apply filter
            loadPosts(1, currentCommunity, currentPlatform, false, filterType);
        }
    });
}

// Refresh feed function
function refreshFeed() {
    const refreshBtn = document.querySelector('.refresh-btn');
    const loadingIndicator = document.getElementById('loading-indicator');
    
    // Add loading state
    refreshBtn.innerHTML = '⏳ Refreshing...';
    refreshBtn.disabled = true;
    
    // Show loading indicator
    loadingIndicator.style.display = 'flex';
    
    // Reload posts with current filters
    loadPosts(currentPage, currentCommunity, currentPlatform).finally(() => {
        // Reset button
        refreshBtn.innerHTML = '🔄 Refresh';
        refreshBtn.disabled = false;
    });
}

// Search functionality
let currentSearchQuery = '';

document.querySelector('.search-input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        const query = this.value.trim();
        performSearch(query);
    }
});

document.querySelector('.search-btn').addEventListener('click', function() {
    const query = document.querySelector('.search-input').value.trim();
    performSearch(query);
});

function performSearch(query) {
    currentSearchQuery = query;
    currentPage = 1;

    if (query) {
        document.querySelector('.content-header h1').textContent = `Search results for "${query}"`;
        // Show clear search button
        if (!document.querySelector('.clear-search-btn')) {
            const clearBtn = document.createElement('button');
            clearBtn.className = 'clear-search-btn';
            clearBtn.textContent = '✕ Clear search';
            clearBtn.onclick = clearSearch;
            document.querySelector('.content-actions').prepend(clearBtn);
        }
    }

    loadPosts();
}

function clearSearch() {
    currentSearchQuery = '';
    document.querySelector('.search-input').value = '';
    // Restore original feed title based on user state
    const isAnonymous = {{ 'true' if anonymous else 'false' }};
    document.querySelector('.content-header h1').textContent = isAnonymous ? 'Public Feed' : 'Your Feed';
    const clearBtn = document.querySelector('.clear-search-btn');
    if (clearBtn) {
        clearBtn.remove();
    }
    loadPosts();
}

// Setup infinite scroll functionality
function setupInfiniteScroll() {
    if (!userSettings?.experience?.infinite_scroll) {
        return;
    }

    const feedContainer = document.querySelector('.feed-container');
    let loadingMore = false;

    // Hide pagination controls for infinite scroll
    const paginationControls = document.querySelector('.pagination-controls');
    if (paginationControls) {
        paginationControls.style.display = 'none';
    }

    // Add scroll event listener
    feedContainer.addEventListener('scroll', async function() {
        if (loadingMore) return;

        const scrollTop = feedContainer.scrollTop;
        const scrollHeight = feedContainer.scrollHeight;
        const clientHeight = feedContainer.clientHeight;

        // Load more when user scrolls near bottom (80% through content)
        const scrollThreshold = 0.8;

        if (scrollTop + clientHeight >= scrollHeight * scrollThreshold) {
            if (paginationData.has_next) {
                loadingMore = true;

                // Show loading indicator at bottom
                const loadingDiv = document.createElement('div');
                loadingDiv.className = 'loading-more';
                loadingDiv.innerHTML = `
                    <div class="loading-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
                    <p style="font-size: 0.9rem; margin: 8px 0 0 0;">Loading more posts...</p>
                `;
                document.getElementById('posts-container').appendChild(loadingDiv);

                try {
                    await loadPosts(currentPage + 1, currentCommunity, currentPlatform, true);
                } finally {
                    loadingDiv.remove();
                    loadingMore = false;
                }
            }
        }
    });
}

// Auto-refresh functionality
let autoRefreshInterval = null;

function setupAutoRefresh() {
    // Clear any existing interval
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
    }
    
    // Only set up auto-refresh if enabled in user settings
    if (!userSettings?.experience?.auto_refresh) {
        return;
    }
    
    // Refresh once per day (86400000 ms = 24 hours)
    // TODO: Make this configurable in admin settings - allow admins to set auto-refresh interval
    const refreshInterval = 86400000;
    
    autoRefreshInterval = setInterval(async () => {
        // Only auto-refresh if user is viewing first page and no specific filters
        if (currentPage === 1 && !currentCommunity && !currentPlatform) {
            try {
                // Check if new content is available by checking timestamp
                const response = await fetch('/api/content-timestamp');
                const data = await response.json();
                const lastContentUpdate = data.timestamp;
                
                // Compare with our last known update (stored in localStorage)
                const lastKnownUpdate = localStorage.getItem('lastContentUpdate');
                
                if (!lastKnownUpdate || lastContentUpdate > lastKnownUpdate) {
                    // Show subtle refresh indicator
                    const refreshBtn = document.querySelector('.refresh-btn');
                    const originalText = refreshBtn.innerHTML;
                    refreshBtn.innerHTML = '⏳ New content available...';
                    refreshBtn.style.opacity = '0.7';
                    
                    // Only reload if there's actually new content
                    await loadPosts(1, currentCommunity, currentPlatform);
                    
                    // Update our timestamp
                    localStorage.setItem('lastContentUpdate', lastContentUpdate);
                    
                    // Show brief success feedback
                    refreshBtn.innerHTML = '✅ Updated';
                    setTimeout(() => {
                        refreshBtn.innerHTML = originalText;
                        refreshBtn.style.opacity = '1';
                    }, 2000);
                } else {
                    // No new content, just show a subtle indicator
                    console.log('Auto-refresh: No new content available');
                }
                
            } catch (error) {
                console.error('Auto-refresh failed:', error);
                // Don't show error for auto-refresh failures, just log them
            }
        }
    }, refreshInterval);
    
    // Show auto-refresh status in console for debugging
    console.log('Auto-refresh enabled: once per day (24 hours)');
}

// Function to toggle auto-refresh (for settings page)
function toggleAutoRefresh(enabled) {
    userSettings.experience = userSettings.experience || {};
    userSettings.experience.auto_refresh = enabled;
    
    if (enabled) {
        setupAutoRefresh();
    } else if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
        console.log('Auto-refresh disabled');
    }
}

// Pagination functions
function updatePaginationControls() {
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const pageInfo = document.getElementById('page-info');

    // Hide pagination controls if infinite scroll is enabled
    const paginationControls = document.querySelector('.pagination-controls');
    if (userSettings?.experience?.infinite_scroll) {
        if (paginationControls) paginationControls.style.display = 'none';
        return;
    }

    if (paginationData) {
        prevBtn.disabled = !paginationData.has_prev;
        nextBtn.disabled = !paginationData.has_next;
        pageInfo.textContent = `Page ${paginationData.current_page} of ${paginationData.total_pages}`;
    }
}

function loadNextPage() {
    if (paginationData.has_next) {
        loadPosts(currentPage + 1, currentCommunity, currentPlatform);
    }
}

function loadPreviousPage() {
    if (paginationData.has_prev) {
        loadPosts(currentPage - 1, currentCommunity, currentPlatform);
    }
}

// Community filtering setup
function setupCommunityFiltering() {
    document.querySelectorAll('.community-item').forEach(item => {
        item.addEventListener('click', function() {
            // Remove active class from all community items
            document.querySelectorAll('.community-item').forEach(c => c.classList.remove('active'));
            
            // Add active class to clicked item
            this.classList.add('active');
            
            // Get platform and community from data attributes
            const platform = this.dataset.platform || '';
            const community = this.dataset.community || '';
            
            // Update the header to show what's being filtered
            const contentHeader = document.querySelector('.content-header h1');
            if (community && platform) {
                contentHeader.textContent = `${this.querySelector('.community-name').textContent}`;
            } else {
                contentHeader.textContent = 'Your Feed';
            }
            
            // Show loading state
            const postsContainer = document.getElementById('posts-container');
            const loadingIndicator = document.getElementById('loading-indicator');
            loadingIndicator.style.display = 'flex';
            postsContainer.innerHTML = '';
            
            // Load filtered posts
            loadPosts(1, community, platform);
        });
    });
    
    // Add "All Content" filter option
    const allContentFilter = document.querySelector('.filter-item[data-filter="no_filter"]');
    if (allContentFilter) {
        allContentFilter.addEventListener('click', function() {
            // Remove active from community items
            document.querySelectorAll('.community-item').forEach(c => c.classList.remove('active'));
            
            // Set "All Communities" as active
            const allCommunitiesItem = document.querySelector('.community-item.all-communities');
            if (allCommunitiesItem) {
                allCommunitiesItem.classList.add('active');
            }
            
            // Reset header
            document.querySelector('.content-header h1').textContent = 'Your Feed';
            
            // Show loading and load all posts
            const postsContainer = document.getElementById('posts-container');
            const loadingIndicator = document.getElementById('loading-indicator');
            loadingIndicator.style.display = 'flex';
            postsContainer.innerHTML = '';
            
            loadPosts(1, '', '');
        });
    }
}
</script>
{% endblock %}