<?php include 'header.php'; ?>

<main style="padding: 20px 0; background: #0b0e11; min-height: calc(100vh - 65px);">
    <div class="container">
        <h1 style="color: white; margin-bottom: 20px; font-size: 1.8rem;"><?php echo __('crypto_markets'); ?></h1>
        
        <div class="market-stats-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
            <div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('24h_volume'); ?></div>
                <div style="font-size: 1.1rem; color: white; margin-top: 5px; font-weight: bold;">$ 84.2B</div>
            </div>
            <div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('fear_greed'); ?></div>
                <div style="font-size: 1.1rem; color: #00c087; margin-top: 5px; font-weight: bold;">74 Greed</div>
            </div>
            <div style="background: #1e2329; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.8rem;"><?php echo __('btc_dominance'); ?></div>
                <div style="font-size: 1.1rem; color: white; margin-top: 5px; font-weight: bold;">52.1%</div>
            </div>
        </div>

        <div style="background: #1e2329; border-radius: 16px; border: 1px solid #2b3139; overflow: hidden;">
            <div class="market-tabs" style="padding: 10px 20px; border-bottom: 1px solid #2b3139; display: flex; gap: 25px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;">
                <span style="color: white; border-bottom: 2px solid var(--primary-color); padding: 10px 0; cursor: pointer; font-size: 0.95rem; font-weight: 500;"><?php echo __('favorites'); ?></span>
                <span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('all_crypto'); ?></span>
                <span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('nav_spot'); ?></span>
                <span style="color: #848e9c; padding: 10px 0; cursor: pointer; font-size: 0.95rem;"><?php echo __('nav_futures'); ?></span>
            </div>
            <div class="market-table-container">
                <table style="width: 100%; border-collapse: collapse; min-width: 500px;">
                    <thead style="background: #161a1e;">
                        <tr>
                            <th style="padding: 12px 20px; text-align: left; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('asset'); ?></th>
                            <th style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('price'); ?></th>
                            <th style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;">24h %</th>
                            <th class="desktop-only-cell" style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('24h_high_low'); ?></th>
                            <th class="desktop-only-cell" style="padding: 12px 20px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.85rem;"><?php echo __('trade_panel'); ?></th>
                        </tr>
                    </thead>
                    <tbody id="market-list-all">
                        <!-- Filled by WS -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>

<style>
    @media (max-width: 768px) {
        .market-stats-grid { grid-template-columns: 1fr !important; }
        .market-tabs::-webkit-scrollbar { display: none; }
        .desktop-only-cell { display: none; }
    }
</style>

<script>
    const pairs = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'LINKUSDT', 'AVAXUSDT', 'MATICUSDT', 'SHIBUSDT'];
    const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + pairs.map(p => p.toLowerCase() + '@ticker').join('/'));
    const marketData = {};

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        marketData[data.s] = data;
        renderMarketList();
    };

    function renderMarketList() {
        const tbody = document.getElementById('market-list-all');
        if (!tbody) return;
        let html = '';
        pairs.forEach(p => {
            const d = marketData[p];
            if(!d) return;
            
            const price = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
            const change = parseFloat(d.P).toFixed(2);
            const color = change >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
            const name = p.replace('USDT', '');
            
            html += `
                <tr style="border-bottom: 1px solid #2b3139; cursor: pointer;" onclick="location.href='spot.php?symbol=${p}'">
                    <td style="padding: 15px 20px; display: flex; align-items: center; gap: 12px;">
                        <img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="28" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                        <div>
                            <div style="color: white; font-weight: bold; font-size: 0.95rem;">${name}</div>
                            <div style="color: #666; font-size: 0.75rem;">${name}/USDT</div>
                        </div>
                    </td>
                    <td style="padding: 15px 20px; text-align: right; color: white; font-weight: bold; font-family: monospace; font-size: 0.95rem;">$ ${price}</td>
                    <td style="padding: 15px 20px; text-align: right; color: ${color}; font-weight: bold; font-size: 0.95rem;">${change >= 0 ? '+' : ''}${change}%</td>
                    <td class="desktop-only-cell" style="padding: 15px 20px; text-align: right; color: #848e9c; font-size: 0.8rem;">
                        <div>H: ${parseFloat(d.h).toFixed(2)}</div>
                        <div>L: ${parseFloat(d.l).toFixed(2)}</div>
                    </td>
                    <td class="desktop-only-cell" style="padding: 15px 20px; text-align: right;">
                        <a href="spot.php?symbol=${p}" class="btn-primary" style="padding: 6px 15px; font-size: 0.8rem; border-radius: 6px; text-decoration: none;"><?php echo __('buy'); ?></a>
                    </td>
                </tr>
            `;
        });
        tbody.innerHTML = html;
    }
</script>

<?php include 'footer.php'; ?>