/*
 * Seasonals Plugin (Client Side Manager Logic)
 */

const ThemeConfigs = {
    snowflakes: {
        css: '/Seasonals/Resources/snowflakes.css',
        js: '/Seasonals/Resources/snowflakes.js',
        containerClass: 'snowflakes'
    },
    snowfall: {
        css: '/Seasonals/Resources/snowfall.css',
        js: '/Seasonals/Resources/snowfall.js',
        containerClass: 'snowfall-container'
    },
    snowstorm: {
        css: '/Seasonals/Resources/snowstorm.css',
        js: '/Seasonals/Resources/snowstorm.js',
        containerClass: 'snowstorm-container'
    },
    fireworks: {
        css: '/Seasonals/Resources/fireworks.css',
        js: '/Seasonals/Resources/fireworks.js',
        containerClass: 'fireworks'
    },
    halloween: {
        css: '/Seasonals/Resources/halloween.css',
        js: '/Seasonals/Resources/halloween.js',
        containerClass: 'halloween-container'
    },
    hearts: {
        css: '/Seasonals/Resources/hearts.css',
        js: '/Seasonals/Resources/hearts.js',
        containerClass: 'hearts-container'
    },
    christmas: {
        css: '/Seasonals/Resources/christmas.css',
        js: '/Seasonals/Resources/christmas.js',
        containerClass: 'christmas-container'
    },
    santa: {
        css: '/Seasonals/Resources/santa.css',
        js: '/Seasonals/Resources/santa.js',
        containerClass: 'santa-container'
    },
    autumn: {
        css: '/Seasonals/Resources/autumn.css',
        js: '/Seasonals/Resources/autumn.js',
        containerClass: 'autumn-container'
    },
    easter: {
        css: '/Seasonals/Resources/easter.css',
        js: '/Seasonals/Resources/easter.js',
        containerClass: 'easter-container'
    },
    summer: {
        css: '/Seasonals/Resources/summer.css',
        js: '/Seasonals/Resources/summer.js',
        containerClass: 'summer-container'
    },
    spring: {
        css: '/Seasonals/Resources/spring.css',
        js: '/Seasonals/Resources/spring.js',
        containerClass: 'spring-container'
    },
    none: {
        containerClass: 'none'
    },
};

