/**
 * Notice Banner System for MPV.Rocks Manager
 * Displays temporary notices from the server (e.g., Flatpak auto-install notice)
 * 
 * Features:
 * - Polls for pending notices on page load
 * - Shows dismissible banner at top of main content
 * - Auto-clears notice after dismissal
 */
(function() {
    'use strict';

    // Check for notice on page load
    document.addEventListener('DOMContentLoaded', checkForNotice);

    /**
     * Check for pending notice from server
     */
    async function checkForNotice() {
        try {
            const response = await fetch('/api/notice');
            if (!response.ok) return;

            const data = await response.json();
            if (data.notice) {
                showNoticeBanner(data.notice);
            }
        } catch (error) {
            console.error('[Notice] Failed to check for notice:', error);
        }
    }

    /**
     * Show the notice banner
     * @param {string} message - The notice message to display
     */
    function showNoticeBanner(message) {
        // Remove existing banner if present
        const existingBanner = document.getElementById('pending-notice-banner');
        if (existingBanner) {
            existingBanner.remove();
        }

        // Create banner element
        const banner = document.createElement('div');
        banner.id = 'pending-notice-banner';
        banner.className = 'bg-yellow-900/30 border border-yellow-600/50 rounded-lg p-4 mb-6';
        banner.innerHTML = `
            <div class="flex items-start gap-3">
                <i class="bx bx-info-circle text-yellow-500 text-xl mt-0.5 flex-shrink-0"></i>
                <div class="flex-1">
                    <p class="text-yellow-300 text-sm">${escapeHtml(message)}</p>
                </div>
                <button 
                    onclick="window.MPVRocksNotice.dismiss()"
                    class="text-yellow-500 hover:text-yellow-300 transition focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded"
                    aria-label="Dismiss notice"
                >
                    <i class="bx bx-x text-xl"></i>
                </button>
            </div>
        `;

        // Insert at top of main content
        const mainContent = document.getElementById('main-content');
        if (mainContent) {
            mainContent.insertBefore(banner, mainContent.firstChild);
        }
    }

    /**
     * Dismiss the notice banner and clear it from server
     */
    async function dismissNotice() {
        const banner = document.getElementById('pending-notice-banner');
        if (banner) {
            banner.remove();
        }

        // Clear notice on server
        try {
            await fetch('/api/notice', { method: 'DELETE' });
        } catch (error) {
            console.error('[Notice] Failed to clear notice:', error);
        }
    }

    /**
     * Escape HTML to prevent XSS
     * @param {string} text - Text to escape
     * @returns {string} Escaped text
     */
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Public API
    window.MPVRocksNotice = {
        show: showNoticeBanner,
        dismiss: dismissNotice,
        check: checkForNotice
    };
})();
