// Marker: Core Setup
import { LunaUnload, Tracer, ftch } from "@luna/core";
import { StyleTag, PlayState, observePromise, observe } from "@luna/lib";
import { settings, Settings } from "./Settings";

// Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3
import baseStyles from "file://styles.css?minify";
import playerBarHidden from "file://player-bar-hidden.css?minify";
import lyricsGlow from "file://lyrics-glow.css?minify";
import coverEverywhereCss from "file://cover-everywhere.css?minify";

// Core tracer and exports
export const { trace } = Tracer("[Radiant Lyrics]");
export { Settings };

// clean up resources
export const unloads = new Set<LunaUnload>();




// Marker: Styles and Settings Integration
// StyleTag instances for different CSS modules
const lyricsStyleTag = new StyleTag("RadiantLyrics-lyrics", unloads);
const baseStyleTag = new StyleTag("RadiantLyrics-base", unloads);
const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);

// Apply lyrics glow styles if enabled
if (settings.lyricsGlowEnabled) {
    lyricsGlowStyleTag.css = lyricsGlow;
}

// Update CSS variables for lyrics text glow based on settings
const updateRadiantLyricsTextGlow = function(): void {
    const root = document.documentElement;
    root.style.setProperty('--rl-glow-outer', `${settings.textGlow}px`);
    root.style.setProperty('--rl-glow-inner', '2px');
};


// Function to update styles when settings change
const updateRadiantLyricsStyles = function(): void {
    if (isHidden) {
        // Apply only base styles (button hiding), NOT separated lyrics styles
        // to avoid affecting lyrics scrolling behavior
        baseStyleTag.css = baseStyles;
        
        // Apply player bar styles based on setting
        if (!settings.playerBarVisible) {
            playerBarStyleTag.css = playerBarHidden;
        } else {
            playerBarStyleTag.remove();
        }
    }

    // Update lyrics glow based on setting (only if UI is not hidden to avoid interference)
    const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
    if (lyricsContainer && !isHidden) {
        if (settings.lyricsGlowEnabled) {
            lyricsContainer.classList.remove('lyrics-glow-disabled');
            lyricsGlowStyleTag.css = lyricsGlow;
            updateRadiantLyricsTextGlow();
        } else {
            lyricsContainer.classList.add('lyrics-glow-disabled');
            lyricsGlowStyleTag.remove();
        }
    } else if (!isHidden) {
        observePromise<HTMLElement>(unloads, '[class^="_lyricsContainer"]').then(el => {
            if (!el) return;
            if (settings.lyricsGlowEnabled) {
                el.classList.remove('lyrics-glow-disabled');
                lyricsGlowStyleTag.css = lyricsGlow;
                updateRadiantLyricsTextGlow();
            } else {
                el.classList.add('lyrics-glow-disabled');
                lyricsGlowStyleTag.remove();
            }
        }).catch(() => {});
    }

		// Track title glow toggle based on settings
		const trackTitleEl = document.querySelector('[data-test="now-playing-track-title"]') as HTMLElement | null;
		if (trackTitleEl) {
			if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
				trackTitleEl.classList.remove('rl-title-glow-disabled');
			} else {
				trackTitleEl.classList.add('rl-title-glow-disabled');
			}
		}
};




// Marker: UI Visibility Control
// UI state shared across features
var isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null;