const SeasonalSettingsManager = {
    initialized: false,
    config: null,

    init(config) {
        if (this.initialized) return;
        this.config = config;

        // Only inject settings if enabled on server by admin
        if (this.config && this.config.EnableClientSideToggle !== false) {
            this.injectSettingsIcon();
            this.initialized = true;
            console.log("Seasonals: Client-Side Settings Manager initialized.");
        }
    },

    getSetting(key, defaultValue) {
        const value = localStorage.getItem(`seasonals-${key}`);
        return value !== null ? value : defaultValue;
    },

    setSetting(key, value) {
        localStorage.setItem(`seasonals-${key}`, value);
    },

    createIcon() {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = 'paper-icon-button-light headerButton seasonal-settings-button';
        button.title = 'Seasonal Settings';
        // button.innerHTML = '<span class="material-icons">ac_unit</span>';
        // button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 52px; height: 24px; vertical-align: middle;">';
        button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
        button.style.verticalAlign = 'middle';

        button.addEventListener('click', (e) => {
            e.stopPropagation();
            this.toggleSettingsPopup(button);
        });

        return button;
    },

    injectSettingsIcon() {
        const observer = new MutationObserver((mutations, obs) => {
            const headerRight = document.querySelector('.headerRight');
            if (headerRight && !document.querySelector('.seasonal-settings-button')) {
                const icon = this.createIcon();
                headerRight.prepend(icon);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    },

    createPopup(anchorElement) {
        const existing = document.querySelector('.seasonal-settings-popup');
        if (existing) existing.remove();

        const popup = document.createElement('div');
        popup.className = 'seasonal-settings-popup dialog';

        Object.assign(popup.style, {
            position: 'fixed',
            zIndex: '10000',
            backgroundColor: '#202020',
            padding: '1em',
            borderRadius: '0.3em',
            boxShadow: '0 0 20px rgba(0,0,0,0.5)',
            minWidth: '200px',
            color: '#fff',
            maxWidth: '250px'
        });

        const rect = anchorElement.getBoundingClientRect();
        
        // Positioning logic
        let rightPos = window.innerWidth - rect.right;
        if (window.innerWidth < 450 || (window.innerWidth - rightPos) < 260) {
            popup.style.right = '1rem';
            popup.style.left = 'auto';
        } else {
            popup.style.right = `${rightPos}px`;
            popup.style.left = 'auto';
        }
        popup.style.top = `${rect.bottom + 10}px`;

        // Popup HTML
        let html = `
        <h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Seasonal Settings</h3>
        
        <div class="checkboxContainer checkboxContainer-withDescription" style="margin-bottom: 0.5em;">
            <label class="emby-checkbox-label">
                <input id="seasonal-enable-toggle" type="checkbox" is="emby-checkbox" class="emby-checkbox" />
                <span class="checkboxLabel">Enable Seasonals</span>
            </label>
        </div>

        <div class="selectContainer" style="margin-bottom: 0.5em;">
            <label class="selectLabel" for="seasonal-theme-select" style="margin-bottom: 0.5em; display: block; color: inherit;">Force Theme</label>
            <select id="seasonal-theme-select" class="emby-select" style="width: 100%; padding: 0.5em; background-color: #333; border: 1px solid #444; color: #fff; border-radius: 4px;">
                <option value="auto">Server-Side</option>
            </select>
        </div>
        `;

        popup.innerHTML = html;

        // Populate Select Options
        const themeSelect = popup.querySelector('#seasonal-theme-select');
        Object.keys(ThemeConfigs).forEach(key => {
            if (key === 'none') return;
            const option = document.createElement('option');
            option.value = key;
            option.textContent = key.charAt(0).toUpperCase() + key.slice(1);
            themeSelect.appendChild(option);
        });

        // Set Initial Values
        const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
        enabledCheckbox.checked = this.getSetting('enabled', 'true') === 'true';
        themeSelect.value = this.getSetting('theme', 'auto');

        // Event Listeners
        enabledCheckbox.addEventListener('change', (e) => {
            this.setSetting('enabled', e.target.checked);
            location.reload();
        });

        themeSelect.addEventListener('change', (e) => {
            this.setSetting('theme', e.target.value);
            location.reload();
        });

        // Close on outside click
        const closeHandler = (e) => {
            if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
                popup.remove();
                document.removeEventListener('click', closeHandler);
            }
        };
        setTimeout(() => document.addEventListener('click', closeHandler), 0);

        document.body.appendChild(popup);
    },

    toggleSettingsPopup(anchorElement) {
        const existing = document.querySelector('.seasonal-settings-popup');
        if (existing) {
            existing.remove();
        } else {
            this.createPopup(anchorElement);
        }
    }
};

const SeasonalsManager = {
    config: null,

    async init() {
        // Fetch Config
        try {
            const response = await fetch('/Seasonals/Config');
            if (response.ok) {
                this.config = await response.json();
                window.SeasonalsPluginConfig = this.config;
                console.log('Seasonals: Seasonals Config loaded:', this.config);
            }
        } catch (error) {
            console.error('Seasonals: Error fetching Seasonals config:', error);
        }

        // Initialize Settings UI
        SeasonalSettingsManager.init(this.config);

        // User Preference Check
        const isEnabled = SeasonalSettingsManager.getSetting('enabled', 'true') === 'true';
        if (!isEnabled) {
            console.log('Seasonals: Disabled by user preference.');
            return;
        }

        // Determine Theme
        const themeName = this.selectTheme();
        console.log(`Seasonals: Selected theme: ${themeName}`);

        if (!themeName || themeName === 'none') {
            return;
        }

        // Apply Theme
        this.applyTheme(themeName);
    },

    selectTheme() {
        // Check local override
        const forcedTheme = SeasonalSettingsManager.getSetting('theme', 'auto');
        if (forcedTheme !== 'auto') {
            console.log(`Seasonals: User forced theme: ${forcedTheme}`);
            return forcedTheme;
        }

        const automate = this.config ? this.config.AutomateSeasonSelection : true;
        const defaultTheme = this.config ? this.config.SelectedSeason : 'none';

        if (!automate) {
            return defaultTheme;
        }

        return this.determineCurrentThemeDate();
    },

    determineCurrentThemeDate() {
        const date = new Date();
        const month = date.getMonth();  // 0-11
        const day = date.getDate();     // 1-31
    
        if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
    
        if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
    
        if (month === 11 && day >= 22 && day <= 27) return 'santa'; // santa december 22 - 27
        // if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
    
        if (month === 11) return 'snowflakes'; // snowflakes december
        if (month === 0 || month === 1) return 'snowfall'; // snow january, february
        // if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
    
        if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
        
        //NOT IMPLEMENTED YET
        //if (month >= 2 && month <= 4) return 'spring';  // spring march, april, may

        //NOT IMPLEMENTED YET
        //if (month >= 5 && month <= 7) return 'summer';  // summer june, july, august

        if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
    
        if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
    
        return 'none'; // Fallback (no theme)
    },

    applyTheme(themeName) {
        const theme = ThemeConfigs[themeName];
        if (!theme) {
            console.error(`Seasonals: Theme "${themeName}" not found.`);
            return;
        }

        this.updateThemeContainer(theme.containerClass);

        if (theme.css) this.loadResource('css', theme.css);
        if (theme.js) this.loadResource('js', theme.js);
        
        console.log(`Seasonals: Theme "${themeName}" applied.`);
    },

    updateThemeContainer(containerClass) {
        let container = document.querySelector('.seasonals-container');
        if (!container) {
            container = document.createElement('div');
            container.className = 'seasonals-container';
            document.body.appendChild(container);
        }
        container.className = `seasonals-container ${containerClass}`;
    },

    // helper to resolve paths for local testing vs production
    resolvePath(path) {
        if (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
            return path.replace('/Seasonals/Resources/', './');
        }
        return path;
    },

    loadResource(type, path) {
        if (!path) return;
        
        if (type === 'css') {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = path;
            // link.href = resolvePath(cssPath);
            link.onerror = () => console.error(`Seasonals: Failed to load CSS: ${path}`);
            document.body.appendChild(link);
        } else if (type === 'js') {
            const script = document.createElement('script');
            script.src = path;
            // script.src = resolvePath(jsPath);
            script.defer = true;
            script.onerror = () => console.error(`Seasonals: Failed to load JS: ${path}`);
            document.body.appendChild(script);
        }
    }
};

SeasonalsManager.init();