<div class="finlogix-lazy-container" id="finlogix-lazy-widget">
    <div class="finlogix-placeholder" id="finlogix-placeholder">
        <div class="loading-spinner" id="loading-spinner" style="display: none;"></div>
        <p id="placeholder-text">📊 Financial data widget will load when visible</p>
    </div>
    <div class="finlogix-container" id="finlogix-container"></div>
</div>

.finlogix-lazy-container {
    min-height: 400px;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.finlogix-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    flex-direction: column;
    color: #666;
    font-family: Arial, sans-serif;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.finlogix-container {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.finlogix-container.loaded {
    opacity: 1;
}

.symbolListWidgetBox {
  border:none !important;
}

// Debug version of Finlogix Lazy Loader
class FinlogixLazyLoader {
    constructor() {
        this.widgetLoaded = false;
        this.observer = null;
        console.log('FinlogixLazyLoader: Constructor called');
        this.init();
    }
    
    init() {
        console.log('FinlogixLazyLoader: Initializing...');
        
        // Check if IntersectionObserver is supported
        if (!window.IntersectionObserver) {
            console.error('IntersectionObserver not supported, loading widget immediately');
            this.loadWidget();
            return;
        }
        
        // Create intersection observer
        this.observer = new IntersectionObserver((entries) => {
            console.log('FinlogixLazyLoader: Observer triggered', entries);
            entries.forEach(entry => {
                console.log('Entry isIntersecting:', entry.isIntersecting, 'widgetLoaded:', this.widgetLoaded);
                if (entry.isIntersecting && !this.widgetLoaded) {
                    console.log('FinlogixLazyLoader: Element is visible, loading widget...');
                    this.loadWidget();
                }
            });
        }, {
            rootMargin: '100px',
            threshold: 0.1
        });
        
        // Find the widget container
        const widgetContainer = document.getElementById('finlogix-lazy-widget');
        if (widgetContainer) {
            console.log('FinlogixLazyLoader: Found widget container, starting observation');
            this.observer.observe(widgetContainer);
        } else {
            console.error('FinlogixLazyLoader: Widget container not found! Make sure element with ID "finlogix-lazy-widget" exists');
            // Try to find alternative containers
            const alternatives = document.querySelectorAll('.finlogix-lazy-container');
            if (alternatives.length > 0) {
                console.log('Found alternative container, using first one');
                alternatives[0].id = 'finlogix-lazy-widget';
                this.observer.observe(alternatives[0]);
            }
        }
    }
    
    loadWidget() {
        if (this.widgetLoaded) {
            console.log('FinlogixLazyLoader: Widget already loaded, skipping');
            return;
        }
        
        console.log('FinlogixLazyLoader: Starting widget load process');
        this.widgetLoaded = true;
        
        // Show loading spinner
        this.showLoading();
        
        // Load the Finlogix widget script
        this.loadFinlogixScript()
            .then(() => {
                console.log('FinlogixLazyLoader: Script loaded successfully');
                // Small delay to ensure script is fully ready
                setTimeout(() => {
                    this.initializeWidget();
                }, 500);
            })
            .catch(error => {
                console.error('FinlogixLazyLoader: Failed to load script:', error);
                this.showError();
            });
        
        // Stop observing once loading starts
        if (this.observer) {
            const container = document.getElementById('finlogix-lazy-widget');
            if (container) {
                this.observer.unobserve(container);
            }
        }
    }
    
    loadFinlogixScript() {
        return new Promise((resolve, reject) => {
            console.log('FinlogixLazyLoader: Checking if Widget script already exists');
            
            // Check if script is already loaded
            if (window.Widget && typeof window.Widget.init === 'function') {
                console.log('FinlogixLazyLoader: Widget script already loaded');
                resolve();
                return;
            }
            
            // Check if script tag already exists
            const existingScript = document.querySelector('script[src*="widget.finlogix.com"]');
            if (existingScript) {
                console.log('FinlogixLazyLoader: Script tag exists, waiting for load');
                existingScript.onload = resolve;
                existingScript.onerror = reject;
                return;
            }
            
            console.log('FinlogixLazyLoader: Creating new script tag');
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://widget.finlogix.com/Widget.js';
            script.onload = () => {
                console.log('FinlogixLazyLoader: Script loaded from CDN');
                resolve();
            };
            script.onerror = (error) => {
                console.error('FinlogixLazyLoader: Script failed to load:', error);
                reject(error);
            };
            document.head.appendChild(script);
        });
    }
    
    initializeWidget() {
        console.log('FinlogixLazyLoader: Initializing widget...');
        
        try {
            // Double check that Widget is available
            if (!window.Widget || typeof window.Widget.init !== 'function') {
                throw new Error('Widget object not available');
            }
            
            console.log('FinlogixLazyLoader: Widget object found, calling init');
            
            // Initialize the Finlogix widget
            Widget.init({
                widgetId: "1bc69679-f7c8-4221-bbae-57ff94c17f29",
                type: "SymbolList",
                language: "en",
                showBrand: true,
                isShowTradeButton: true,
                isShowBeneathLink: true,
                isShowDataFromACYInfo: true,
                showColumns: [
                    "SYMBOL",
                    "BID",
                    "ASK",
                    "SPREAD",
                    "CHANGE",
                    "CHANGE %",
                    "OPEN",
                    "LOW",
                    "HIGH",
                    "PREVIOUS"
                ],
                categoryList: [
                    {
                        type: "Forex",
                        symbols: [
                            { symbolId: "5", symbolName: "AUD/USD" },
                            { symbolId: "19", symbolName: "EUR/USD" },
                            { symbolId: "25", symbolName: "GBP/USD" },
                            { symbolId: "29", symbolName: "NZD/USD" },
                            { symbolId: "31", symbolName: "USD/CAD" },
                            { symbolId: "32", symbolName: "USD/CHF" },
                            { symbolId: "33", symbolName: "USD/CNH" },
                            { symbolId: "34", symbolName: "USD/HKD" },
                            { symbolId: "36", symbolName: "USD/JPY" },
                            { symbolId: "37", symbolName: "USD/MXN" }
                        ]
                    },
                    {
                        type: "Commodities",
                        symbols: [
                            { symbolId: "44", symbolName: "XAU/USD" },
                            { symbolId: "43", symbolName: "XAG/USD" },
                            { symbolId: "113", symbolName: "COPPER" },
                            { symbolId: "45", symbolName: "WTI" },
                            { symbolId: "70", symbolName: "BRENT" },
                            { symbolId: "117", symbolName: "GAS" },
                            { symbolId: "116", symbolName: "NICKEL" },
                            { symbolId: "118", symbolName: "ALUMINIUM" },
                            { symbolId: "114", symbolName: "LEAD" },
                            { symbolId: "115", symbolName: "ZINC" }
                        ]
                    },
                    {
                        type: "Cryptocurrency",
                        symbols: [
                            { symbolId: "66", symbolName: "BTC/USD" },
                            { symbolId: "67", symbolName: "ETH/USD" },
                            { symbolId: "69", symbolName: "XRP/USD" },
                            { symbolId: "121", symbolName: "DOT/USD" },
                            { symbolId: "68", symbolName: "LTC/USD" },
                            { symbolId: "120", symbolName: "XLM/USD" },
                            { symbolId: "122", symbolName: "EOS/USD" },
                            { symbolId: "65", symbolName: "BCH/USD" },
                            { symbolId: "119", symbolName: "LNK/USD" }
                        ]
                    },
                    {
                        type: "Indices",
                        symbols: [
                            { symbolId: "50", symbolName: "NAS100" },
                            { symbolId: "51", symbolName: "DJ30" },
                            { symbolId: "52", symbolName: "SP500" },
                            { symbolId: "71", symbolName: "AUS200" },
                            { symbolId: "77", symbolName: "CHINA50" },
                            { symbolId: "79", symbolName: "CHINAH" },
                            { symbolId: "73", symbolName: "FR40" },
                            { symbolId: "53", symbolName: "GER30" },
                            { symbolId: "74", symbolName: "HK50" },
                            { symbolId: "83", symbolName: "INDIA50" }
                        ]
                    },
                    {
                        type: "Stocks",
                        symbols: [
                            { symbolId: "10007", symbolName: "Apple" },
                            { symbolId: "10029", symbolName: "Microsoft" },
                            { symbolId: "10004", symbolName: "Alphabet" },
                            { symbolId: "10006", symbolName: "Amazon" },
                            { symbolId: "10014", symbolName: "Tesla" },
                            { symbolId: "20010", symbolName: "UnitedHealth" },
                            { symbolId: "20090", symbolName: "Johnson&Johnson" },
                            { symbolId: "20043", symbolName: "Visa" },
                            { symbolId: "10028", symbolName: "MetaPlatformsInc" },
                            { symbolId: "20045", symbolName: "ExxonMobil" }
                        ]
                    },
                    {
                        type: "ETFs",
                        symbols: [
                            { symbolId: "50008", symbolName: "AAA" },
                            { symbolId: "50002", symbolName: "ACDC" },
                            { symbolId: "40001", symbolName: "ACWI" },
                            { symbolId: "60103", symbolName: "ACWV" },
                            { symbolId: "40015", symbolName: "ACWX" },
                            { symbolId: "60104", symbolName: "AFK" },
                            { symbolId: "60105", symbolName: "AGG" },
                            { symbolId: "60008", symbolName: "AMLP" },
                            { symbolId: "60028", symbolName: "ARKF" },
                            { symbolId: "60035", symbolName: "ARKG" }
                        ]
                    },
                    {
                        type: "Futures",
                        symbols: []
                    }
                ],
                isAdaptive: true
            });
            
            console.log('FinlogixLazyLoader: Widget.init() called successfully');
            
            // Wait for widget to render, then show it
            setTimeout(() => {
                console.log('FinlogixLazyLoader: Showing widget after delay');
                this.showWidget();
            }, 2000); // Increased delay to 2 seconds
            
        } catch (error) {
            console.error('FinlogixLazyLoader: Failed to initialize widget:', error);
            this.showError();
        }
    }
    
    showLoading() {
        console.log('FinlogixLazyLoader: Showing loading state');
        const placeholder = document.getElementById('finlogix-placeholder');
        const spinner = document.getElementById('loading-spinner');
        const text = document.getElementById('placeholder-text');
        
        if (spinner) {
            spinner.style.display = 'block';
            console.log('FinlogixLazyLoader: Loading spinner shown');
        } else {
            console.warn('FinlogixLazyLoader: Loading spinner element not found');
        }
        
        if (text) {
            text.textContent = 'Loading financial data...';
            console.log('FinlogixLazyLoader: Loading text updated');
        } else {
            console.warn('FinlogixLazyLoader: Placeholder text element not found');
        }
    }
    
    showWidget() {
        console.log('FinlogixLazyLoader: Attempting to show widget');
        const placeholder = document.getElementById('finlogix-placeholder');
        const container = document.getElementById('finlogix-container');
        
        if (placeholder) {
            placeholder.style.display = 'none';
            console.log('FinlogixLazyLoader: Placeholder hidden');
        } else {
            console.warn('FinlogixLazyLoader: Placeholder element not found');
        }
        
        if (container) {
            container.classList.add('loaded');
            console.log('FinlogixLazyLoader: Container marked as loaded');
        } else {
            console.warn('FinlogixLazyLoader: Container element not found');
        }
        
        // Check if widget actually rendered
        setTimeout(() => {
            const widgetContent = container ? container.innerHTML : '';
            if (widgetContent.trim() === '') {
                console.warn('FinlogixLazyLoader: Widget container appears empty after loading');
                this.showError();
            } else {
                console.log('FinlogixLazyLoader: Widget appears to have loaded successfully');
            }
        }, 1000);
    }
    
    showError() {
        console.log('FinlogixLazyLoader: Showing error state');
        const text = document.getElementById('placeholder-text');
        const spinner = document.getElementById('loading-spinner');
        
        if (spinner) spinner.style.display = 'none';
        if (text) text.textContent = '❌ Failed to load widget. Please refresh the page.';
    }
}

// Multiple initialization methods to ensure it runs
console.log('Script loaded, preparing to initialize FinlogixLazyLoader');

function initializeLazyLoader() {
    console.log('Initializing FinlogixLazyLoader...');
    window.finlogixLoader = new FinlogixLazyLoader();
}

// Method 1: DOM ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeLazyLoader);
} else if (document.readyState === 'interactive' || document.readyState === 'complete') {
    // DOM is already ready
    initializeLazyLoader();
}

// Method 2: Window load (backup)
window.addEventListener('load', () => {
    if (!window.finlogixLoader) {
        console.log('Backup initialization on window load');
        initializeLazyLoader();
    }
});

// Method 3: Immediate execution after delay (last resort)
setTimeout(() => {
    if (!window.finlogixLoader) {
        console.log('Emergency initialization after timeout');
        initializeLazyLoader();
    }
}, 1000);