scripts/ui.js

// scripts/ui.js

// --- DOM Element Getters ---
const getElement = (id) => document.getElementById(id);

// --- State ---
const streamingData = [
    // ... (keep the full streamingData array here)
];
const rssFeedData = {
    // ... (keep the full rssFeedData object here)
};

// --- Functions ---

function showNotification(title, message) {
    const notification = getElement('notification');
    getElement('notification-title').textContent = title;
    getElement('notification-message').textContent = message;

    notification.classList.remove('hidden');
    notification.classList.add('show');

    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => notification.classList.add('hidden'), 300);
    }, 3000);
}

function saveShow(title, broadcastTime) {
    console.log(`Saved show: ${title}`);
    showNotification("Reminder Set!", `We'll notify you when "${title}" is about to broadcast.`);

    if (broadcastTime) {
        const broadcastDate = new Date(broadcastTime);
        const now = new Date();
        if (broadcastDate > now) {
            const timeUntilBroadcast = broadcastDate - now;
            setTimeout(() => {
                showNotification("Starting Soon!", `"${title}" will begin broadcasting in 30 minutes!`);
            }, timeUntilBroadcast - (30 * 60 * 1000));
        }
    }
}

function loadRecommendations(filter = 'all') {
    const container = getElement('recommendations-container');
    container.innerHTML = '';
    let filteredData = streamingData;
    // ... (keep the filtering logic here)

    filteredData.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';
        // ... (keep the card.innerHTML logic here)
        container.appendChild(card);
    });
}

function loadRSSFeed(filter) {
    const container = getElement('rss-feed');
    container.innerHTML = '';
    const feedItems = rssFeedData[filter] || rssFeedData.all;
    feedItems.forEach(item => {
        const feedItem = document.createElement('div');
        // ... (keep the rss item creation logic here)
        container.appendChild(feedItem);
    });
}

function setupTab(tabId, sectionId) {
    getElement(tabId).addEventListener('click', () => {
        // Deactivate all tabs and hide all sections
        document.querySelectorAll('.tab').forEach(t => t.classList.replace('active', 'inactive'));
        document.querySelectorAll('.production-panel > div[id$="-section"]').forEach(s => s.classList.add('hidden'));

        // Activate the selected tab and show the corresponding section
        getElement(tabId).classList.replace('inactive', 'active');
        getElement(sectionId).classList.remove('hidden');
    });
}

// --- Initialization ---

export function initUI() {
    loadRecommendations();
    loadRSSFeed('all');

    // Production panel toggle
    getElement('production-button').addEventListener('click', () => {
        getElement('production-panel').classList.toggle('open');
    });

    // RSS feed filter buttons
    document.querySelectorAll('.rss-filter-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.rss-filter-btn').forEach(b => b.classList.replace('bg-indigo-100', 'bg-gray-100'));
            this.classList.replace('bg-gray-100', 'bg-indigo-100');
            loadRSSFeed(this.dataset.filter);
        });
    });

    // Setup production panel tabs
    setupTab('record-tab', 'record-section');
    setupTab('edit-tab', 'edit-section');
    setupTab('share-tab', 'share-section');
    setupTab('rank-tab', 'rank-section');
}