scripts/ui.js

// The complete ui.js file with the correct worker URL.

// Define the backend URL as a constant for easy access.
const BACKEND_URL = 'https://stream-ai-backend.smplushypermedia.workers.dev';

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

    try {
        // Fetch recommendations from your live backend.
        const response = await fetch(`${BACKEND_URL}/api/recommendations`);
        
        if (!response.ok) {
            throw new Error(`Network response was not ok. Status: ${response.status}`);
        }

        const listings = await response.json();

        container.innerHTML = ''; // Clear previous listings
        if (listings.length === 0) {
            container.innerHTML = `<p class="text-center col-span-full text-gray-500">No recommendations available yet. Be the first to add one!</p>`;
            return;
        }

        listings.forEach(item => {
            const card = document.createElement('div');
            const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : 'shadow-md';
            card.className = `stream-card bg-white rounded-lg overflow-hidden hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`;
            
            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 mt-auto">
                    <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) {
        console.error("Failed to load recommendations:", error);
        if (container) {
            container.innerHTML = `<p class="text-center col-span-full text-red-500">Could not load recommendations. Please ensure the backend is running and the URL is correct.</p>`;
        }
    }
}

export function initUI() {
    // This will run our function on page load to populate the recommendations.
    loadRecommendations();
}