const updateButtonStates = function(): void {
    const hideButton = document.querySelector('.hide-ui-button') as HTMLElement;
    const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
    
    if (hideButton) {
        if (settings.hideUIEnabled && !isHidden) {
            hideButton.style.display = 'flex';
            // Small delay to ensure display is set first, then fade in
            setTimeout(() => {
                hideButton.style.opacity = '1';
                hideButton.style.visibility = 'visible';
                hideButton.style.pointerEvents = 'auto';
            }, 50);
        } else {
            // Hide UI button immediately when clicked - (couldn't get the fade to work)
            hideButton.style.display = 'none';
            hideButton.style.opacity = '0';
            hideButton.style.visibility = 'hidden';
            hideButton.style.pointerEvents = 'none';
        }
    }
    if (unhideButton) {
        // Clear any existing auto-fade timeout
        if (unhideButtonAutoFadeTimeout) {
            window.clearTimeout(unhideButtonAutoFadeTimeout);
            unhideButtonAutoFadeTimeout = null;
        }
        
        if (settings.hideUIEnabled && isHidden) {
            unhideButton.style.display = 'flex';
            // Remove the hide-immediately class and let it fade in smoothly
            unhideButton.classList.remove('hide-immediately');
            unhideButton.classList.remove('auto-faded');
            // Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk)
            setTimeout(() => {
                unhideButton.style.opacity = '1';
                unhideButton.style.visibility = 'visible';
                unhideButton.style.pointerEvents = 'auto';
                
                // Set up auto-fade after 2 seconds
                unhideButtonAutoFadeTimeout = window.setTimeout(() => {
                    if (isHidden && unhideButton && !unhideButton.matches(':hover')) {
                        unhideButton.classList.add('auto-faded');
                    }
                }, 2000);
            }, 50);
        } else {
            // Smooth fade out for Unhide UI button
            unhideButton.style.opacity = '0';
            unhideButton.style.visibility = 'hidden';
            unhideButton.style.pointerEvents = 'none';
            unhideButton.classList.remove('auto-faded');
            // Keep display: flex to maintain transitions, then hide after fade
            setTimeout(() => {
                if (unhideButton.style.opacity === '0') {
                    unhideButton.style.display = 'none';
                }
            }, 500); // Wait for transition to complete
        }
    }
};


// Toggle hide/unhide UI
const toggleRadiantLyrics = function(): void {
    const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
    if (isHidden) {
        const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
        if (unhideButton) unhideButton.classList.add('hide-immediately');
        isHidden = !isHidden;
        if (nowPlayingContainer) nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden');
        document.body.classList.remove('radiant-lyrics-ui-hidden');
        setTimeout(() => {
            if (!isHidden) {
                lyricsStyleTag.remove();
                baseStyleTag.remove();
                playerBarStyleTag.remove();
            }
        }, 500);
        updateButtonStates();
    } else {
        isHidden = !isHidden;
        updateButtonStates();
        setTimeout(() => {
            updateRadiantLyricsStyles();
            if (nowPlayingContainer) nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden');
            document.body.classList.add('radiant-lyrics-ui-hidden');
        }, 50);
    }
};


// Create buttons
const createHideUIButton = function(): void {
    setTimeout(() => {
        if (!settings.hideUIEnabled) return;
        const fullscreenButton = document.querySelector('[data-test="request-fullscreen"]');
        if (!fullscreenButton || !fullscreenButton.parentElement) {
            setTimeout(() => createHideUIButton(), 1000);
            return;
        }
        if (document.querySelector('.hide-ui-button')) return;
        const buttonContainer = fullscreenButton.parentElement;
        const hideUIButton = document.createElement("button");
        hideUIButton.className = 'hide-ui-button';
        hideUIButton.setAttribute('aria-label', 'Hide UI');
        hideUIButton.setAttribute('title', 'Hide UI');
        hideUIButton.textContent = 'Hide UI';
        hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)';
        hideUIButton.style.color = 'black';
        hideUIButton.style.border = 'none';
        hideUIButton.style.borderRadius = '12px';
        hideUIButton.style.height = '40px';
        hideUIButton.style.padding = '0 12px';
        hideUIButton.style.marginLeft = '8px';
        hideUIButton.style.cursor = 'pointer';
        hideUIButton.style.display = 'flex';
        hideUIButton.style.alignItems = 'center';
        hideUIButton.style.justifyContent = 'center';
        hideUIButton.style.fontSize = '12px';
        hideUIButton.style.fontWeight = '600';
        hideUIButton.style.whiteSpace = 'nowrap';
        hideUIButton.style.transition = 'opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out';
        hideUIButton.style.opacity = '0';
        hideUIButton.style.visibility = 'hidden';
        hideUIButton.style.pointerEvents = 'none';
        hideUIButton.addEventListener('mouseenter', () => { hideUIButton.style.backgroundColor = 'lightgray'; });
        hideUIButton.addEventListener('mouseleave', () => { hideUIButton.style.backgroundColor = 'var(--wave-color-solid-accent-fill)'; });
        hideUIButton.onclick = toggleRadiantLyrics;
        buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling);
        setTimeout(() => {
            if (settings.hideUIEnabled && !isHidden) {
                hideUIButton.style.opacity = '1';
                hideUIButton.style.visibility = 'visible';
                hideUIButton.style.pointerEvents = 'auto';
            }
        }, 100);
    }, 1000);
};


