document.addEventListener('DOMContentLoaded', () => {
    // Initialize components
    initColorSchemeToggle();
    initTradingUI();
    initChartResize();
    initBackendConnection();
});

async function initBackendConnection() {
    // Check backend connection
    try {
        const response = await fetch('/api/account', {
            headers: {
                'X-API-KEY': 'default-secret-key' // Replace with your actual API key
            }
        });
        if (response.ok) {
            const data = await response.json();
            console.log('Backend connected:', data);
            updateAccountDisplay(data);
        } else {
            console.error('Backend connection failed');
        }
    } catch (error) {
        console.error('Error connecting to backend:', error);
    }
}

function updateAccountDisplay(accountData) {
    // Update UI with account information
    const balanceElement = document.getElementById('account-balance');
    if (balanceElement) {
        const usdtBalance = accountData.balances.find(b => b.asset === 'USDT');
        balanceElement.textContent = usdtBalance ? `${usdtBalance.free.toFixed(2)}` : '$0.00';
    }

    // Update positions display
    const positionsContainer = document.getElementById('positions-container');
    if (positionsContainer) {
        positionsContainer.innerHTML = accountData.positions.map(pos => `
            <div class="position-card">
                <h4>${pos.symbol}</h4>
                <p>Size: ${pos.positionAmt}</p>
                <p>Entry: ${pos.entryPrice.toFixed(2)}</p>
                <p>P&L: ${pos.unRealizedProfit.toFixed(2)}</p>
            </div>
        `).join('');
    }
}
async function fetchSignal(symbol) {
    try {
        const response = await fetch(`/api/signal/${symbol}`);
        if (!response.ok) throw new Error('API request failed');
        return await response.json();
    } catch (error) {
        console.error('Error fetching signal:', error);
        return {
            symbol: symbol,
            timeframe: "5m",
            prob_up: 0.5,
            prob_down: 0.5,
            confidence: 0,
            advice: "neutral"
        };
    }
}

async function fetchBinanceKlines(symbol, interval='5m', limit=100) {
    try {
        const response = await axios.get(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=${interval}&limit=${limit}`);
        return response.data;
    } catch (error) {
        console.error('Error fetching klines:', error);
        return [];
    }
}
function initTradingUI() {
    // Initialize crypto price display
    const cryptoPairs = ['BTC/USDT', 'ETH/USDT', 'SOL/USDT'];
    cryptoPairs.forEach(pair => {
        fetchCryptoPrice(pair);
    });
}

function fetchCryptoPrice(pair) {
    // Simulate fetching crypto prices (in a real app, use an API like Binance/Kraken)
    const priceElement = document.getElementById(`${pair.replace('/', '-')}-price`);
    if (priceElement) {
        const randomPrice = (Math.random() * 10000).toFixed(2);
        priceElement.textContent = `${randomPrice}`;
        setInterval(() => {
            const change = (Math.random() * 10 - 5).toFixed(2);
            const newPrice = (parseFloat(randomPrice) + parseFloat(change)).toFixed(2);
            priceElement.textContent = `${newPrice}`;
            priceElement.style.color = change > 0 ? '#10b981' : '#ef4444';
        }, 3000);
    }
}
function initChartResize() {
    // Handle chart container resizing
    window.addEventListener('resize', () => {
        // Chart resize logic would go here
    });
}
function initColorSchemeToggle() {
    // This would toggle between light/dark mode
    const toggle = document.getElementById('theme-toggle');
    if (toggle) {
        toggle.addEventListener('click', () => {
            document.body.classList.toggle('dark');
            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
        });
    }
}

function initSmoothScrolling() {
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
}

function initHoverEffects() {
    // Add hover effects to cards
    const cards = document.querySelectorAll('.card-hover');
    cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.classList.add('shadow-lg', 'transform', '-translate-y-1');
        });
        card.addEventListener('mouseleave', () => {
            card.classList.remove('shadow-lg', 'transform', '-translate-y-1');
        });
    });
}