<?php
require_once __DIR__ . '/includes/lang.php';
require_once __DIR__ . '/includes/header.php';
?>
<main class="container py-5">
    <h1 class="mb-4 fw-bold"><?php echo __('market'); ?></h1>
    <div class="card border-0 bg-transparent">
        <div class="d-none d-md-block table-responsive rounded-4 shadow-lg" style="background: #0b0e11; border: 1px solid #2b3139;">
            <table class="table table-dark table-hover mb-0 align-middle">
                <thead style="background: #161a1e;">
                    <tr class="text-light-50 small border-0">
                        <th class="ps-4 py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('coin') ?></th>
                        <th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('last_price') ?></th>
                        <th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('change_24h') ?></th>
                        <th class="py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('market') ?></th>
                        <th class="text-end pe-4 py-4 border-0 fw-bold text-uppercase" style="letter-spacing: 1px; color: #ffffff !important;"><?= __('action') ?></th>
                    </tr>
                </thead>
                <tbody class="border-0">
                    <?php
                    $vol_suffix = __('vol_unit');
                    $full_coins = [
                        ['name' => __('bitcoin'), 'symbol' => 'BTC', 'price' => '65,432.10', 'change' => '+2.5%', 'vol' => '321' . $vol_suffix],
                        ['name' => __('ethereum'), 'symbol' => 'ETH', 'price' => '3,456.78', 'change' => '+1.8%', 'vol' => '154' . $vol_suffix],
                        ['name' => __('tether'), 'symbol' => 'USDT', 'price' => '1.00', 'change' => '+0.01%', 'vol' => '452' . $vol_suffix],
                        ['name' => __('binance_coin'), 'symbol' => 'BNB', 'price' => '589.20', 'change' => '-0.5%', 'vol' => '12' . $vol_suffix],
                        ['name' => __('solana'), 'symbol' => 'SOL', 'price' => '145.67', 'change' => '+5.2%', 'vol' => '38' . $vol_suffix],
                        ['name' => __('ripple'), 'symbol' => 'XRP', 'price' => '0.62', 'change' => '-1.23%', 'vol' => '8' . $vol_suffix],
                        ['name' => __('cardano'), 'symbol' => 'ADA', 'price' => '0.45', 'change' => '+0.8%', 'vol' => '4' . $vol_suffix],
                        ['name' => __('dogecoin'), 'symbol' => 'DOGE', 'price' => '0.16', 'change' => '+3.4%', 'vol' => '11' . $vol_suffix],
                        ['name' => __('polkadot'), 'symbol' => 'DOT', 'price' => '8.90', 'change' => '-2.1%', 'vol' => '2' . $vol_suffix],
                        ['name' => __('polygon'), 'symbol' => 'MATIC', 'price' => '0.92', 'change' => '+1.5%', 'vol' => '3' . $vol_suffix],
                        ['name' => __('avalanche'), 'symbol' => 'AVAX', 'price' => '45.20', 'change' => '+4.1%', 'vol' => '8' . $vol_suffix],
                        ['name' => __('chainlink'), 'symbol' => 'LINK', 'price' => '18.40', 'change' => '+3.2%', 'vol' => '5' . $vol_suffix],
                        ['name' => __('shiba_inu'), 'symbol' => 'SHIB', 'price' => '0.000027', 'change' => '-3.4%', 'vol' => '2' . $vol_suffix],
                        ['name' => __('tron'), 'symbol' => 'TRX', 'price' => '0.12', 'change' => '+0.5%', 'vol' => '12' . $vol_suffix],
                        ['name' => __('bitcoin_cash'), 'symbol' => 'BCH', 'price' => '456.20', 'change' => '+2.12%', 'vol' => '4.5' . $vol_suffix],
                        ['name' => __('litecoin'), 'symbol' => 'LTC', 'price' => '84.50', 'change' => '+1.45%', 'vol' => '9' . $vol_suffix],
                        ['name' => __('uniswap'), 'symbol' => 'UNI', 'price' => '7.20', 'change' => '-2.12%', 'vol' => '1.2' . $vol_suffix]
                    ];
                    foreach ($full_coins as $coin):
                    ?>
                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.2s;">
                        <td class="ps-4 py-3 border-0">
                            <div class="d-flex align-items-center">
                                <div class="bg-white p-1 rounded-circle me-3 shadow-sm" style="width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;">
                                    <img src="<?php echo getCoinIcon($coin['symbol']); ?>" width="26" height="26" alt="<?= $coin['symbol'] ?>" onerror="handleIconError(this, '<?= $coin['symbol'] ?>')">
                                </div>
                                <div>
                                    <div class="fw-bold text-white fs-5"><?php echo $lang === 'zh' ? __($coin['symbol']) : $coin['symbol']; ?></div>
                                    <div class="text-muted small fw-medium"><?php echo $coin['name']; ?></div>
                                </div>
                            </div>
                        </td>
                        <td class="fw-bold text-white border-0 fs-5 price-val" data-symbol="<?php echo $coin['symbol']; ?>">$<?php echo $coin['price']; ?></td>
                        <td class="border-0 fw-bold fs-5 change-val <?php echo strpos($coin['change'], '+') !== false ? 'text-success' : 'text-danger'; ?>" data-symbol="<?php echo $coin['symbol']; ?>">
                            <?php echo $coin['change']; ?>
                        </td>
                        <td class="border-0" style="width: 150px; height: 60px;">
                            <canvas id="spark-<?= $coin['symbol'] ?>" style="max-width: 120px; height: 40px;"></canvas>
                        </td>
                        <td class="text-end pe-4 border-0">
                            <a href="trade.php?symbol=<?php echo $coin['symbol']; ?>" class="btn btn-primary btn-md px-4 rounded-pill fw-bold"><?= __('trade') ?></a>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <!-- Mobile Market List -->
        <div class="d-md-none">
            <?php foreach ($full_coins as $coin): ?>
            <div class="p-3 mb-2 rounded-4 bg-black bg-opacity-20 border border-secondary border-opacity-50 d-flex align-items-center justify-content-between" onclick="location.href='trade.php?symbol=<?= $coin['symbol'] ?>'">
                <div class="d-flex align-items-center gap-2">
                    <img src="<?= getCoinIcon($coin['symbol']) ?>" width="32" height="32" class="rounded-circle bg-white p-1" alt="<?= $coin['symbol'] ?>" onerror="handleIconError(this, '<?= $coin['symbol'] ?>')">
                    <div>
                        <div class="fw-bold text-white"><?= $lang === 'zh' ? __($coin['symbol']) : $coin['symbol'] ?></div>
                        <div class="text-white-50 x-small"><?= $coin['vol'] ?></div>
                    </div>
                </div>
                <div class="text-center">
                    <div class="fw-bold text-white price-val" data-symbol="<?= $coin['symbol'] ?>">$<?= $coin['price'] ?></div>
                </div>
                <div class="text-end">
                    <div class="fw-bold change-val <?= strpos($coin['change'], '+') !== false ? 'text-success' : 'text-danger' ?>" data-symbol="<?= $coin['symbol'] ?>"><?= $coin['change'] ?></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
