document.addEventListener('DOMContentLoaded', () => {
    // Inject Canvas for background if it doesn't exist
    if (!document.getElementById('premiumParticleCanvas')) {
        const canvas = document.createElement('canvas');
        canvas.id = 'premiumParticleCanvas';
        document.body.prepend(canvas);
        
        // Initialize particle system if premium theme is active
        if (document.body.getAttribute('data-premium-theme') === 'true') {
            initPremiumParticleSystem();
        }
    }
});

// Global function to toggle theme, callable from Settings page
window.togglePremiumTheme = function(enable) {
    const isEnabled = enable === true;
    localStorage.setItem('app_premium_theme', isEnabled ? 'true' : 'false');
    document.body.setAttribute('data-premium-theme', isEnabled ? 'true' : 'false');
    
    if (isEnabled) {
        initPremiumParticleSystem();
    }
};

// --- Particle System (Lightweight Canvas) ---
let premiumParticlesInitialized = false;

function initPremiumParticleSystem() {
    if (premiumParticlesInitialized) return;
    premiumParticlesInitialized = true;

    const canvas = document.getElementById('premiumParticleCanvas');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    let width, height, particles;

    function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    }

    class Particle {
        constructor() {
            this.reset();
        }
        
        reset() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.size = Math.random() * 2 + 0.5;
            this.speedX = (Math.random() - 0.5) * 0.5;
            this.speedY = (Math.random() - 0.5) * 0.5;
            this.opacity = Math.random() * 0.4 + 0.1;
        }

        update() {
            this.x += this.speedX;
            this.y += this.speedY;

            if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
                this.reset();
            }
        }

        draw() {
            // Check if theme is still active before drawing
            if (document.body.getAttribute('data-premium-theme') !== 'true') return;

            // Simple white/grey particles for the bright premium theme
            ctx.fillStyle = `rgba(0, 0, 0, ${this.opacity * 0.4})`;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    function init() {
        resize();
        particles = [];
        const particleCount = Math.min(window.innerWidth / 15, 80); 
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }
    }

    function animate() {
        if (document.body.getAttribute('data-premium-theme') === 'true') {
            ctx.clearRect(0, 0, width, height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
        }
        requestAnimationFrame(animate);
    }

    window.addEventListener('resize', () => {
        if (document.body.getAttribute('data-premium-theme') === 'true') {
            resize();
            init();
        }
    });
    
    init();
    animate();
}