// Background Image Detector for Left Price Section Transparency
class BackgroundImageDetector {
    constructor() {
        this.chartContainer = document.getElementById('chartContainer');
        this.chartCanvas = document.getElementById('chartCanvas');
        this.mainContent = document.querySelector('.main-content');
        this.leftPriceSection = document.querySelector('.left-price-section');
        
        if (this.chartContainer && this.mainContent) {
            this.init();
        }
    }
    
    init() {
        // Check for background image changes
        this.observer = new MutationObserver((mutations) => {
            this.checkBackgroundImage();
        });
        
        // Observe style changes on multiple elements
        const elementsToObserve = [
            { element: this.chartContainer, name: 'chartContainer' },
            { element: this.chartCanvas, name: 'chartCanvas' },
            { element: this.mainContent, name: 'mainContent' },
            { element: document.body, name: 'body' }
        ];
        
        elementsToObserve.forEach(({ element, name }) => {
            if (element) {
                this.observer.observe(element, {
                    attributes: true,
                    attributeFilter: ['style', 'class'],
                    attributeOldValue: true
                });
            }
        });
        
        // Initial check
        this.checkBackgroundImage();
        
        // Check periodically as backup
        setInterval(() => {
            this.checkBackgroundImage();
        }, 3000);
        
        // Listen for image upload events
        document.addEventListener('backgroundImageSet', (event) => {
            setTimeout(() => this.checkBackgroundImage(), 100);
        });
        
        // Listen for image removal events
        document.addEventListener('backgroundImageRemoved', (event) => {
            setTimeout(() => this.checkBackgroundImage(), 100);
        });
        
        // Listen for canvas changes
        if (this.chartCanvas) {
            const canvasObserver = new MutationObserver(() => {
                this.checkBackgroundImage();
            });
            canvasObserver.observe(this.chartCanvas, {
                attributes: true,
                attributeFilter: ['style']
            });
        }
    }
    
    checkBackgroundImage() {
        const hasBackgroundImage = this.hasBackgroundImageSet();
        const currentClasses = this.mainContent?.className || '';
        const hasClass = currentClasses.includes('chart-has-background');
        
        if (hasBackgroundImage && !hasClass) {
            this.mainContent?.classList.add('chart-has-background');
            
            // Also add directly to left price section as backup
            if (this.leftPriceSection) {
                this.leftPriceSection.style.background = 'transparent';
            }
        } else if (!hasBackgroundImage && hasClass) {
            this.mainContent?.classList.remove('chart-has-background');
            
            // Reset left price section background
            if (this.leftPriceSection) {
                this.leftPriceSection.style.background = '';
            }
        }
    }
    
    hasBackgroundImageSet() {
        const checks = [];
        
        // Check main-content (new location)
        if (this.mainContent) {
            const mainStyle = window.getComputedStyle(this.mainContent);
            const mainBgImage = mainStyle.backgroundImage;
            checks.push({
                element: 'main-content',
                backgroundImage: mainBgImage,
                hasImage: mainBgImage && mainBgImage !== 'none'
            });
            
            // Check inline style
            const mainInlineStyle = this.mainContent.style.backgroundImage;
            checks.push({
                element: 'main-content (inline)',
                backgroundImage: mainInlineStyle,
                hasImage: mainInlineStyle && mainInlineStyle !== 'none' && mainInlineStyle !== ''
            });
        }
        
        const hasAnyBackground = checks.some(check => check.hasImage);
        
        return hasAnyBackground;
    }
    
    // Manual trigger method for testing
    manualCheck() {
        this.checkBackgroundImage();
    }
    
    // Force transparency on/off for testing
    forceTransparency(enable = true) {
        if (enable) {
            this.mainContent?.classList.add('chart-has-background');
            if (this.leftPriceSection) {
                this.leftPriceSection.style.background = 'transparent';
            }
        } else {
            this.mainContent?.classList.remove('chart-has-background');
            if (this.leftPriceSection) {
                this.leftPriceSection.style.background = '';
            }
        }
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    window.backgroundImageDetector = new BackgroundImageDetector();
});

// Also initialize if DOM is already loaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        window.backgroundImageDetector = new BackgroundImageDetector();
    });
} else {
    window.backgroundImageDetector = new BackgroundImageDetector();
}