import { TradingDashboard, refreshTA, openAIAnalysis } from './ui/chart.js';
import { restoreSidebarState, toggleSidebar, initSidebarTabs, restoreSidebarTabState } from './ui/sidebar.js';
import { 
    initIndicatorPanel,
    getActiveIndicators,
    setActiveIndicators,
    drawIndicatorsOnChart,
    addIndicator,
    removeIndicatorById
} from './ui/indicators-panel-new.js';
import { initStrategyPanel } from './ui/strategy-panel.js';
import { IndicatorRegistry } from './indicators/index.js';
import { TimezoneConfig } from './config/timezone.js';

window.dashboard = null;

window.toggleSidebar = toggleSidebar;
window.refreshTA = refreshTA;
window.openAIAnalysis = openAIAnalysis;
console.log('[App] openAIAnalysis exported:', typeof window.openAIAnalysis);
window.TimezoneConfig = TimezoneConfig;
window.renderIndicatorList = function() {
    // This function is no longer needed for sidebar indicators
};

// Export init function for global access
window.initIndicatorPanel = initIndicatorPanel;
window.addIndicator = addIndicator;
window.toggleIndicator = addIndicator;
window.drawIndicatorsOnChart = drawIndicatorsOnChart;
window.updateIndicatorCandles = drawIndicatorsOnChart;

window.IndicatorRegistry = IndicatorRegistry;

document.addEventListener('DOMContentLoaded', async () => {
    // Attach toggle sidebar event listener
    const toggleBtn = document.getElementById('sidebarToggleBtn');
    if (toggleBtn) {
        toggleBtn.addEventListener('click', toggleSidebar);
    }

    // Initialize timezone selector
    const timezoneSelect = document.getElementById('timezoneSelect');
    const settingsPopup = document.getElementById('settingsPopup');
    const settingsBtn = document.getElementById('btnSettings');
    
    // Toggle settings popup
    if (settingsBtn && settingsPopup) {
        settingsBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            settingsPopup.classList.toggle('hidden');
            if (!settingsPopup.classList.contains('hidden')) {
                settingsPopup.classList.add('show');
            }
        });
        
        settingsPopup.addEventListener('click', (e) => {
            e.stopPropagation();
            // Check if click is on form elements or their containers
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.closest('input') || e.target.closest('select')) {
                return;
            }
        });
        
        document.addEventListener('click', (e) => {
            // Don't close if clicking on settings button or inside the popup
            if (!settingsBtn.contains(e.target) && !settingsPopup.contains(e.target)) {
                settingsPopup.classList.add('hidden');
                settingsPopup.classList.remove('show');
            }
        });
    }
    
    if (timezoneSelect) {
        const savedTimezone = localStorage.getItem('timezone') || TimezoneConfig.getTimezone();
        timezoneSelect.value = savedTimezone;
        timezoneSelect.addEventListener('change', (e) => {
            TimezoneConfig.setTimezone(e.target.value);
            localStorage.setItem('timezone', e.target.value);
            settingsPopup.classList.add('hidden');
            settingsPopup.classList.remove('show');
            // Redraw chart and indicators
            if (window.dashboard) {
                window.drawIndicatorsOnChart?.();
            }
        });
    }
    
   window.dashboard = new TradingDashboard();
    restoreSidebarState();
    restoreSidebarTabState();
    initSidebarTabs();

    // Initialize panels
    window.initIndicatorPanel();
    initStrategyPanel();
    
    // Initialize candle color pickers (after dashboard is created)
    const candleUpColor = document.getElementById('candleUpColor');
    const candleDownColor = document.getElementById('candleDownColor');
    
    if (candleUpColor) {
        candleUpColor.value = localStorage.getItem('candleUpColor') || '#ff9800';
        candleUpColor.addEventListener('input', (e) => {
            localStorage.setItem('candleUpColor', e.target.value);
            if (window.dashboard && window.dashboard.candleSeries) {
                window.dashboard.candleSeries.applyOptions({
                    upColor: e.target.value,
                    borderUpColor: e.target.value,
                    wickUpColor: e.target.value
                });
            }
        });
    }
    
    if (candleDownColor) {
        candleDownColor.value = localStorage.getItem('candleDownColor') || '#ff9800';
        candleDownColor.addEventListener('input', (e) => {
            localStorage.setItem('candleDownColor', e.target.value);
            if (window.dashboard && window.dashboard.candleSeries) {
                window.dashboard.candleSeries.applyOptions({
                    downColor: e.target.value,
                    borderDownColor: e.target.value,
                    wickDownColor: e.target.value
                });
            }
        });
    }
    
    const priceDecimalsInput = document.getElementById('priceDecimalsInput');
    if (priceDecimalsInput) {
        const storedValue = localStorage.getItem('priceDecimals');
        console.log('[App] Loaded priceDecimals from localStorage:', storedValue);
        priceDecimalsInput.value = storedValue !== null && storedValue !== '' ? storedValue : '2';
        priceDecimalsInput.addEventListener('input', (e) => {
            const parsed = parseInt(e.target.value);
            const value = Math.max(0, Math.min(8, isNaN(parsed) ? 2 : parsed));
            console.log('[App] Setting priceDecimals to:', value);
            localStorage.setItem('priceDecimals', value.toString());
            if (window.dashboard && window.dashboard.updatePricePrecision) {
                window.dashboard.updatePricePrecision(value);
            }
        });
    }
});