class OpacityController {
    constructor() {
        this.opacitySlider = document.getElementById('opacity-slider');
        this.opacityValue = document.getElementById('opacity-value');
        this.mainContent = document.querySelector('.main-content');
        
        this.init();
    }

    init() {
        // Load saved opacity on page load
        this.loadOpacity();
        
        // Listen for opacity changes
        if (this.opacitySlider) {
            this.opacitySlider.addEventListener('input', (e) => {
                this.updateOpacity(e.target.value);
            });
        }
        
        // Listen for background image changes
        document.addEventListener('backgroundImageSet', () => {
            this.loadOpacity();
        });
    }

    updateOpacity(value) {
        const opacity = value / 100;
        
        // Update CSS variable
        document.documentElement.style.setProperty('--bg-opacity', opacity);
        
        // Update display
        if (this.opacityValue) {
            this.opacityValue.textContent = `${value}%`;
        }
        
        // Update slider if not already set
        if (this.opacitySlider && this.opacitySlider.value != value) {
            this.opacitySlider.value = value;
        }
        
        // Save to localStorage
        localStorage.setItem('chart-bg-opacity', value);
        
        // Trigger canvas redraw if image uploader exists
        if (window.imageUploader) {
            window.imageUploader.updateChartBackground();
        }
    }

    loadOpacity() {
        const savedOpacity = localStorage.getItem('chart-bg-opacity');
        const hasBackgroundImage = getComputedStyle(document.documentElement).getPropertyValue('--bg-image').trim() !== '';
        
        if (savedOpacity !== null && hasBackgroundImage) {
            // Set slider value
            if (this.opacitySlider) {
                this.opacitySlider.value = savedOpacity;
            }
            
            // Apply opacity
            this.updateOpacity(savedOpacity);
            
            // Add chart-has-background class
            if (this.mainContent) {
                this.mainContent.classList.add('chart-has-background');
            }
        } else {
            // No saved opacity or no background image - set slider to 0
            if (this.opacitySlider) {
                this.opacitySlider.value = 0;
            }
            if (this.opacityValue) {
                this.opacityValue.textContent = '0%';
            }
            
            // Remove chart-has-background class
            if (this.mainContent) {
                this.mainContent.classList.remove('chart-has-background');
            }
        }
    }

    clearOpacity() {
        // Remove from localStorage
        localStorage.removeItem('chart-bg-opacity');
        
        // Reset slider
        if (this.opacitySlider) {
            this.opacitySlider.value = 0;
        }
        
        // Reset display
        if (this.opacityValue) {
            this.opacityValue.textContent = '0%';
        }
        
        // Remove CSS variables
        document.documentElement.style.removeProperty('--bg-opacity');
        document.documentElement.style.removeProperty('--bg-image');
        
        // Remove chart-has-background class
        if (this.mainContent) {
            this.mainContent.classList.remove('chart-has-background');
        }
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.opacityController = new OpacityController();
});