const createUnhideUIButton = function(): void {
    setTimeout(() => {
        if (!settings.hideUIEnabled) return;
        if (document.querySelector('.unhide-ui-button')) return;
        const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
        if (!nowPlayingContainer) {
            setTimeout(() => createUnhideUIButton(), 1000);
            return;
        }
        const unhideUIButton = document.createElement("button");
        unhideUIButton.className = 'unhide-ui-button';
        unhideUIButton.setAttribute('aria-label', 'Unhide UI');
        unhideUIButton.setAttribute('title', 'Unhide UI');
        unhideUIButton.textContent = 'Unhide';
        unhideUIButton.style.cssText = `position: absolute; top: 10px; right: 10px; background-color: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; height: 40px; padding: 0 12px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: all 0.5s ease-in-out; font-size: 12px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none;`;
        unhideUIButton.addEventListener('mouseenter', () => { unhideUIButton.style.backgroundColor = 'rgba(255,255,255,0.3)'; unhideUIButton.style.transform = 'scale(1.05)'; unhideUIButton.classList.remove('auto-faded'); });
        unhideUIButton.addEventListener('mouseleave', () => { unhideUIButton.style.backgroundColor = 'rgba(255,255,255,0.2)'; unhideUIButton.style.transform = 'scale(1)'; window.setTimeout(() => { if (isHidden && !unhideUIButton.matches(':hover')) { unhideUIButton.classList.add('auto-faded'); } }, 2000); });
        unhideUIButton.onclick = toggleRadiantLyrics;
        nowPlayingContainer.appendChild(unhideUIButton);
        updateButtonStates();
    }, 1500);
};




// Marker: Background Rendering
// Variable setup
let globalSpinningBgStyleTag: StyleTag | null = null;
let globalBackgroundContainer: HTMLElement | null = null;
let globalBackgroundImage: HTMLImageElement | null = null;
let globalBlackBg: HTMLElement | null = null;
let currentGlobalCoverSrc: string | null = null;
let lastUpdateTime = 0;
const getUpdateThrottle = () => (settings.performanceMode ? 1500 : 500);

// Now Playing background caching
let nowPlayingBackgroundContainer: HTMLElement | null = null;
let nowPlayingBackgroundImage: HTMLImageElement | null = null;
let nowPlayingBlackBg: HTMLElement | null = null;
let nowPlayingGradientOverlay: HTMLElement | null = null;
let currentNowPlayingCoverSrc: string | null = null;
let spinAnimationAdded = false;


