scripts/ui.js

// scripts/ui.js -- Final version with form handling

const BACKEND_URL = 'https://stream-ai-backend.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-check-circle mr-3"></i><p>${message}</p></div>`;
    
    container.classList.add('show');
    setTimeout(() => { container.classList.remove('show'); }, 4000);
}


// --- Core Functions ---

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 = ''; // Clear before loading
        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 => {
            const card = document.createElement('div');
            // ... (The card rendering logic from the previous step remains the same) ...
            container.appendChild(card);
        });
    } 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(); // Stop the browser from reloading the page
    const form = event.target;
    const submitButton = getElement('submit-listing-btn');
    submitButton.disabled = true;
    submitButton.textContent = 'Submitting...';

    const formData = new FormData(form);
    const listingData = Object.fromEntries(formData.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.');
        form.reset(); // Clear the form fields
        loadRecommendations(); // Refresh the list to show the new item
        
    } 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');

    if (addListingForm) {
        addListingForm.addEventListener('submit', handleFormSubmit);
    }
    
    // Load the initial recommendations when the page loads
    loadRecommendations();
}