// Alternative Transparency Controller - Direct Style Monitoring
class TransparencyController {
    constructor() {

        this.chartContainer = document.getElementById('chartContainer');
        this.mainContent = document.querySelector('.main-content');
        this.leftPriceSection = document.querySelector('.left-price-section');
        
        if (this.chartContainer && this.mainContent && this.leftPriceSection) {
            this.init();
        } else {

        }
    }
    
    init() {

        
        // Method 1: Direct style monitoring
        this.startStyleMonitoring();
        
        // Method 2: Periodic checking
        this.startPeriodicCheck();
        
        // Method 3: Event-based monitoring
        this.setupEventListeners();
        
        // Initial check
        this.checkAndApplyTransparency();
    }
    
    startStyleMonitoring() {
        // Monitor main-content style attribute changes
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
    
                    this.checkAndApplyTransparency();
                }
            });
        });
        
        observer.observe(this.mainContent, {
            attributes: true,
            attributeFilter: ['style']
        });
        

    }
    
    startPeriodicCheck() {
        setInterval(() => {
            this.checkAndApplyTransparency();
        }, 2000);
        

    }
    
    setupEventListeners() {
        // Listen for custom events
        document.addEventListener('backgroundImageSet', () => {

            setTimeout(() => this.checkAndApplyTransparency(), 200);
        });
        
        document.addEventListener('backgroundImageRemoved', () => {

            setTimeout(() => this.checkAndApplyTransparency(), 200);
        });
    }
    
    checkAndApplyTransparency() {
        const hasBackground = this.hasBackgroundImage();
        const currentlyTransparent = this.isCurrentlyTransparent();
        

        
        if (hasBackground && !currentlyTransparent) {
            this.enableTransparency();
        } else if (!hasBackground && currentlyTransparent) {
            this.disableTransparency();
        }
    }
    
    hasBackgroundImage() {
        // Check main-content for background image
        const checks = [];
        
        // 1. Main-content inline style
        const mainInlineStyle = this.mainContent.style.backgroundImage;
        checks.push({
            method: 'main-content inline',
            value: mainInlineStyle,
            hasImage: mainInlineStyle && mainInlineStyle !== 'none' && mainInlineStyle !== ''
        });
        
        // 2. Main-content computed style
        const mainComputedStyle = window.getComputedStyle(this.mainContent).backgroundImage;
        checks.push({
            method: 'main-content computed',
            value: mainComputedStyle,
            hasImage: mainComputedStyle && mainComputedStyle !== 'none'
        });
        

        
        return checks.some(check => check.hasImage);
    }
    
    isCurrentlyTransparent() {
        // Check if left price section is transparent
        const hasClass = this.mainContent.classList.contains('chart-has-background');
        const inlineTransparent = this.leftPriceSection.style.background === 'transparent';
        

        
        return hasClass || inlineTransparent;
    }
    
    enableTransparency() {

        
        // Method 1: Add class to main content (triggers both transparency and clipping)
        this.mainContent.classList.add('chart-has-background');
        
        // Method 2: Direct style on left price section
        this.leftPriceSection.style.background = 'transparent';
        this.leftPriceSection.style.backgroundColor = 'transparent';
        
        // Method 3: Apply chart clipping
        this.applyChartClipping();
        

    }
    
    disableTransparency() {

        
        // Remove class
        this.mainContent.classList.remove('chart-has-background');
        
        // Reset inline styles
        this.leftPriceSection.style.background = '';
        this.leftPriceSection.style.backgroundColor = '';
        
        // Remove chart clipping
        this.removeChartClipping();
        

    }
    
    addTransparencyStyles() {
        if (!this.customStyleSheet) {
            this.customStyleSheet = document.createElement('style');
            this.customStyleSheet.id = 'transparency-controller-styles';
            document.head.appendChild(this.customStyleSheet);
        }
        
        this.customStyleSheet.textContent = `
            .left-price-section {
                background: transparent !important;
                background-color: transparent !important;
            }
        `;
        

    }
    
    removeTransparencyStyles() {
        if (this.customStyleSheet) {
            this.customStyleSheet.remove();
            this.customStyleSheet = null;

        }
    }
    
    applyChartClipping() {
        try {
            const canvas = this.chartContainer.querySelector('#chartCanvas');
            if (canvas) {
                canvas.style.clipPath = 'inset(0 0 0 40px)';

            }
            
            // Ensure background image is visible in chartContainer
            const containerStyle = window.getComputedStyle(this.chartContainer);
            if (containerStyle.backgroundImage && containerStyle.backgroundImage !== 'none') {

                this.chartContainer.style.backgroundSize = 'cover';
                this.chartContainer.style.backgroundPosition = 'center';
                this.chartContainer.style.backgroundRepeat = 'no-repeat';
            }
        } catch (error) {

        }
    }
    
    removeChartClipping() {
        try {
            const canvas = this.chartContainer.querySelector('#chartCanvas');
            if (canvas) {
                canvas.style.clipPath = '';

            }
        } catch (error) {

        }
    }
    
    // Manual control methods for testing
    forceEnable() {

        this.enableTransparency();
    }
    
    forceDisable() {

        this.disableTransparency();
    }
    
    getStatus() {
        return {
            hasBackground: this.hasBackgroundImage(),
            isTransparent: this.isCurrentlyTransparent(),
            elements: {
                chartContainer: !!this.chartContainer,
                mainContent: !!this.mainContent,
                leftPriceSection: !!this.leftPriceSection
            }
        };
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {

    window.transparencyController = new TransparencyController();
});

// Also initialize if DOM is already loaded
if (document.readyState !== 'loading') {

    window.transparencyController = new TransparencyController();
}