// Global variables
let currentMarketData = {};

function getLang() {
    return document.documentElement.lang || 'en';
}

// Market Data Fetching
async function fetchMarketData() {
    try {
        const resp = await fetch('api/market_api.php');
        if (!resp.ok) throw new Error('Network response was not ok');
        const result = await resp.json();
        if (result.success) {
            currentMarketData = result.data;
            updateUI();
        }
    } catch (e) {
        console.error('Market API error', e);
    }
}

function updateUI() {
    // Update Home Page Market List (Market Trends Table)
    const homeList = document.getElementById('market-trends');
    if (homeList) {
        let html = '';
        const symbols = ['BTC', 'ETH', 'BNB', 'SOL', 'XRP', 'DOGE', 'ADA', 'TRX'];
        symbols.forEach(symbol => {
            const coin = currentMarketData[symbol];
            if (coin) {
                const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
                const changeSign = coin.change >= 0 ? '+' : '';
                const iconClass = coin.change >= 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down';
                html += `
                    <tr onclick="window.location.href='trade.php?symbol=${symbol}'" style="cursor: pointer;" class="transition">
                        <td class="ps-4 py-4 border-0">
                            <div class="d-flex align-items-center">
                                <div class="bg-secondary bg-opacity-20 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <img src="${coin.icon}" width="24" height="24">
                                </div>
                                <div>
                                    <div class="fw-bold text-white">${symbol}</div>
                                    <div class="text-muted small">${coin.name}</div>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 border-0 text-white fw-bold">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</td>
                        <td class="py-4 border-0 ${changeClass} fw-bold">
                            <i class="fas ${iconClass} me-1"></i>
                            ${changeSign}${coin.change.toFixed(2)}%
                        </td>
                        <td class="pe-4 py-4 border-0 text-end">
                            <a href="trade.php?symbol=${symbol}" class="btn btn-sm btn-outline-primary rounded-pill px-4 border-opacity-25" style="font-size: 0.75rem;">${typeof t === 'function' ? t('Go to Trade') : 'Trade'}</a>
                        </td>
                    </tr>
                `;
            }
        });
        if (html) homeList.innerHTML = html;
    }

    // Update Hero Ticker (Horizontal Bar) - Improved with premium gradient & glow
    const heroTicker = document.getElementById('hero-market-ticker');
    if (heroTicker) {
        let html = '';
        const symbols = ['BTC', 'ETH', 'SOL', 'BNB', 'XRP'];
        symbols.forEach(symbol => {
            const coin = currentMarketData[symbol];
            if (coin) {
                const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
                // Using a premium gradient instead of a "white box"
                const gradient = coin.change >= 0 
                    ? 'linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(0, 70, 255, 0.05) 100%)' 
                    : 'linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(0, 70, 255, 0.05) 100%)';
                const borderColor = coin.change >= 0 ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)';

                html += `
                    <div class="ticker-item d-flex align-items-center gap-3 py-2 px-3 rounded-4 transition hover-glow-blue" onclick="window.location.href='trade.php?symbol=${symbol}'" style="cursor: pointer; background: ${gradient}; border: 1px solid ${borderColor};">
                        <div class="d-flex flex-column">
                            <span class="fw-bold text-white small">${symbol}/USDT</span>
                            <span class="${changeClass} x-small fw-bold">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</span>
                        </div>
                        <div class="text-end ms-2">
                            <div class="text-white small fw-bold">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
                        </div>
                    </div>
                `;
            }
        });
        if (html) heroTicker.innerHTML = html;
    }

    // Update Ticker
    const ticker = document.getElementById('ticker-wrap');
    if (ticker) {
        let html = '';
        Object.keys(currentMarketData).forEach(symbol => {
            const coin = currentMarketData[symbol];
            const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
            html += `
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small fw-bold">${symbol}/USDT</span>
                    <span class="text-white fw-bold">${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</span>
                    <span class="${changeClass} small">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</span>
                </div>
            `;
        });
        ticker.innerHTML = html + html; 
    }

    // Update Trade Page if on it
    if (document.getElementById('crypto-list-container')) {
        updateTradePage();
    }
}