// Update Cover Art background for Now Playing and Global
function updateCoverArtBackground(method: number = 0): void {
    if (method === 1) {
        setTimeout(() => {
            updateCoverArtBackground();
            return;
        }, 2000);
    }

    let coverArtImageElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement;
    let coverArtImageSrc: string | null = null;

    if (coverArtImageElement) {
        coverArtImageSrc = coverArtImageElement.src;
        // Use higher resolution for better quality, but consider performance mode
        const targetRes = settings.performanceMode ? '640x640' : '1280x1280';
        coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, targetRes);
        if (coverArtImageElement.src !== coverArtImageSrc) {
            coverArtImageElement.src = coverArtImageSrc;
        }
    } else {
        const videoElement = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement;
        if (videoElement) {
            coverArtImageSrc = videoElement.getAttribute("poster");
            if (coverArtImageSrc) {
                const targetRes = settings.performanceMode ? '640x640' : '1280x1280';
                coverArtImageSrc = coverArtImageSrc.replace(/\d+x\d+/, targetRes);
            }
        } else {
            cleanUpDynamicArt();
            return;
        }
    }

    // Update backgrounds when we have a valid cover art source
    if (coverArtImageSrc) {
        // Apply global spinning background if enabled
        if (settings.spinningCoverEverywhere) {
            applyGlobalSpinningBackground(coverArtImageSrc);
        }
        
        // Apply spinning CoverArt background to the Now Playing container - OPTIMIZED
        const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
        if (nowPlayingContainerElement) {
            // Create DOM structure if it doesn't exist (REUSE ELEMENTS)
            if (!nowPlayingBackgroundContainer || !nowPlayingContainerElement.contains(nowPlayingBackgroundContainer)) {
                // Clean up any old elements first
                nowPlayingContainerElement.querySelectorAll('.now-playing-background-image, .now-playing-black-bg, .now-playing-gradient-overlay').forEach(el => el.remove());
                
                // Create container
                nowPlayingBackgroundContainer = document.createElement('div');
                nowPlayingBackgroundContainer.className = 'now-playing-background-container';
                nowPlayingBackgroundContainer.style.cssText = `
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -3;
                    pointer-events: none;
                    overflow: hidden;
                `;
                nowPlayingContainerElement.appendChild(nowPlayingBackgroundContainer);

                // Create black background layer
                nowPlayingBlackBg = document.createElement('div');
                nowPlayingBlackBg.className = 'now-playing-black-bg';
                nowPlayingBlackBg.style.cssText = `
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: #000;
                    z-index: -2;
                    pointer-events: none;
                `;
                nowPlayingBackgroundContainer.appendChild(nowPlayingBlackBg);

                // Create background image
                nowPlayingBackgroundImage = document.createElement('img');
                nowPlayingBackgroundImage.className = 'now-playing-background-image';
                nowPlayingBackgroundImage.style.cssText = `
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    object-fit: cover;
                    z-index: -1;
                    transform-origin: center center;
                `;
                nowPlayingBackgroundContainer.appendChild(nowPlayingBackgroundImage);

                // Create gradient overlay
                nowPlayingGradientOverlay = document.createElement('div');
                nowPlayingGradientOverlay.className = 'now-playing-gradient-overlay';
                nowPlayingGradientOverlay.style.cssText = `
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%);
                    z-index: -1;
                    pointer-events: none;
                `;
                nowPlayingBackgroundContainer.appendChild(nowPlayingGradientOverlay);
            }

            // Update image source efficiently
            if (nowPlayingBackgroundImage && nowPlayingBackgroundImage.src !== coverArtImageSrc) {
                nowPlayingBackgroundImage.src = coverArtImageSrc;
                currentNowPlayingCoverSrc = coverArtImageSrc;
            }

            // Apply performance-optimized settings
            if (nowPlayingBackgroundImage) {
                if (settings.performanceMode) {
                    // Performance mode with spinning enabled
                    const blur = Math.min(settings.backgroundBlur, 20);
                    const contrast = Math.min(settings.backgroundContrast, 150);
                    if (nowPlayingBackgroundImage.style.width !== '70vw') nowPlayingBackgroundImage.style.width = '70vw';
                    if (nowPlayingBackgroundImage.style.height !== '70vh') nowPlayingBackgroundImage.style.height = '70vh';
                    const filt = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`;
                    if (nowPlayingBackgroundImage.style.filter !== filt) nowPlayingBackgroundImage.style.filter = filt;
                    const anim = settings.spinningArtEnabled ? `spin ${settings.spinSpeed}s linear infinite` : 'none';
                    const wc = settings.spinningArtEnabled ? 'transform' : 'auto';
                    if (nowPlayingBackgroundImage.style.animation !== anim) nowPlayingBackgroundImage.style.animation = anim;
                    if (nowPlayingBackgroundImage.style.willChange !== wc) nowPlayingBackgroundImage.style.willChange = wc;
                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                } else {
                    // Normal mode
                    if (nowPlayingBackgroundImage.style.width !== '90vw') nowPlayingBackgroundImage.style.width = '90vw';
                    if (nowPlayingBackgroundImage.style.height !== '90vh') nowPlayingBackgroundImage.style.height = '90vh';
                    const filt = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
                    if (nowPlayingBackgroundImage.style.filter !== filt) nowPlayingBackgroundImage.style.filter = filt;
                    const anim = settings.spinningArtEnabled ? `spin ${settings.spinSpeed}s linear infinite` : 'none';
                    const wc = settings.spinningArtEnabled ? 'transform' : 'auto';
                    if (nowPlayingBackgroundImage.style.animation !== anim) nowPlayingBackgroundImage.style.animation = anim;
                    if (nowPlayingBackgroundImage.style.willChange !== wc) nowPlayingBackgroundImage.style.willChange = wc;
                    nowPlayingBackgroundImage.classList.remove('performance-mode-static');
                }
            }

            // Add keyframe animation only once
            if (!spinAnimationAdded) {
                const styleSheet = document.createElement('style');
                styleSheet.id = 'spinAnimation';
                styleSheet.textContent = `
                    @keyframes spin {
                        from { transform: translate(-50%, -50%) rotate(0deg); }
                        to { transform: translate(-50%, -50%) rotate(360deg); }
                    }
                `;
                document.head.appendChild(styleSheet);
                spinAnimationAdded = true;
            }
        }
    }
}


// Function to apply spinning background to the entire app (cover everywhere)
const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
    const appContainer = document.querySelector('[data-test="main"]') as HTMLElement;
    
    if (!settings.spinningCoverEverywhere) {
        cleanUpGlobalSpinningBackground();
        return;
    }

    // Throttle updates to prevent excessive DOM manipulation
    const now = Date.now();
    if (now - lastUpdateTime < getUpdateThrottle() && currentGlobalCoverSrc === coverArtImageSrc) {
        return;
    }
    lastUpdateTime = now;
    currentGlobalCoverSrc = coverArtImageSrc;

    // Add StyleTag if not present
    if (!globalSpinningBgStyleTag) {
        globalSpinningBgStyleTag = new StyleTag("RadiantLyrics-global-spinning-bg", unloads, coverEverywhereCss);
    }

    if (!appContainer) return;

    // Create container structure if it doesn't exist (REUSE DOM ELEMENTS)
    if (!globalBackgroundContainer) {
        globalBackgroundContainer = document.createElement('div');
        globalBackgroundContainer.className = 'global-background-container';
        globalBackgroundContainer.style.cssText = `
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: -3;
            pointer-events: none;
            overflow: hidden;
        `;
        appContainer.appendChild(globalBackgroundContainer);

        // Create black background layer
        globalBlackBg = document.createElement('div');
        globalBlackBg.className = 'global-spinning-black-bg';
        globalBackgroundContainer.appendChild(globalBlackBg);

        // Create image element
        globalBackgroundImage = document.createElement('img');
        globalBackgroundImage.className = 'global-spinning-image';
        globalBackgroundImage.style.cssText = `
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            z-index: -1;
            will-change: transform;
            transform-origin: center center;
        `;
        globalBackgroundContainer.appendChild(globalBackgroundImage);
    }

    // Update image source efficiently
    if (globalBackgroundImage && globalBackgroundImage.src !== coverArtImageSrc) {
        globalBackgroundImage.src = coverArtImageSrc;
    }

    // Apply performance-optimized settings
    if (globalBackgroundImage) {
        // Performance mode optimizations
        if (settings.performanceMode) {
            // Performance mode with spinning enabled
            globalBackgroundImage.style.width = '100vw';
            globalBackgroundImage.style.height = '100vh';
            globalBackgroundImage.style.filter = `blur(${Math.min(settings.backgroundBlur, 20)}px) brightness(${settings.backgroundBrightness / 100}) contrast(${Math.min(settings.backgroundContrast, 150)}%)`;
            if (settings.spinningArtEnabled) {
                globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
                globalBackgroundImage.style.willChange = 'transform';
            }
            else {
                globalBackgroundImage.style.animation = 'none';
                globalBackgroundImage.style.willChange = 'auto';
            }
            globalBackgroundImage.classList.remove('performance-mode-static');
        } else {
            // Normal mode
            globalBackgroundImage.style.width = '150vw';
            globalBackgroundImage.style.height = '150vh';
            globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
            if (settings.spinningArtEnabled) {
                globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
                globalBackgroundImage.style.willChange = 'transform';
            }
            else {
                globalBackgroundImage.style.animation = 'none';
                globalBackgroundImage.style.willChange = 'auto';
            }
            globalBackgroundImage.classList.remove('performance-mode-static');
        }
    }
};


// cleanup function
const cleanUpGlobalSpinningBackground = function(): void {
    if (globalBackgroundContainer && globalBackgroundContainer.parentNode) {
        globalBackgroundContainer.parentNode.removeChild(globalBackgroundContainer);
    }
    globalBackgroundContainer = null;
    globalBackgroundImage = null;
    globalBlackBg = null;
    currentGlobalCoverSrc = null;
    
    if (globalSpinningBgStyleTag) {
        globalSpinningBgStyleTag.remove();
        globalSpinningBgStyleTag = null;
    }
};


// Function to update global background when settings change
const updateRadiantLyricsGlobalBackground = function(): void {
    // Apply performance mode class to document body
    if (settings.performanceMode) {
        document.body.classList.add('performance-mode');
    } else {
        document.body.classList.remove('performance-mode');
    }
    
    if (settings.spinningCoverEverywhere) {
        // Get current cover art and apply global background
        updateCoverArtBackground();
    } else {
        cleanUpGlobalSpinningBackground();
    }
};


// Function to update Now Playing background when settings change
const updateRadiantLyricsNowPlayingBackground = function(): void {
    const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image');
    nowPlayingBackgroundImages.forEach((img: Element) => {
        const imgElement = img as HTMLElement;
        
        // Default values when settings don't affect Now Playing
        const defaultBlur = 80;
        const defaultBrightness = 40;
        const defaultContrast = 120;
        const defaultSpinSpeed = 45;
        
        let blur, brightness, contrast, spinSpeed;
        
        if (settings.settingsAffectNowPlaying) {
            blur = settings.backgroundBlur;
            brightness = settings.backgroundBrightness;
            contrast = settings.backgroundContrast;
            spinSpeed = settings.spinSpeed;
        } else {
            blur = defaultBlur;
            brightness = defaultBrightness;
            contrast = defaultContrast;
            spinSpeed = defaultSpinSpeed;
        }
        
        // Performance mode optimizations
        if (settings.performanceMode) {
            // Reduce blur and effects for better performance, but keep spinning
            blur = Math.min(blur, 20);
            contrast = Math.min(contrast, 150);
            if (settings.spinningArtEnabled) {
            imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
            imgElement.style.willChange = 'transform';
            }
            else {
                imgElement.style.animation = 'none';
                imgElement.style.willChange = 'auto';
            }
            imgElement.classList.remove('performance-mode-static');
        } else {
            if (settings.spinningArtEnabled) {
            imgElement.style.animation = `spin ${spinSpeed}s linear infinite`;
            imgElement.style.willChange = 'transform';
            }
            else {
                imgElement.style.animation = 'none';
                imgElement.style.willChange = 'auto';
            }
            imgElement.classList.remove('performance-mode-static');
        }
        
        imgElement.style.filter = `blur(${blur}px) brightness(${brightness / 100}) contrast(${contrast}%)`;
    });
};

// Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
(window as any).updateRadiantLyricsTextGlow = updateRadiantLyricsTextGlow;


const cleanUpDynamicArt = function (): void {
    // Clean up cached Now Playing elements
    if (nowPlayingBackgroundContainer && nowPlayingBackgroundContainer.parentNode) {
        nowPlayingBackgroundContainer.parentNode.removeChild(nowPlayingBackgroundContainer);
    }
    nowPlayingBackgroundContainer = null;
    nowPlayingBackgroundImage = null;
    nowPlayingBlackBg = null;
    nowPlayingGradientOverlay = null;
    currentNowPlayingCoverSrc = null;
    
    // Clean up any remaining elements (fallback)
    const nowPlayingBackgroundImages = document.getElementsByClassName("now-playing-background-image");
    Array.from(nowPlayingBackgroundImages).forEach((element) => {
        element.remove();
    });
    
    // Also clean up global spinning backgrounds
    cleanUpGlobalSpinningBackground();
};


// Reduce work when tab hidden: pause animations; restore on visible
document.addEventListener('visibilitychange', () => {
    const isHiddenDoc = document.hidden;
    const images = document.querySelectorAll('.global-spinning-image, .now-playing-background-image');
    images.forEach(img => {
        const el = img as HTMLElement;
        if (isHiddenDoc) {
            // Pause animation but keep state
            if (el.style.animationPlayState !== 'paused') el.style.animationPlayState = 'paused';
            if (el.style.willChange !== 'auto') el.style.willChange = 'auto';
        } else {
            if (el.style.animationPlayState !== 'running') el.style.animationPlayState = 'running';
            if (el.classList.contains('global-spinning-image') || el.classList.contains('now-playing-background-image')) {
                if (el.style.willChange !== 'transform') el.style.willChange = 'transform';
            }
        }
    });
});

// Apply initial performance mode class
if (settings.performanceMode) {
    document.body.classList.add('performance-mode');
}

// Initialize text glow CSS variables on load
updateRadiantLyricsTextGlow();

updateCoverArtBackground(1);

// Add cleanup to unloads
unloads.add(() => {
    cleanUpDynamicArt();

    // Clean up auto-fade timeout
    if (unhideButtonAutoFadeTimeout) {
        window.clearTimeout(unhideButtonAutoFadeTimeout);
        unhideButtonAutoFadeTimeout = null;
    }

    // Clean up our custom buttons
    const hideButton = document.querySelector('.hide-ui-button');
    if (hideButton && hideButton.parentNode) {
        hideButton.parentNode.removeChild(hideButton);
    }
    
    const unhideButton = document.querySelector('.unhide-ui-button');
    if (unhideButton && unhideButton.parentNode) {
        unhideButton.parentNode.removeChild(unhideButton);
    }

    // Clean up spin animations
    const spinAnimationStyle = document.querySelector('#spinAnimation');
    if (spinAnimationStyle && spinAnimationStyle.parentNode) {
        spinAnimationStyle.parentNode.removeChild(spinAnimationStyle);
    }
    
    // Clean up global spinning backgrounds
    cleanUpGlobalSpinningBackground();
});




// Marker: Observers
// Shared observer-based hooks and polling fallbacks
const observeTrackChanges = (): void => {
    let lastTrackId: string | null = null;
    let checkCount = 0;
    let currentInterval = 500;
    const checkTrackChange = () => {
        const currentTrackId = PlayState.playbackContext?.actualProductId;
        if (currentTrackId && currentTrackId !== lastTrackId) {
            lastTrackId = currentTrackId;
            updateCoverArtBackground();
            checkCount = 0;
            currentInterval = 250;
        }
        checkCount++;
        if (checkCount > 10 && currentInterval < 1000) currentInterval = Math.min(currentInterval * 1.2, 1000);
    };
    const intervalId = setInterval(() => checkTrackChange(), currentInterval);
    unloads.add(() => clearInterval(intervalId));
    const currentTrackId = PlayState.playbackContext?.actualProductId;
    if (currentTrackId) {
        lastTrackId = currentTrackId;
        setTimeout(() => updateCoverArtBackground(), 100);
    }
};


function setupHeaderObserver(): void {
    const existing = document.querySelector('[data-test="header-container"]');
    if (existing && !document.querySelector('.hide-ui-button')) createHideUIButton();
    observe<HTMLElement>(unloads, '[data-test="header-container"]', () => {
        if (!document.querySelector('.hide-ui-button')) createHideUIButton();
    });
}


function setupNowPlayingObserver(): void {
    const existing = document.querySelector('[class*="_nowPlayingContainer"]');
    if (existing && !document.querySelector('.unhide-ui-button')) createUnhideUIButton();
    observe<HTMLElement>(unloads, '[class*="_nowPlayingContainer"]', () => {
        if (!document.querySelector('.unhide-ui-button')) createUnhideUIButton();
    });
}

function setupTrackTitleObserver(): void {
	const trackTitleEl = document.querySelector('[data-test="now-playing-track-title"]') as HTMLElement | null;
	if (trackTitleEl) {
		if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
			trackTitleEl.classList.remove('rl-title-glow-disabled');
		} else {
			trackTitleEl.classList.add('rl-title-glow-disabled');
		}
	}
	observe<HTMLElement>(unloads, '[data-test="now-playing-track-title"]', (el) => {
		if (!el) return;
		if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
			el.classList.remove('rl-title-glow-disabled');
		} else {
			el.classList.add('rl-title-glow-disabled');
		}
	});
}

// Initialize the button creation and observers (non-polling)
setupHeaderObserver();
setupNowPlayingObserver();
setupTrackTitleObserver();
observeTrackChanges();