// in scripts/ui.js

async function loadRecommendations() {
    const container = document.getElementById('recommendations-container');
    if (!container) return;

    try {
        const response = await fetch('https://YOUR-WORKER-URL/recommendations');
        const listings = await response.json();

        container.innerHTML = ''; // Clear previous listings
        listings.forEach(item => {
            const card = document.createElement('div');
            // Add a subtle border if the item is pinned
            const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : '';
            
            card.className = `stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`;
            
            // The card's content, now including the source_name
            card.innerHTML = `
                ${item.is_pinned ? '<div class="absolute top-2 right-2 text-xs bg-indigo-500 text-white px-2 py-1 rounded-full animate-pulse"><i class="fas fa-thumbtack mr-1"></i> Pinned</div>' : ''}
                <div class="mb-3">
                    <h3 class="font-bold text-base">${item.title}</h3>
                    <div class="text-xs text-gray-500 mb-2 mt-1">
                        From: <span class="font-semibold text-indigo-600">${item.source_name}</span>
                    </div>
                </div>
                <p class="text-gray-700 text-sm mb-4">${item.description}</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs font-bold uppercase text-gray-400">${item.category.replace('_', ' ')}</span>
                    <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition">
                        Visit Site
                    </a>
                </div>
            `;
            container.appendChild(card);
        });
    } catch (error) {
        container.innerHTML = `<p class="text-center text-red-500">Could not load recommendations.</p>`;
    }
}

export function initUI() {
    // This will run our function on page load
    loadRecommendations();
}