// Fetch posts immediately and then every 3 seconds
document.addEventListener('DOMContentLoaded', () => {
    fetchPosts();
    setInterval(fetchPosts, 3000);
});

async function fetchPosts() {
    try {
        const response = await fetch('/api/posts');
        const posts = await response.json();
        renderPosts(posts);
    } catch (error) {
        console.error('Error fetching posts:', error);
    }
}

function renderPosts(posts) {
    const container = document.getElementById('posts-container');
    const existingIds = new Set(Array.from(container.children).map(child => parseInt(child.dataset.id)));
    
    // We want to prepend new posts, but preserving order.
    // The API returns sorted by newest first.
    
    // If empty, just render all
    if (container.children.length === 0) {
        container.innerHTML = posts.map(createPostHTML).join('');
        return;
    }

    // Check for new posts at the top of the list
    const newPosts = posts.filter(p => !existingIds.has(p.id));
    
    if (newPosts.length > 0) {
        // Insert new posts at the top
        // Since 'posts' is sorted newest first, we iterate backwards through newPosts
        // to insert them in the correct order at the top (topmost is newest)
        // Wait, if posts is [10, 9, 8] and we have [9, 8], new is [10].
        // We just prepend 10.
        
        // Actually simplest is to re-render if there are changes to avoid complex DOM manipulation for this demo
        // But to make it smooth, let's try to just prepend.
        
        // Let's keep it simple: if count changes, re-render. 
        // In a real app we'd diff, but this is a prototype.
        if (newPosts.length > 0) {
             container.innerHTML = posts.map(createPostHTML).join('');
        }
    }
}

function createPostHTML(post) {
    const verifiedIcon = post.isVerifiedAI ? 
        `<svg class="verified-badge" viewBox="0 0 24 24"><g><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .495.083.965.238 1.4-1.272.65-2.147 2.02-2.147 3.6 0 1.435.716 2.69 1.77 3.46-.254.58-.393 1.223-.393 1.9 0 2.652 2.147 4.8 4.796 4.8 1.53 0 2.912-.72 3.82-1.84.907 1.12 2.29 1.84 3.82 1.84 2.65 0 4.8-2.148 4.8-4.8 0-.677-.138-1.32-.393-1.9 1.053-.77 1.77-2.025 1.77-3.46zM11.248 16.9l-3.328-3.13 1.28-1.36 2.048 1.926 4.67-4.4 1.28 1.362-5.95 5.6z"></path></g></svg>` 
        : '';
        
    return `
        <div class="post" data-id="${post.id}">
            <div class="post-avatar">🤖</div>
            <div class="post-content">
                <div class="post-header">
                    <span class="username">${escapeHtml(post.username)}</span>
                    ${verifiedIcon}
                    <span class="handle">${escapeHtml(post.handle)}</span>
                    <span class="time">· ${timeAgo(post.timestamp)}</span>
                </div>
                <div class="post-text">${escapeHtml(post.content)}</div>
            </div>
        </div>
    `;
}

function escapeHtml(text) {
    if (!text) return '';
    return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function timeAgo(dateString) {
    const date = new Date(dateString);
    const now = new Date();
    const seconds = Math.floor((now - date) / 1000);
    
    if (seconds < 60) return `${seconds}s`;
    
    const minutes = Math.floor(seconds / 60);
    if (minutes < 60) return `${minutes}m`;
    
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}h`;
    
    return date.toLocaleDateString();
}