scripts/ui.js

// scripts/ui.js

// --- Sample Data for Listings ---
const streamingData = [{title:"The Grand Adventure",type:"Movie",genre:"Adventure, Comedy",platform:"Netflix",rating:"4.8",year:"2022",description:"A hilarious journey across continents with unexpected twists.",broadcastTime:"2023-12-10T19:30:00"},{title:"Dark Secrets",type:"TV Series",genre:"Drama, Thriller",platform:"HBO Max",rating:"4.7",year:"2021",description:"A small town's dark past resurfaces with shocking revelations.",broadcastTime:"2023-12-12T21:00:00"},{title:"Space Explorers",type:"Documentary",genre:"Science, Space",platform:"Disney+",rating:"4.9",year:"2023",description:"The latest discoveries from the frontiers of space exploration.",broadcastTime:"2023-12-14T18:00:00"}];
const rssFeedData = [{title:"New Episode: The Grand Adventure",source:"Netflix",time:"5 hours ago",excerpt:"The comedy adventure movie is now the most-watched title on Netflix this week."}, {title:"Breaking: New streaming partnership",source:"Streaming News",time:"1 day ago",excerpt:"Major platforms announce new content sharing agreement."}];

const getElement = (id) => document.getElementById(id);

function showNotification(title, message) {
    const container = getElement('notification');
    if (!container) return;
    container.className = 'notification show';
    container.innerHTML = `<div class="flex items-center"><i class="fas fa-bell text-yellow-300 mr-3"></i><div><p class="font-semibold">${title}</p><p class="text-sm">${message}</p></div></div>`;
    setTimeout(() => { container.classList.remove('show'); }, 3000);
}

function loadRSSFeed() {
    const container = getElement('rss-feed');
    if (!container) return;
    container.innerHTML = '';
    rssFeedData.forEach(item => {
        const feedItem = document.createElement('div');
        feedItem.className = 'rss-item bg-gray-50 p-3 rounded-lg';
        feedItem.innerHTML = `<h4 class="font-medium text-sm mb-1">${item.title}</h4><div class="flex items-center text-xs text-gray-500 mb-2"><span>${item.source}</span><span class="mx-2">•</span><span>${item.time}</span></div><p class="text-xs text-gray-700">${item.excerpt}</p>`;
        container.appendChild(feedItem);
    });
}

function loadRecommendations() {
    const container = getElement('recommendations-container');
    if (!container) return;
    container.innerHTML = '';
    streamingData.forEach(item => {
        const card = document.createElement('div');
        card.className = 'stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 fade-in p-4';
        card.innerHTML = `<div class="mb-3"><div class="flex justify-between items-start"><h3 class="font-bold text-base">${item.title}</h3><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center"><i class="fas fa-star text-yellow-500 mr-1 text-xs"></i> ${item.rating}</span></div><p class="text-gray-600 text-xs mb-1">${item.type} • ${item.genre} • ${item.year}</p><div class="text-xs text-indigo-600 mb-2">${item.platform}</div></div><p class="text-gray-700 text-sm mb-4">${item.description}</p><div class="flex justify-between items-center"><button class="save-btn text-indigo-600 hover:text-indigo-800 text-xs font-medium"><i class="far fa-bookmark mr-1"></i> Save</button><a href="#" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition"><i class="fas fa-play mr-1"></i> Watch</a></div>`;
        card.querySelector('.save-btn').addEventListener('click', () => showNotification('Reminder Set!', `We'll notify you when "${item.title}" is about to broadcast.`));
        container.appendChild(card);
    });
}

export function initUI() {
    loadRSSFeed();
    loadRecommendations();
}