app.js

// Advanced JavaScript with modern features
class BlogApp {
    constructor() {
        this.currentUser = null;
        this.init();
    }

    async init() {
        await this.checkAuth();
        this.setupEventListeners();
        this.loadInitialData();
    }

    async checkAuth() {
        try {
            const token = localStorage.getItem('auth_token');
            if (token) {
                const response = await this.apiCall('/api/auth/user', 'GET', null, token);
                if (response.success) {
                    this.currentUser = response.user;
                    this.updateUI();
                }
            }
        } catch (error) {
            console.error('Auth check failed:', error);
        }
    }

    async apiCall(endpoint, method = 'GET', data = null, token = null) {
        const config = {
            method,
            headers: {
                'Content-Type': 'application/json',
            }
        };

        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }

        if (data && method !== 'GET') {
            config.body = JSON.stringify(data);
        }

        const response = await fetch(endpoint, config);
        return await response.json();
    }

    setupEventListeners() {
        // Real-time search
        const searchInput = document.getElementById('search-input');
        if (searchInput) {
            let searchTimeout;
            searchInput.addEventListener('input', (e) => {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    this.performSearch(e.target.value);
                }, 500);
            });
        }

        // Infinite scroll
        window.addEventListener('scroll', () => {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000) {
                this.loadMorePosts();
            }
        });
    }

    async performSearch(query) {
        if (query.length < 2) return;
        
        try {
            const response = await this.apiCall(`/api/posts?search=${encodeURIComponent(query)}`);
            this.displaySearchResults(response.posts);
        } catch (error) {
            console.error('Search failed:', error);
        }
    }

    displaySearchResults(posts) {
        const resultsContainer = document.getElementById('search-results');
        if (resultsContainer) {
            resultsContainer.innerHTML = posts.map(post => `
                <div class="search-result-item">
                    <h4><a href="/post/${post.slug}">${post.title}</a></h4>
                    <p>${post.excerpt || post.content.substring(0, 150)}...</p>
                </div>
            `).join('');
        }
    }

    async loadMorePosts() {
        if (this.loadingMore) return;
        
        this.loadingMore = true;
        const nextPage = this.currentPage + 1;
        
        try {
            const response = await this.apiCall(`/api/posts?page=${nextPage}`);
            if (response.posts.length > 0) {
                this.appendPosts(response.posts);
                this.currentPage = nextPage;
            }
        } catch (error) {
            console.error('Failed to load more posts:', error);
        } finally {
            this.loadingMore = false;
        }
    }

    updateUI() {
        // Update navigation based on auth status
        const authElements = document.querySelectorAll('.auth-only');
        const guestElements = document.querySelectorAll('.guest-only');
        
        if (this.currentUser) {
            authElements.forEach(el => el.style.display = 'block');
            guestElements.forEach(el => el.style.display = 'none');
            
            // Update user info
            const userMenu = document.getElementById('user-menu');
            if (userMenu) {
                userMenu.innerHTML = `
                    <img src="${this.currentUser.profile_picture || '/static/images/default-avatar.png'}" 
                         alt="${this.currentUser.username}" class="user-avatar">
                    <span>${this.currentUser.username}</span>
                `;
            }
        } else {
            authElements.forEach(el => el.style.display = 'none');
            guestElements.forEach(el => el.style.display = 'block');
        }
    }
}

// Initialize app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.blogApp = new BlogApp();
});