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

<main style="padding: 40px 20px; background: #0b0e11; min-height: calc(100vh - 60px);">
    <div style="max-width: 1200px; margin: 0 auto;">
        <h1 style="color: white; margin-bottom: 30px;"><?php echo __('crypto_markets'); ?></h1>
        
        <div style="display: flex; gap: 20px; margin-bottom: 30px;">
            <div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('24h_volume'); ?></div>
                <div style="font-size: 1.5rem; color: white; margin-top: 10px; font-weight: bold;">$ 84.23B</div>
            </div>
            <div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('fear_greed'); ?></div>
                <div style="font-size: 1.5rem; color: #00c087; margin-top: 10px; font-weight: bold;">74 (Greed)</div>
            </div>
            <div style="flex: 1; background: #1e2329; padding: 20px; border-radius: 12px; border: 1px solid #2b3139;">
                <div style="color: #848e9c; font-size: 0.9rem;"><?php echo __('btc_dominance'); ?></div>
                <div style="font-size: 1.5rem; color: white; margin-top: 10px; font-weight: bold;">52.1%</div>
            </div>
        </div>

        <div style="background: #1e2329; border-radius: 16px; border: 1px solid #2b3139; overflow: hidden;">
            <div style="padding: 20px 30px; border-bottom: 1px solid #2b3139; display: flex; gap: 30px;">
                <span style="color: white; border-bottom: 2px solid var(--primary-color); padding-bottom: 15px; cursor: pointer;"><?php echo __('favorites'); ?></span>
                <span style="color: #848e9c; cursor: pointer;"><?php echo __('all_crypto'); ?></span>
                <span style="color: #848e9c; cursor: pointer;"><?php echo __('nav_spot'); ?></span>
                <span style="color: #848e9c; cursor: pointer;"><?php echo __('nav_futures'); ?></span>
            </div>
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="background: #161a1e;">
                    <tr>
                        <th style="padding: 15px 30px; text-align: left; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('asset'); ?></th>
                        <th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('price'); ?></th>
                        <th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;">24h Change</th>
                        <th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('24h_high_low'); ?></th>
                        <th style="padding: 15px 30px; text-align: right; color: #848e9c; font-weight: normal; font-size: 0.9rem;"><?php echo __('trade_panel'); ?></th>
                    </tr>
                </thead>
                <tbody id="market-list-all">
                    <!-- Filled by WS -->
                </tbody>
            </table>
        </div>
    </div>
</main>

<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');
        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 ? '#00c087' : '#f6465d';
            const name = p.replace('USDT', '');
            
            html += `
                <tr style="border-bottom: 1px solid #2b3139; transition: background 0.2s; cursor: pointer;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                    <td style="padding: 20px 30px; display: flex; align-items: center; gap: 15px;">
                        <img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="32" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                        <div>
                            <div style="color: white; font-weight: bold;">${name}</div>
                            <div style="color: #666; font-size: 0.8rem;">${name}/USDT</div>
                        </div>
                    </td>
                    <td style="padding: 20px 30px; text-align: right; color: white; font-weight: bold; font-family: monospace;">$ ${price}</td>
                    <td style="padding: 20px 30px; text-align: right; color: ${color}; font-weight: bold;">${change >= 0 ? '+' : ''}${change}%</td>
                    <td style="padding: 20px 30px; text-align: right; color: #848e9c; font-size: 0.85rem;">
                        <div>H: ${parseFloat(d.h).toFixed(2)}</div>
                        <div>L: ${parseFloat(d.l).toFixed(2)}</div>
                    </td>
                    <td style="padding: 20px 30px; text-align: right;">
                        <a href="spot.php?symbol=${p}" class="btn-primary" style="padding: 8px 20px; font-size: 0.85rem; border-radius: 6px; text-decoration: none;"><?php echo __('buy'); ?></a>
                    </td>
                </tr>
            `;
        });
        tbody.innerHTML = html;
    }
</script>

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