async function updatePrices() {
    const symbols = [<?php echo "'" . implode("','", array_map(function($c){return $c['symbol'];}, $full_coins)) . "'"; ?>];
    for (const s of symbols) {
        try {
            const symbol = s === 'USDT' ? 'USDTDAI' : s + 'USDT';
            const response = await fetch(`api/prices.php?type=ticker&symbol=${symbol}`);
            const data = await response.json();
            
            if (!data || (typeof data !== 'object')) continue;
            
            const price = parseFloat(data.lastPrice);
            const change = parseFloat(data.priceChangePercent);
            
            if (isNaN(price)) continue;
            
            const priceCells = document.querySelectorAll(`.price-val[data-symbol="${s}"]`);
            const changeCells = document.querySelectorAll(`.change-val[data-symbol="${s}"]`);
            
            const formattedPrice = price < 0.0001 ? price.toFixed(8) : (price < 1 ? price.toFixed(6) : (price < 100 ? price.toFixed(4) : price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})));
            const formattedChange = (isNaN(change) ? '0.00' : (change >= 0 ? '+' : '') + change.toFixed(2)) + '%';
            
            priceCells.forEach(cell => {
                cell.textContent = '$' + formattedPrice;
            });
            
            changeCells.forEach(cell => {
                cell.textContent = formattedChange;
                cell.className = `border-0 fw-bold fs-5 change-val ${change >= 0 ? 'text-success' : 'text-danger'}`;
                // Special handling for mobile view class
                if (cell.parentElement.classList.contains('text-end')) {
                    cell.className = `fw-bold change-val ${change >= 0 ? 'text-success' : 'text-danger'}`;
                }
            });
        } catch (err) {
            console.error(`Failed to fetch price for ${s}:`, err);
        }
    }
}

async function initSparklines() {
    updatePrices(); // Initial price update
    setInterval(updatePrices, 10000); // Update every 10 seconds
    
    const symbols = [<?php echo "'" . implode("','", array_map(function($c){return $c['symbol'];}, $full_coins)) . "'"; ?>];
    for (const s of symbols) {
        try {
            const symbol = s === 'USDT' ? 'USDTDAI' : s + 'USDT';
            const response = await fetch(`api/prices.php?type=klines&symbol=${symbol}&interval=1h&limit=20`);
            const data = await response.json();
            const prices = data.map(d => parseFloat(d[4]));
            const canvas = document.getElementById(`spark-${s}`);
            if (!canvas) continue;
            const ctx = canvas.getContext('2d');
            const isUp = prices[prices.length - 1] >= prices[0];
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: new Array(prices.length).fill(''),
                    datasets: [{
                        data: prices,
                        borderColor: isUp ? '#0ecb81' : '#f6465d',
                        borderWidth: 2,
                        pointRadius: 0,
                        fill: true,
                        backgroundColor: isUp ? 'rgba(14, 203, 129, 0.1)' : 'rgba(246, 70, 93, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    plugins: { legend: { display: false }, tooltip: { enabled: false } },
                    scales: { x: { display: false }, y: { display: false } },
                    maintainAspectRatio: false,
                    responsive: true
                }
            });
        } catch (err) {}
    }
}
initSparklines();
</script>
<style>
    .x-small { font-size: 11px; }
</style>
</main>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
