main.js

// Initialize charts
let priceChart;
let candleChart;

document.addEventListener('DOMContentLoaded', function () {
    // Create candlestick chart
    const candleCtx = document.getElementById('candleChart');
    if (!candleCtx) {
        console.error("Canvas element with ID 'candleChart' not found!"); 
        return;
    }
    const context = candleCtx.getContext('2d');
    if (!context) {
        console.error("Could not get 2D context from canvas element."); 
        return;
    }

    // Generates simple random walk candle data
    function generateCandleData(count) {
        const data = [];
        let date = new Date();
        date.setHours(date.getHours() - count, 0, 0, 0);
        let open = 80000; // Arbitrary starting point

        for (let i = 0; i < count; i++) {
            const time = date.getTime();
            // Simple random change for close price
            const change = (Math.random() - 0.5) * 500; 
            const close = open + change;
            
            // High and Low based on random volatility around open/close
            const high = Math.max(open, close) + Math.random() * 250;
            const low = Math.min(open, close) - Math.random() * 250;

            data.push({ x: time, o: open, h: high, l: low, c: close });

            date.setHours(date.getHours() + 1);
            open = close;
        }
        return data;
    }

    const candleData = generateCandleData(60);

    try {
        candleChart = new Chart(context, {
            type: 'candlestick', 
            data: {
                datasets: [{
                    label: 'BTC/USDT',
                    data: candleData,
                    color: { up: '#10b981', down: '#ef4444', unchanged: '#94a3b8' },
                    borderColor: { up: '#10b981', down: '#ef4444', unchanged: '#94a3b8' },
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: {
                        type: 'time',
                        time: { 
                            unit: 'hour', // Changed from day
                            displayFormats: { hour: 'HH:mm' } // Changed format
                        },
                        grid: { color: 'rgba(255, 255, 255, 0.05)' },
                        ticks: { color: '#94a3b8' }
                    },
                    y: {
                        position: 'right',
                        grid: { 
                            color: 'rgba(255, 255, 255, 0.1)', // Slightly more visible grid
                            borderDash: [5, 5] // Added dashed lines
                        },
                        ticks: { color: '#94a3b8' }
                    }
                }
            }
        });

        // ResizeObserver to handle chart resizing when container changes
        const chartContainer = document.querySelector('.main-chart-container'); 
        if (chartContainer && candleChart) {
            const resizeObserver = new ResizeObserver(entries => {
                // Removed requestAnimationFrame for potentially faster reaction
                if (!Array.isArray(entries) || !entries.length) {
                    return;
                }
                // Call resize directly on the chart instance
                candleChart.resize(); 
            });
            resizeObserver.observe(chartContainer);
        } else {
             console.error("Could not find chart container or chart instance for ResizeObserver.");
        }

    } catch (error) {
        console.error("Error creating chart:", error); 
    }

    // Buy/Sell button functionality
    const buyBtn = document.getElementById('buy-btn');
    const sellBtn = document.getElementById('sell-btn');
    const placeOrderBtn = document.getElementById('place-order-btn');

    buyBtn.addEventListener('click', function () {
        buyBtn.classList.add('bg-green-600', 'text-white');
        buyBtn.classList.remove('bg-green-900', 'bg-opacity-30', 'text-green-400');
        sellBtn.classList.add('bg-red-900', 'bg-opacity-30', 'text-red-400');
        sellBtn.classList.remove('bg-red-600', 'text-white');
        placeOrderBtn.classList.add('bg-green-600');
        placeOrderBtn.classList.remove('bg-red-600');
        placeOrderBtn.textContent = 'Buy BTC';
    });

    sellBtn.addEventListener('click', function () {
        sellBtn.classList.add('bg-red-600', 'text-white');
        sellBtn.classList.remove('bg-red-900', 'bg-opacity-30', 'text-red-400');
        buyBtn.classList.add('bg-green-900', 'bg-opacity-30', 'text-green-400');
        buyBtn.classList.remove('bg-green-600', 'text-white');
        placeOrderBtn.classList.add('bg-red-600');
        placeOrderBtn.classList.remove('bg-green-600');
        placeOrderBtn.textContent = 'Sell BTC';
    });
});

// Feed switching functionality
function switchFeed(feedType) {
    document.getElementById('posts-feed').classList.add('hidden-feed');
    document.getElementById('chat-feed').classList.add('hidden-feed');
    document.getElementById('video-feed').classList.add('hidden-feed');
    document.getElementById(feedType + '-feed').classList.remove('hidden-feed');

    const buttons = document.querySelectorAll('.feed-switch-btn');
    buttons.forEach(btn => {
        btn.classList.remove('active');
        // Match based on the onclick attribute content for reliability
        if (btn.getAttribute('onclick') === `switchFeed('${feedType}')`) {
            btn.classList.add('active');
        }
    });

    // Removed the explicit resize call from here
    /*
    if (candleChart) {
        setTimeout(() => {
             candleChart.resize();
        }, 0);
    }
    */
}

// Placeholder function for indicator buttons
function updateChart(indicatorType) {
    // In a real implementation, you would update the chart data or options here
    // based on the selected indicator.
    // For now, we can just highlight the button.

    // Remove active class from all indicator buttons inside the dropdown
    const indicatorButtons = document.querySelectorAll('#indicators-menu button'); // Updated selector
    indicatorButtons.forEach(btn => btn.classList.remove('indicator-active'));

    // Add active class to the clicked button
    const clickedButton = document.getElementById(`${indicatorType}-btn`);
    if (clickedButton) {
        clickedButton.classList.add('indicator-active');
    }

    // Example: Add/remove datasets based on indicatorType (requires more complex logic)
    // if (indicatorType === 'sma') { ... } 
}

// Dropdown Toggle Function
function toggleDropdown(menuId) {
    const menu = document.getElementById(menuId);
    if (menu) {
        menu.classList.toggle('hidden');
        // Update aria-expanded attribute for accessibility
        const button = document.querySelector(`[onclick*="toggleDropdown('${menuId}')"]`);
        if (button) {
            const isExpanded = !menu.classList.contains('hidden');
            button.setAttribute('aria-expanded', isExpanded.toString());
        }
    }
}

// Close Dropdown Function
function closeDropdown(menuId) {
    const menu = document.getElementById(menuId);
    if (menu && !menu.classList.contains('hidden')) {
        menu.classList.add('hidden');
        const button = document.querySelector(`[onclick*="toggleDropdown('${menuId}')"]`);
        if (button) {
            button.setAttribute('aria-expanded', 'false');
        }
    }
}

// Close dropdown if clicked outside
document.addEventListener('click', function(event) {
    const dropdownContainer = document.getElementById('indicators-dropdown'); // ID of the main dropdown container div
    const menu = document.getElementById('indicators-menu');

    // Check if the click is outside the dropdown container
    if (dropdownContainer && menu && !dropdownContainer.contains(event.target)) {
        closeDropdown('indicators-menu');
    }
});

//