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);

function showNotification(message, isError = false) {
    const container = getElement('notification');
    if (!container) return;
    const bgColor = isError ? 'bg-red-500' : 'bg-green-500';
    container.innerHTML = `<div class="flex items-center text-white p-4 rounded-lg shadow-lg ${bgColor}"><i class="fas fa-info-circle mr-3"></i><p>${message}</p></div>`;
    container.classList.add('show');
    setTimeout(() => { container.classList.remove('show'); }, 4000);
}

// --- 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>`;
    }
}

async function handleFormSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const submitButton = getElement('submit-listing-btn');
    submitButton.disabled = true;
    submitButton.textContent = 'Submitting...';
    const listingData = Object.fromEntries(new FormData(form).entries());

    try {
        const response = await fetch(`${BACKEND_URL}/api/add-listing`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(listingData),
        });
        const result = await response.json();
        if (!response.ok) throw new Error(result.details || 'Submission failed.');
        showNotification('Success! Your recommendation has been added.');
        const newCard = createListingCard(listingData);
        getElement('recommendations-container').prepend(newCard);
        getElement('form-container').classList.add('hidden');
        getElement('form-chevron').classList.remove('rotate-180');
        form.reset();
    } catch (error) {
        showNotification(`Error: ${error.message}`, true);
    } finally {
        submitButton.disabled = false;
        submitButton.textContent = 'Submit Listing';
    }
}

// --- Initialization ---
export function initUI() {
    const addListingForm = getElement('add-listing-form');
    const toggleBtn = getElement('toggle-form-btn');
    const formContainer = getElement('form-container');
    const chevron = getElement('form-chevron');

    if (toggleBtn && formContainer && chevron) {
        toggleBtn.addEventListener('click', () => {
            formContainer.classList.toggle('hidden');
            chevron.classList.toggle('rotate-180');
        });
    }

    if (addListingForm) {
        addListingForm.addEventListener('submit', handleFormSubmit);
    }
    loadRecommendations();
}