<?php
include 'header.php';

$user_id = $_SESSION['user_id'] ?? null;
$user_assets = [];
if ($user_id) {
    $stmt = $db->prepare("SELECT balance FROM users WHERE id = ?");
    $stmt->execute([$user_id]);
    $usdt_balance = $stmt->fetchColumn();
    $user_assets['USDT'] = (float)($usdt_balance ?: 0);

    $stmt = $db->prepare("SELECT symbol, amount FROM user_assets WHERE user_id = ?");
    $stmt->execute([$user_id]);
    $assets_data = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
    if ($assets_data) {
        foreach ($assets_data as $symbol => $amount) {
            $user_assets[$symbol] = (float)$amount;
        }
    }
}
?>

<style>
    .trading-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; background: #0b0e11; }
    .trading-container { flex-grow: 1; display: flex; min-height: 800px; max-width: 1920px; margin: 0 auto; width: 100%; }
    .left-col { width: 280px; flex-shrink: 0; background: #161a1e; border-right: 1px solid #2b3139; display: flex; flex-direction: column; }
    .center-col { flex: 1; min-width: 600px; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
    .right-col { width: 300px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }

    .chart-header { height: 55px; padding: 0 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 20px; flex-shrink: 0; }
    .chart-box { height: 450px; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
    .bottom-content-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .order-box { padding: 20px; background: #161a1e; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
    .records-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .record-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
    .record-tab { padding: 12px 0; margin-right: 25px; font-size: 13px; font-weight: 600; color: #848e9c; cursor: pointer; position: relative; }
    .record-tab.active { color: white; }
    .record-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-color); }
    
    #records-list-container { height: 350px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    #records-list-container::-webkit-scrollbar { width: 4px; }
    #records-list-container::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }
    table { width: 100%; font-size: 12px; border-collapse: collapse; }
    th { color: #848e9c; font-weight: 500; text-align: left; padding: 10px 15px; border-bottom: 1px solid #2b3139; background: #161a1e; position: sticky; top: 0; z-index: 10; }
    td { padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.02); color: #eaecef; height: 38px; }
    
    .category-tabs { display: flex; padding: 15px 15px 5px; gap: 8px; }
    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 12px; color: #848e9c; cursor: pointer; border: 1px solid transparent; }
    .category-tab.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
    
    .search-box { padding: 10px 15px 15px; position: relative; }
    .search-box i { position: absolute; left: 25px; top: 22px; color: #848e9c; font-size: 12px; }
    .search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px 8px 35px; color: white; font-size: 13px; outline: none; transition: 0.2s; }
    .search-box input:focus { border-color: var(--primary-color); }

    #pairs-list { height: 684px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    #pairs-list::-webkit-scrollbar { width: 4px; }
    #pairs-list::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }

    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); height: 38px; }
    .pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; }

    .input-group { background: #2b3139; border-radius: 4px; padding: 8px 12px; display: flex; align-items: center; margin-bottom: 10px; border: 1px solid #3c424a; }
    .input-group:focus-within { border-color: var(--primary-color); }
    .input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 14px; width: 100%; }
    .input-group .label { color: #848e9c; font-size: 12px; margin-right: 10px; min-width: 40px; }
    .input-group .unit { color: #848e9c; margin-left: 8px; font-size: 12px; }
    .slider-container { margin: 15px 0 20px; }
    input[type=range] { width: 100%; height: 4px; background: #2b3139; border-radius: 2px; outline: none; }
    
    .trade-btn { width: 100%; padding: 12px; border-radius: 4px; font-weight: bold; font-size: 15px; border: none; cursor: pointer; color: white; transition: 0.2s; }
    .btn-buy { background: #0ecb81; }
    .btn-sell { background: #f6465d; }
    .btn-buy:hover, .btn-sell:hover { filter: brightness(1.1); }

    .right-col-tabs { display: flex; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
    .right-col-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; font-weight: 600; color: #848e9c; cursor: pointer; }
    .right-col-tab.active { color: white; background: #1e2329; }
    .ob-header { display: flex; justify-content: space-between; padding: 8px 15px; font-size: 11px; color: #848e9c; border-bottom: 1px solid #2b3139; }
    .ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; cursor: pointer; }
    #ob-panel-content { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    #ob-panel-content::-webkit-scrollbar { width: 4px; }
    #ob-panel-content::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }

    /* Mobile Specific Styles */
    @media (max-width: 991px) {
        .trading-container { flex-direction: column; min-height: auto; }
        .center-col { min-width: 100%; border-right: none; }
        .chart-box { height: 300px; }
        .order-box { padding: 15px; }
        #records-list-container { height: auto; max-height: 400px; }
        .trading-page-wrapper { padding-bottom: 70px; }
        
        .mobile-trade-nav {
            display: flex; background: #161a1e; border-bottom: 1px solid #2b3139; padding: 10px 15px; gap: 10px;
        }
        .mobile-trade-nav a {
            flex: 1; text-align: center; padding: 8px 0; background: #2b3139; border-radius: 8px; font-size: 13px; color: #848e9c; text-decoration: none; font-weight: 600; border: 1px solid transparent;
        }
        .mobile-trade-nav a.active {
            background: rgba(0, 82, 255, 0.1); color: var(--primary-color); border-color: var(--primary-color);
        }
        
        .mobile-symbol-selector {
            display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: #161a1e; border-bottom: 1px solid #2b3139;
        }
    }
    @media (min-width: 992px) {
        .mobile-trade-nav, .mobile-symbol-selector { display: none; }
    }
    
    /* Mobile Drawer */
    #mobile-pairs-drawer {
        position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: #0b0e11; z-index: 3000; transition: 0.3s; padding: 20px; display: flex; flex-direction: column;
    }
    #mobile-pairs-drawer.open { left: 0; }
</style>

<div class="trading-page-wrapper">
    <!-- Mobile Navigation Tabs -->
    <div class="mobile-trade-nav">
        <a href="options.php"><?php echo __('nav_options'); ?></a>
        <a href="spot.php" class="active"><?php echo __('nav_spot'); ?></a>
        <a href="futures.php"><?php echo __('nav_futures'); ?></a>
    </div>

    <!-- Mobile Symbol Selector -->
    <div class="mobile-symbol-selector" onclick="toggleMobilePairs()">
        <div style="display: flex; align-items: center; gap: 10px;">
            <img id="curr-icon-mobile" src="" class="coin-icon" style="width: 28px; height: 28px;">
            <span id="curr-pair-mobile" style="font-weight: 800; font-size: 18px; color: white;">--/--</span>
            <i class="fas fa-caret-down" style="color: #848e9c;"></i>
        </div>
        <div style="text-align: right;">
            <div id="curr-price-mobile" style="font-size: 18px; font-weight: 800; color: #0ecb81;">--</div>
            <div id="curr-change-mobile" style="font-size: 12px; font-weight: 600;">--</div>
        </div>
    </div>

    <div class="trading-container">
        <!-- Left Column -->
        <div class="left-col d-none d-lg-flex">
            <div class="category-tabs">
                <div class="category-tab" onclick="location.href='options.php'"><?php echo __('nav_options'); ?></div>
                <div class="category-tab active" onclick="location.href='spot.php'"><?php echo __('nav_spot'); ?></div>
                <div class="category-tab" onclick="location.href='futures.php'"><?php echo __('nav_futures'); ?></div>
            </div>
            <div class="search-box"><i class="fas fa-search"></i><input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>"></div>
            <div id="pairs-list"></div>
        </div>

        <!-- Center Column -->
        <div class="center-col">
            <div class="chart-header d-none d-lg-flex">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <img id="curr-icon" src="" class="coin-icon">
                    <span id="curr-pair" style="font-weight: 800; font-size: 18px; color:white;">--/--</span>
                </div>
                <div class="stats-item">
                    <div id="curr-price" style="font-size: 20px; font-weight: 800; color: #0ecb81;">--</div>
                    <div id="curr-change" style="font-size: 12px; font-weight: 600;">--</div>
                </div>
            </div>
            <div class="chart-box" id="tv_chart_container"></div>
            <div class="bottom-content-wrapper">
                <div class="order-box">
                    <div style="display: flex; gap: 20px; margin-bottom: 15px;">
                        <div class="record-tab active"><?php echo __('market'); ?></div>
                    </div>
                    <div class="input-group"><span class="label"><?php echo __('price'); ?></span><input type="text" placeholder="<?php echo __('market'); ?>" disabled><span class="unit">USDT</span></div>
                    <div class="input-group"><span class="label"><?php echo __('amount'); ?></span><input type="number" id="spot-amount" step="0.0001" placeholder="0.00"><span class="unit coin-name">--</span></div>
                    <div class="slider-container"><input type="range" id="spot-slider" min="0" max="100" value="0"></div>
                    <div style="display: flex; gap: 15px;">
                        <div style="flex: 1;">
                            <div style="font-size: 12px; color: #848e9c; margin-bottom: 8px;"><?php echo __('available'); ?>: <span id="avail-usdt" style="color:white; font-weight:600">0.00</span> USDT</div>
                            <button id="btn-buy" class="trade-btn btn-buy"><?php echo __('buy'); ?> <span class="coin-name">--</span></button>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-size: 12px; color: #848e9c; margin-bottom: 8px;"><?php echo __('available'); ?>: <span id="avail-coin" style="color:white; font-weight:600">0.00</span> <span class="coin-name">--</span></div>
                            <button id="btn-sell" class="trade-btn btn-sell"><?php echo __('sell'); ?> <span class="coin-name">--</span></button>
                        </div>
                    </div>
                </div>
                <div class="records-container">
                    <div class="record-tabs">
                        <div class="record-tab active" data-status="open"><?php echo __('open_orders'); ?></div>
                        <div class="record-tab" data-status="history"><?php echo __('history_orders'); ?></div>
                    </div>
                    <div id="records-list-container">
                        <table style="width:100%;" id="records-table"></table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="right-col d-none d-xl-flex">
            <div class="right-col-tabs">
                <div class="right-col-tab active" data-tab="ob"><?php echo __('order_book'); ?></div>
                <div class="right-col-tab" data-tab="trades"><?php echo __('trades'); ?></div>
            </div>
            <div id="ob-panel" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                <div class="ob-header"><span><?php echo __('price'); ?></span><span><?php echo __('amount'); ?></span></div>
                <div id="ob-panel-content">
                    <div id="asks-list"></div>
                    <div id="mid-price" style="padding:10px 15px; text-align:center; font-weight:800; font-size:16px; border-top:1px solid #2b3139; border-bottom:1px solid #2b3139;">--</div>
                    <div id="bids-list"></div>
                </div>
            </div>
            <div id="trades-panel" style="display:none; overflow-y:auto; flex:1;">
                <div id="trades-list"></div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Pairs Drawer -->
<div id="mobile-pairs-drawer">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h3 style="margin: 0; font-weight: 800;"><?php echo __('market'); ?></h3>
        <i class="fas fa-times" onclick="toggleMobilePairs()" style="font-size: 20px; color: #848e9c;"></i>
    </div>
    <div class="search-box" style="padding: 0; margin-bottom: 20px;">
        <i class="fas fa-search"></i>
        <input type="text" id="pair-search-mobile" placeholder="<?php echo __('search_currency'); ?>">
    </div>
    <div id="pairs-list-mobile" style="flex: 1; overflow-y: auto;"></div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
const userAssets = <?php echo json_encode($user_assets); ?>;

function toggleMobilePairs() {
    document.getElementById('mobile-pairs-drawer').classList.toggle('open');
}

document.addEventListener('DOMContentLoaded', function() {
    let currentPair = 'BTCUSDT', currentPrice = 0, ws, chartWidget;
    const marketData = {}, pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'];
    const dom = {
        currIcon: document.getElementById('curr-icon'),
        currPair: document.getElementById('curr-pair'),
        currPrice: document.getElementById('curr-price'),
        currChange: document.getElementById('curr-change'),
        currIconMobile: document.getElementById('curr-icon-mobile'),
        currPairMobile: document.getElementById('curr-pair-mobile'),
        currPriceMobile: document.getElementById('curr-price-mobile'),
        currChangeMobile: document.getElementById('curr-change-mobile'),
        tvContainer: document.getElementById('tv_chart_container'),
        pairsList: document.getElementById('pairs-list'),
        pairsListMobile: document.getElementById('pairs-list-mobile'),
        pairSearchMobile: document.getElementById('pair-search-mobile'),
        asksList: document.getElementById('asks-list'),
        bidsList: document.getElementById('bids-list'),
        midPrice: document.getElementById('mid-price'),
        availUsdt: document.getElementById('avail-usdt'),
        availCoin: document.getElementById('avail-coin'),
        coinNames: document.querySelectorAll('.coin-name'),
        amountInput: document.getElementById('spot-amount'),
        slider: document.getElementById('spot-slider'),
        recordsTable: document.getElementById('records-table')
    };

    function updateBalances() {
        const coin = currentPair.replace('USDT', '');
        dom.availUsdt.innerText = parseFloat(userAssets.USDT || 0).toFixed(2);
        dom.availCoin.innerText = parseFloat(userAssets[coin] || 0).toFixed(4);
        dom.coinNames.forEach(el => el.innerText = coin);
    }

    function initChart(symbol) {
        dom.tvContainer.innerHTML = '';
        new TradingView.widget({
            "autosize": true, "symbol": `BINANCE:${symbol}`, "interval": "15", "theme": "dark", "style": "1",
            "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>", "container_id": "tv_chart_container",
            "hide_side_toolbar": true, "allow_symbol_change": false, "studies": ["Volume@tv-basicstudies"],
            "overrides": { "paneProperties.background": "#161a1e" }
        });
    }

    function connectWS() {
        if (ws) ws.close();
        const streams = pairs.map(p => `${p.toLowerCase()}@ticker`).concat([`${currentPair.toLowerCase()}@depth20@100ms`]);
        ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${streams.join('/')}`);
        ws.onmessage = (e) => {
            const { stream, data } = JSON.parse(e.data);
            if (!data) return;
            const type = stream.split('@')[1];
            if (type === 'ticker') {
                marketData[data.s] = data;
                if (data.s === currentPair) {
                    currentPrice = parseFloat(data.c);
                    const color = data.P >= 0 ? '#0ecb81' : '#f6465d';
                    const priceStr = currentPrice.toLocaleString('en-US', {minimumFractionDigits:2});
                    const changeStr = (data.P >= 0 ? '+' : '') + parseFloat(data.P).toFixed(2) + '%';
                    
                    if(dom.currPrice) dom.currPrice.innerText = priceStr;
                    if(dom.currChange) dom.currChange.innerText = changeStr;
                    if(dom.currPrice) dom.currPrice.style.color = dom.currChange.style.color = color;
                    
                    dom.currPriceMobile.innerText = priceStr;
                    dom.currPriceMobile.style.color = color;
                    dom.currChangeMobile.innerText = changeStr;
                    dom.currChangeMobile.style.color = color;
                    
                    if(dom.midPrice) dom.midPrice.innerText = currentPrice.toFixed(2);
                }
                if (dom.pairsList.offsetParent || dom.pairsListMobile.offsetParent) renderPairs();
            } else if (type.startsWith('depth')) {
                if(dom.asksList) {
                    const row = (p, q, c) => `<div class="ob-row" onclick="document.getElementById('spot-amount').value=${parseFloat(q).toFixed(4)};"><span style="color:${c}">${parseFloat(p).toFixed(2)}</span><span>${parseFloat(q).toFixed(4)}</span></div>`;
                    dom.asksList.innerHTML = data.asks.slice(0, 20).reverse().map(a => row(a[0], a[1], '#f6465d')).join('');
                    dom.bidsList.innerHTML = data.bids.slice(0, 20).map(b => row(b[0], b[1], '#0ecb81')).join('');
                }
            }
        };
        ws.onclose = () => setTimeout(connectWS, 5000);
    }

    function renderPairs() {
        const query = document.getElementById('pair-search').value.toUpperCase();
        const queryMobile = dom.pairSearchMobile.value.toUpperCase();
        
        const generateHtml = (q) => pairs.filter(p => p.includes(q)).map(p => {
            const d = marketData[p] || {};
            return `<div class="pair-item ${p === currentPair ? 'active' : ''}" onclick="switchPair('${p}')">
                <img src="https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png" class="coin-icon" onerror="this.style.opacity=0">
                <div style="flex:1; color:white; font-weight:600">${p.replace('USDT','/USDT')}</div>
                <div style="text-align:right"><div style="color:white; font-weight:600">${d.c ? parseFloat(d.c).toFixed(2) : '--'}</div><div style="color:${d.P>=0?'#0ecb81':'#f6465d'}; font-size:11px">${d.P?(d.P>=0?'+':'')+parseFloat(d.P).toFixed(2)+'%':'--'}</div></div>
            </div>`;
        }).join('');
        
        dom.pairsList.innerHTML = generateHtml(query);
        dom.pairsListMobile.innerHTML = generateHtml(queryMobile);
    }

    window.switchPair = (p) => {
        currentPair = p;
        if(dom.currPair) dom.currPair.innerText = p.replace('USDT', '/USDT');
        dom.currPairMobile.innerText = p.replace('USDT', '/USDT');
        if(dom.currIcon) dom.currIcon.src = `https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png`;
        dom.currIconMobile.src = `https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png`;
        initChart(p);
        updateBalances();
        connectWS();
        if(document.getElementById('mobile-pairs-drawer').classList.contains('open')) toggleMobilePairs();
    };

    dom.pairSearchMobile.addEventListener('input', renderPairs);

    async function placeOrder(side) {
        const amount = parseFloat(dom.amountInput.value);
        if (!amount || amount <= 0) { alert("<?php echo __('amount'); ?> > 0"); return; }
        const price = currentPrice;
        const total = amount * price;

        try {
            const r = await fetch('api/place_order.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    symbol: currentPair, type: 'spot', side: side, order_type: 'market',
                    price: price, amount: amount, total: total
                })
            });
            const res = await r.json();
            if (res.success) { alert("<?php echo __('order_placed'); ?>"); fetchOrders(); }
            else { alert(res.error || "Error"); }
        } catch(e) { alert("Network Error"); }
    }

    document.getElementById('btn-buy').onclick = () => placeOrder('buy');
    document.getElementById('btn-sell').onclick = () => placeOrder('sell');

    let activeTab = 'open';
    async function fetchOrders() {
        try {
            const r = await fetch(`api/get_orders.php?type=spot&status=${activeTab}`);
            const res = await r.json();
            if (res.success) renderOrders(res.data);
        } catch(e) {}
    }

    function renderOrders(orders) {
        if (!orders || orders.length === 0) { dom.recordsTable.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:30px; color:#848e9c"><?php echo __('no_records'); ?></td></tr>'; return; }
        let h = `<thead><tr><th><?php echo __('pair'); ?></th><th><?php echo __('direction'); ?></th><th><?php echo __('price'); ?></th><th><?php echo __('amount'); ?></th><th><?php echo __('status'); ?></th><th><?php echo __('time'); ?></th></tr></thead><tbody>`;
        orders.forEach(o => {
            h += `<tr><td>${o.symbol}</td><td style="color:${o.side==='buy'?'#0ecb81':'#f6465d'}">${o.side==='buy'?'<?php echo __('buy'); ?>':'<?php echo __('sell'); ?>'}</td><td>${parseFloat(o.price).toFixed(2)}</td><td>${parseFloat(o.amount).toFixed(4)}</td><td>${o.status}</td><td style="color:#848e9c">${o.created_at}</td></tr>`;
        });
        dom.recordsTable.innerHTML = h + '</tbody>';
    }

    document.querySelectorAll('.record-tab').forEach(t => t.onclick = () => {
        if (!t.dataset.status) return;
        document.querySelector('.record-tabs .active').classList.remove('active');
        t.classList.add('active');
        activeTab = t.dataset.status;
        fetchOrders();
    });

    switchPair('BTCUSDT');
    fetchOrders();
    setInterval(fetchOrders, 5000);
});
</script>
<?php include 'footer.php'; ?>
