scripts/ui.js

// scripts/ui.js -- FINAL VERSION

const BACKEND_URL = 'https://streamai-backend-v2.smplushypermedia.workers.dev';

// --- Helper Functions ---
const getElement = (id) => document.getElementById(id);

// --- Card Rendering ---
function createListingCard(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"><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>
    `;
    return card;
}

// --- Core Logic ---
async function loadRecommendations() {
    const container = getElement('recommendations-container');
    if (!container) return;
    try {
        const response = await fetch(`${BACKEND_URL}/api/recommendations`);
        if (!response.ok) throw new Error(`Network Error: ${response.statusText}`);
        const listings = await response.json();
        container.innerHTML = '';
        if (listings.length === 0) {
            container.innerHTML = `<p class="text-center col-span-full text-gray-500">No recommendations available yet.</p>`;
            return;
        }
        listings.forEach(item => container.appendChild(createListingCard(item)));
    } catch (error) {
        container.innerHTML = `<p class="text-center col-span-full text-red-500">Could not load recommendations.</p>`;
    }
}

// ... (The rest of your ui.js file, including initUI, handleFormSubmit, showNotification, etc., can remain the same or you can paste the full version from previous steps if you are unsure) ...

export function initUI() {
    // This will run our function on page load to populate the recommendations
    loadRecommendations();
    // ... other event listeners for the form and video button ...
}