function updateTradePage() {
    const listContainer = document.getElementById('crypto-list-container');
    const search = document.getElementById('market-search')?.value.toLowerCase() || '';
    const currentSymbol = document.getElementById('current-symbol')?.value;
    
    let html = '';
    Object.keys(currentMarketData).forEach(symbol => {
        if (symbol.toLowerCase().includes(search) || currentMarketData[symbol].name.toLowerCase().includes(search)) {
            const coin = currentMarketData[symbol];
            const active = symbol === currentSymbol ? 'active' : '';
            const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
            
            html += `
                <div class="crypto-item ${active}" onclick="window.location.href='trade.php?symbol=${symbol}'">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <img src="${coin.icon}" class="crypto-icon">
                            <div>
                                <div class="text-white crypto-name-text">${symbol}</div>
                                <div class="crypto-sub-text">${coin.name}</div>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="text-white crypto-price-text">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
                            <div class="${changeClass} crypto-change-text">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</div>
                        </div>
                    </div>
                </div>
            `;
        }
    });
    listContainer.innerHTML = html;
    
    // Update header info
    if (currentSymbol && currentMarketData[currentSymbol]) {
        const coin = currentMarketData[currentSymbol];
        const lastPriceEl = document.getElementById('last-price');
        if (lastPriceEl) {
            const oldPrice = parseFloat(lastPriceEl.innerText.replace(/[$,]/g, '')) || 0;
            lastPriceEl.innerText = '$' + coin.price.toLocaleString(undefined, {minimumFractionDigits: 2});
            lastPriceEl.className = coin.price >= oldPrice ? 'fw-bold text-success fs-5' : 'fw-bold text-danger fs-5';
            
            const bookPriceEl = document.getElementById('book-price');
            if (bookPriceEl) bookPriceEl.innerText = coin.price.toLocaleString(undefined, {minimumFractionDigits: 2});
            
            // If Market tab is active and price field is empty, update it
            const marketTab = document.getElementById('tab-market');
            if (marketTab && marketTab.classList.contains('active')) {
                const priceInput = document.getElementById('order-price');
                if (priceInput && !priceInput.value) {
                    priceInput.value = coin.price;
                }
            }
        }
        
        const changeEl = document.getElementById('24h-change');
        if (changeEl) {
            changeEl.innerText = (coin.change >= 0 ? '+' : '') + coin.change.toFixed(2) + '%';
            changeEl.className = 'fw-bold ' + (coin.change >= 0 ? 'text-success' : 'text-danger');
        }
        
        if (document.getElementById('24h-high')) document.getElementById('24h-high').innerText = '$' + (coin.price * 1.05).toLocaleString(undefined, {minimumFractionDigits: 2});
        if (document.getElementById('24h-low')) document.getElementById('24h-low').innerText = '$' + (coin.price * 0.95).toLocaleString(undefined, {minimumFractionDigits: 2});
        if (document.getElementById('price-fiat')) {
            const isZh = document.documentElement.lang === 'zh';
            const rate = isZh ? 7.2 : 1.0;
            const symbol = isZh ? '¥' : '$';
            document.getElementById('price-fiat').innerText = '≈ ' + symbol + (coin.price * rate).toLocaleString(undefined, {minimumFractionDigits: 2});
        }
    }
    
    simulateOrderBook();
}

function simulateOrderBook() {
    const symbol = document.getElementById('current-symbol')?.value;
    if (!symbol || !currentMarketData[symbol]) return;
    
    const basePrice = currentMarketData[symbol].price;
    const askContainer = document.getElementById('order-book-asks');
    const bidContainer = document.getElementById('order-book-bids');
    
    if (!askContainer || !bidContainer) return;
    
    let askHtml = '';
    let bidHtml = '';
    
    for (let i = 5; i > 0; i--) {
        const price = basePrice * (1 + (i * 0.0002));
        const amount = Math.random() * 2 + 0.1;
        const depth = Math.random() * 80 + 10;
        askHtml += `
            <div class="order-book-row ask" onclick="document.getElementById('order-price').value = ${price.toFixed(2)}">
                <div class="depth-bg ask" style="width: ${depth}%"></div>
                <span class="price">${price.toFixed(2)}</span>
                <span class="amount">${amount.toFixed(4)}</span>
            </div>
        `;
    }
    
    for (let i = 1; i <= 5; i++) {
        const price = basePrice * (1 - (i * 0.0002));
        const amount = Math.random() * 2 + 0.1;
        const depth = Math.random() * 80 + 10;
        bidHtml += `
            <div class="order-book-row bid" onclick="document.getElementById('order-price').value = ${price.toFixed(2)}">
                <div class="depth-bg bid" style="width: ${depth}%"></div>
                <span class="price">${price.toFixed(2)}</span>
                <span class="amount">${amount.toFixed(4)}</span>
            </div>
        `;
    }
    
    askContainer.innerHTML = askHtml;
    bidContainer.innerHTML = bidHtml;
}

// Initialization
document.addEventListener('DOMContentLoaded', () => {
    fetchMarketData();
    setInterval(fetchMarketData, 3000);
    
    const searchInput = document.getElementById('market-search');
    if (searchInput) {
        searchInput.addEventListener('input', updateUI);
    }
});