<?php
session_start();
include 'header.php';
require_once 'db/config.php';

$user_id = $_SESSION['user_id'] ?? null;
$balance = 0;
if ($user_id) {
    $stmt = db()->prepare("SELECT balance FROM users WHERE id = ?");
    $stmt->execute([$user_id]);
    $user = $stmt->fetch();
    $balance = $user['balance'] ?? 0;
}
?>

<style>
    :root {
        --bg-color: #0b0e11;
        --panel-bg: #161a1e;
        --border-color: #2b3139;
        --text-primary: #EAECEF;
        --text-secondary: #848e9c;
        --accent-color: #4facfe;
        --up-color: #00c087;
        --down-color: #f6465d;
        --input-bg: #1e2329;
    }

    body { background-color: var(--bg-color); color: var(--text-primary); font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; margin: 0; overflow: hidden; }
    .trading-layout { display: flex; height: calc(100vh - 60px); gap: 1px; background: var(--border-color); }
    .panel { background: var(--panel-bg); display: flex; flex-direction: column; overflow: hidden; }
    .market-panel { width: 280px; flex-shrink: 0; }
    .search-box { padding: 12px; border-bottom: 1px solid var(--border-color); }
    .search-input-wrapper { position: relative; }
    .search-input-wrapper input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); color: white; padding: 6px 12px 6px 32px; border-radius: 4px; font-size: 13px; outline: none; }
    .search-input-wrapper i { position: absolute; left: 10px; top: 8px; color: var(--text-secondary); }
    .pair-item { display: flex; justify-content: space-between; padding: 10px 12px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
    .pair-item:hover { background: rgba(255,255,255,0.05); }
    .pair-item.active { background: rgba(79, 172, 254, 0.1); }
    .center-panel { flex: 1; overflow-y: auto; }
    .info-bar { height: 50px; display: flex; align-items: center; padding: 0 15px; gap: 20px; border-bottom: 1px solid var(--border-color); }
    .chart-container { height: 400px; background: var(--bg-color); }
    .order-form-panel { padding: 20px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color); }
    .order-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .margin-controls { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
    .ctrl-btn { background: var(--input-bg); border: 1px solid var(--border-color); color: white; padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
    .ctrl-btn.active { border-color: var(--accent-color); color: var(--accent-color); }
    .order-type-tabs { display: flex; gap: 15px; margin-left: 10px; }
    .order-type-btn { background: none; border: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; padding: 0; }
    .order-type-btn.active { color: var(--accent-color); font-weight: bold; }
    .input-row { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; margin-bottom: 12px; padding: 8px 12px; }
    .input-label { color: var(--text-secondary); font-size: 13px; width: 60px; }
    .input-row input { flex: 1; background: transparent; border: none; color: white; text-align: right; outline: none; font-size: 14px; }
    .input-row input:disabled { color: var(--text-secondary); cursor: not-allowed; }
    .input-unit { color: var(--text-secondary); font-size: 12px; margin-left: 8px; width: 40px; text-align: right; }
    .slider-container { margin: 15px 0 25px 0; padding: 0 5px; position: relative; }
    .slider-marks { display: flex; justify-content: space-between; margin-top: -10px; position: relative; padding: 0 8px; pointer-events: none; }
    .mark-dot { width: 8px; height: 8px; background: var(--border-color); border: 2px solid var(--input-bg); border-radius: 50%; cursor: pointer; z-index: 2; pointer-events: auto; transform: translateY(-2px); }
    .mark-dot.active { background: var(--accent-color); border-color: var(--accent-color); }
    .slider-labels { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
    .label-item { color: var(--text-secondary); font-size: 10px; cursor: pointer; user-select: none; width: 25px; text-align: center; }
    .label-item.active { color: var(--text-primary); }
    .trade-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
    .btn-trade { padding: 12px; border: none; border-radius: 4px; font-weight: bold; font-size: 15px; cursor: pointer; color: white; transition: opacity 0.2s; }
    .btn-trade:active { opacity: 0.8; }
    .btn-trade.buy { background: var(--up-color); }
    .btn-trade.sell { background: var(--down-color); }
    .tabs-section { flex: 1; }
    .tabs-header { display: flex; border-bottom: 1px solid var(--border-color); padding: 0 15px; }
    .tab-btn { background: none; border: none; color: var(--text-secondary); padding: 12px 15px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; }
    .tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
    .order-book-panel { width: 300px; flex-shrink: 0; }
    .ob-header { padding: 10px 15px; font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; }
    .ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; }
    .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; }
    .ob-val { z-index: 1; position: relative; }
    input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; padding: 0; }
    input[type=range]:focus { outline: none; }
    input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--border-color); border-radius: 2px; }
    input[type=range]::-webkit-slider-thumb { height: 14px; width: 14px; border-radius: 50%; background: white; cursor: pointer; -webkit-appearance: none; margin-top: -5px; box-shadow: 0 0 2px rgba(0,0,0,0.5); border: 2px solid var(--accent-color); z-index: 3; position: relative; }
    .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
    .modal-box { background: var(--panel-bg); padding: 30px; border-radius: 8px; width: 400px; border: 1px solid var(--border-color); }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
</style>

<div class="trading-layout">
    <div class="panel market-panel">
        <div class="search-box">
            <div class="search-input-wrapper">
                <i class="fas fa-search"></i>
                <input type="text" id="market-search" placeholder="搜索永续合约" autocomplete="off">
            </div>
        </div>
        <div style="display: flex; padding: 8px 12px; font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color);">
            <span style="flex: 1.5;">币对</span>
            <span style="flex: 1; text-align: right;">价格</span>
            <span style="flex: 1; text-align: right;">涨跌</span>
        </div>
        <div id="pairs-list" style="flex: 1; overflow-y: auto;"></div>
    </div>

    <div class="panel center-panel">
        <div class="info-bar">
            <div style="display: flex; align-items: center; gap: 10px;">
                <img id="current-logo" src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/btc.png" width="24" height="24" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                <div style="display: flex; flex-direction: column;">
                    <span id="current-pair-display" style="font-size: 15px; font-weight: bold;">BTC/USDT 永续</span>
                    <span id="leverage-display" style="font-size: 10px; color: var(--accent-color); cursor: pointer;" onclick="showLevModal()">20x</span>
                </div>
            </div>
            <div id="last-price" style="font-size: 16px; font-weight: bold; color: var(--up-color);">--</div>
            <div id="price-change" style="font-size: 12px;">--</div>
            <div style="display: flex; gap: 20px; margin-left: auto; font-size: 12px;">
                <div style="color: var(--text-secondary);">标记 <span id="mark-price" style="color: white; margin-left: 4px;">--</span></div>
                <div style="color: var(--text-secondary);">指数 <span id="index-price" style="color: white; margin-left: 4px;">--</span></div>
                <div style="color: var(--text-secondary);">24h额 <span id="vol-24h" style="color: white; margin-left: 4px;">--</span></div>
            </div>
        </div>

        <div class="chart-container">
            <div id="tv_chart_container" style="height: 100%;"></div>
        </div>

        <div class="order-form-panel">
            <div class="margin-controls">
                <button class="ctrl-btn active" id="margin-isolated" onclick="setMargin('isolated')">逐仓</button>
                <button class="ctrl-btn" id="margin-cross" onclick="setMargin('cross')">全仓</button>
                <button class="ctrl-btn" onclick="showLevModal()"><span id="leverage-val">20</span>x</button>
                <div class="order-type-tabs">
                    <button class="order-type-btn active" onclick="setOrderType('limit')">限价</button>
                    <button class="order-type-btn" onclick="setOrderType('market')">市价</button>
                </div>
            </div>
            
            <div class="order-form-grid">
                <div>
                    <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px;">
                        <span style="color: var(--text-secondary);">合约开仓</span>
                        <span style="color: var(--text-secondary);">可用: <span id="available-bal" style="color: white;"><?php echo number_format($balance, 2); ?></span> USDT</span>
                    </div>
                    <div class="input-row" id="price-row">
                        <span class="input-label">价格</span>
                        <input type="number" id="order-price" placeholder="0.00" step="0.01">
                        <span class="input-unit">USDT</span>
                    </div>
                    <div class="input-row" id="market-price-row" style="display: none;">
                        <span class="input-label">价格</span>
                        <input type="text" value="市场最优价" disabled>
                        <span class="input-unit">USDT</span>
                    </div>
                    <div class="input-row">
                        <span class="input-label">数量</span>
                        <input type="number" id="order-amount" placeholder="0" step="1">
                        <span class="input-unit">张</span>
                    </div>
                </div>
                <div>
                    <div class="slider-container" style="margin-top: 25px;">
                        <input type="range" min="0" max="100" value="0" id="order-slider" oninput="updateFromSlider(this.value)">
                        <div class="slider-marks">
                            <div class="mark-dot" onclick="setSlider(0)"></div>
                            <div class="mark-dot" onclick="setSlider(25)"></div>
                            <div class="mark-dot" onclick="setSlider(50)"></div>
                            <div class="mark-dot" onclick="setSlider(75)"></div>
                            <div class="mark-dot" onclick="setSlider(100)"></div>
                        </div>
                        <div class="slider-labels">
                            <div class="label-item" onclick="setSlider(0)">0%</div>
                            <div class="label-item" onclick="setSlider(25)">25%</div>
                            <div class="label-item" onclick="setSlider(50)">50%</div>
                            <div class="label-item" onclick="setSlider(75)">75%</div>
                            <div class="label-item" onclick="setSlider(100)">100%</div>
                        </div>
                    </div>
                    <div style="margin-top: 15px; font-size: 13px; display: flex; justify-content: space-between;">
                        <span style="color: var(--text-secondary);">所需成本</span>
                        <span><span id="order-cost">0.00</span> USDT</span>
                    </div>
                </div>
            </div>

            <div class="trade-btns">
                <button class="btn-trade buy" onclick="placeOrder('buy')">买入/开多</button>
                <button class="btn-trade sell" onclick="placeOrder('sell')">卖出/开空</button>
            </div>
        </div>

        <div class="tabs-section">
            <div class="tabs-header">
                <button class="tab-btn active" id="tab-positions" onclick="switchTab(this, 'positions')">当前持仓</button>
                <button class="tab-btn" id="tab-orders" onclick="switchTab(this, 'open')">当前委托</button>
                <button class="tab-btn" id="tab-history" onclick="switchTab(this, 'history')">历史委托</button>
            </div>
            <div id="tab-content" style="padding: 0; min-height: 250px;">
                <table style="width: 100%; font-size: 12px; border-collapse: collapse;">
                    <thead id="data-thead" style="color: var(--text-secondary); text-align: left; background: rgba(0,0,0,0.1);">
                    </thead>
                    <tbody id="data-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="panel order-book-panel">
        <div class="ob-header"><span>价格(USDT)</span><span>数量(张)</span></div>
        <div id="asks-list" style="display: flex; flex-direction: column-reverse; flex: 1; overflow: hidden;"></div>
        <div id="mid-price-area" style="padding: 10px 15px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); text-align: center;">
            <div id="ob-mid-price" style="font-size: 16px; font-weight: bold;">--</div>
            <div style="font-size: 11px; color: var(--text-secondary);">指数价格 <span id="ob-index-price">--</span></div>
        </div>
        <div id="bids-list" style="flex: 1; overflow: hidden;"></div>
    </div>
</div>

<div id="lev-modal" class="modal">
    <div class="modal-box">
        <h3 style="margin: 0 0 20px 0;">调整杠杆</h3>
        <input type="range" min="1" max="125" value="20" id="lev-range" style="margin: 20px 0;" oninput="document.getElementById('lev-val-big').innerText = this.value + 'x'">
        <div id="lev-val-big" style="text-align: center; font-size: 36px; font-weight: bold; color: var(--accent-color); margin-bottom: 30px;">20x</div>
        <div style="display: flex; gap: 15px;">
            <button onclick="hideLevModal()" style="flex: 1; padding: 12px; background: #2b3139; border: none; color: white; border-radius: 4px; cursor: pointer;">取消</button>
            <button onclick="confirmLev()" style="flex: 1; padding: 12px; background: var(--accent-color); border: none; color: white; border-radius: 4px; cursor: pointer;">确认</button>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
    let currentPair = 'BTCUSDT';
    let currentPrice = 0;
    let leverage = 20;
    let usdtBalance = <?php echo $balance; ?>;
    let marketData = {};
    let orderType = 'limit';
    let activeTab = 'positions';
    const faceValue = 10; 

    const pairs = [
        'BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 'TRXUSDT', 'DOTUSDT',
        'LINKUSDT', 'PEPEUSDT', 'SHIBUSDT', 'NEARUSDT', 'LTCUSDT', 'MATICUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 'FILUSDT',
        'APTUSDT', 'ARBUSDT', 'OPUSDT', 'TIAUSDT', 'ORDIUSDT', 'SUIUSDT', 'RNDRUSDT', 'FETUSDT', 'AGIXUSDT', 'WLDUSDT'
    ];

    function initChart(symbol) {
        new TradingView.widget({
            "width": "100%", "height": "100%", "symbol": "BINANCE:" + symbol, "interval": "15", "timezone": "Etc/UTC", "theme": "dark", "style": "1", "locale": "zh_CN", "container_id": "tv_chart_container", "backgroundColor": "#0b0e11", "gridColor": "rgba(42, 46, 57, 0.05)", "hide_side_toolbar": true, "allow_symbol_change": false, "save_image": false
        });
    }
    initChart(currentPair);

    let ws;
    function connectWS() {
        if (ws) ws.close();
        const streams = pairs.map(p => p.toLowerCase() + '@ticker').join('/');
        ws = new WebSocket(`wss://fstream.binance.com/ws/${streams}`);
        ws.onmessage = (e) => {
            const data = JSON.parse(e.data);
            marketData[data.s] = data;
            renderPairs();
            if (data.s === currentPair) {
                updateUIWithData(data);
            }
            if (activeTab === 'positions') fetchOrders(); 
        };
    }
    connectWS();

    function updateUIWithData(data) {
        currentPrice = parseFloat(data.c);
        document.getElementById('last-price').innerText = currentPrice.toLocaleString();
        document.getElementById('last-price').style.color = data.P >= 0 ? 'var(--up-color)' : 'var(--down-color)';
        document.getElementById('price-change').innerText = (data.P >= 0 ? '+' : '') + data.P + '%';
        document.getElementById('price-change').style.color = data.P >= 0 ? 'var(--up-color)' : 'var(--down-color)';
        document.getElementById('mark-price').innerText = currentPrice.toLocaleString();
        document.getElementById('index-price').innerText = (currentPrice * 0.9998).toFixed(2);
        document.getElementById('vol-24h').innerText = parseFloat(data.q).toLocaleString();
        document.getElementById('ob-mid-price').innerText = currentPrice.toLocaleString();
        document.getElementById('ob-index-price').innerText = (currentPrice * 0.9998).toFixed(2);
        updateOrderBook();
        
        const op = document.getElementById('order-price');
        if (!op.value || op.getAttribute('data-auto') === 'true') {
            op.value = currentPrice;
            op.setAttribute('data-auto', 'true');
        }
    }

    function renderPairs() {
        const list = document.getElementById('pairs-list');
        const search = document.getElementById('market-search').value.toUpperCase();
        let html = '';
        pairs.forEach(p => {
            if (search && !p.includes(search)) return;
            const d = marketData[p] || {c: 0, P: 0};
            const name = p.replace('USDT', '');
            html += `
                <div class="pair-item ${currentPair === p ? 'active' : ''}" onclick="switchPair('${p}')">
                    <div style="display: flex; align-items: center; gap: 8px; flex: 1.5;">
                        <img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png" width="18" height="18" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                        <div>
                            <div style="font-weight: bold; font-size: 13px;">${name}/USDT</div>
                            <div style="font-size: 10px; color: var(--text-secondary);">永续</div>
                        </div>
                    </div>
                    <span style="flex: 1; text-align: right; font-size: 13px;">${parseFloat(d.c).toLocaleString()}</span>
                    <span style="flex: 1; text-align: right; font-size: 13px; color: ${d.P >= 0 ? 'var(--up-color)' : 'var(--down-color)'}">${(d.P >= 0 ? '+' : '') + d.P}%</span>
                </div>
            `;
        });
        list.innerHTML = html;
    }

    function switchPair(p) {
        currentPair = p;
        const name = p.replace('USDT', '');
        document.getElementById('current-pair-display').innerText = name + '/USDT 永续';
        document.getElementById('current-logo').src = `https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/${name.toLowerCase()}.png`;
        
        if (marketData[p]) {
            updateUIWithData(marketData[p]);
        } else {
            document.getElementById('last-price').innerText = '--';
            document.getElementById('order-price').value = '';
        }
        
        document.getElementById('order-price').setAttribute('data-auto', 'true');
        document.getElementById('order-amount').value = '';
        document.getElementById('order-slider').value = 0;
        document.getElementById('order-cost').innerText = '0.00';
        updateSliderMarks(0);
        initChart(p);
        renderPairs();
    }

    function setOrderType(type) {
        orderType = type;
        document.querySelectorAll('.order-type-btn').forEach(btn => btn.classList.toggle('active', btn.innerText.includes(type === 'limit' ? '限价' : '市价')));
        document.getElementById('price-row').style.display = type === 'limit' ? 'flex' : 'none';
        document.getElementById('market-price-row').style.display = type === 'market' ? 'flex' : 'none';
        updateFromSlider(document.getElementById('order-slider').value);
    }

    function updateOrderBook() {
        const asks = document.getElementById('asks-list');
        const bids = document.getElementById('bids-list');
        let asksHtml = ''; let bidsHtml = '';
        const step = currentPrice * 0.0001;
        for(let i=0; i<15; i++) {
            const askPrice = currentPrice + (i + 1) * step;
            const bidPrice = currentPrice - (i + 1) * step;
            asksHtml += `<div class="ob-row"><div class="ob-bar" style="background: rgba(246, 70, 93, 0.1); width: ${Math.random()*100}%;"></div><span class="ob-val" style="color: var(--down-color);">${askPrice.toFixed(1)}</span><span class="ob-val">${(Math.random()*200).toFixed(0)}</span></div>`;
            bidsHtml += `<div class="ob-row"><div class="ob-bar" style="background: rgba(0, 192, 135, 0.1); width: ${Math.random()*100}%;"></div><span class="ob-val" style="color: var(--up-color);">${bidPrice.toFixed(1)}</span><span class="ob-val">${(Math.random()*200).toFixed(0)}</span></div>`;
        }
        asks.innerHTML = asksHtml; bids.innerHTML = bidsHtml;
    }

    function updateFromSlider(val) {
        val = parseFloat(val);
        const cost = usdtBalance * (val / 100);
        const amount = Math.floor((cost * leverage) / faceValue); 
        document.getElementById('order-amount').value = amount > 0 ? amount : '';
        document.getElementById('order-cost').innerText = cost.toFixed(2);
        updateSliderMarks(val);
    }

    function updateFromInputs() {
        const amount = parseFloat(document.getElementById('order-amount').value) || 0;
        const cost = (amount * faceValue) / leverage;
        document.getElementById('order-cost').innerText = cost.toFixed(2);
        let percentage = usdtBalance > 0 ? (cost / usdtBalance) * 100 : 0;
        percentage = Math.min(Math.max(percentage, 0), 100);
        document.getElementById('order-slider').value = percentage;
        updateSliderMarks(percentage);
    }

    function updateSliderMarks(val) {
        document.querySelectorAll('.mark-dot').forEach((m, i) => { if (i * 25 <= val) m.classList.add('active'); else m.classList.remove('active'); });
        document.querySelectorAll('.label-item').forEach((l, i) => { if (Math.abs(i * 25 - val) < 5) l.classList.add('active'); else l.classList.remove('active'); });
    }

    function setSlider(val) { document.getElementById('order-slider').value = val; updateFromSlider(val); }

    document.getElementById('order-amount').addEventListener('input', updateFromInputs);
    document.getElementById('order-price').addEventListener('input', (e) => {
        e.target.setAttribute('data-auto', 'false');
        updateFromInputs();
    });

    function showLevModal() { 
        document.getElementById('lev-range').value = leverage;
        document.getElementById('lev-val-big').innerText = leverage + 'x';
        document.getElementById('lev-modal').style.display = 'flex'; 
    }
    function hideLevModal() { document.getElementById('lev-modal').style.display = 'none'; }
    function confirmLev() {
        leverage = document.getElementById('lev-range').value;
        document.getElementById('leverage-display').innerText = leverage + 'x';
        document.getElementById('leverage-val').innerText = leverage;
        hideLevModal();
        updateFromSlider(document.getElementById('order-slider').value);
    }

    function setMargin(type) {
        document.querySelectorAll('.ctrl-btn').forEach(btn => { if (btn.innerText.includes('仓')) btn.classList.toggle('active', btn.id.includes(type)); });
    }

    async function placeOrder(side) {
        const amount = parseFloat(document.getElementById('order-amount').value);
        if (!amount) return alert('请输入数量');
        const price = orderType === 'limit' ? parseFloat(document.getElementById('order-price').value || currentPrice) : currentPrice;
        const response = await fetch('api/place_order.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                symbol: currentPair, type: 'futures', side: side,
                order_type: orderType, price: price, amount: amount, leverage: leverage, total: amount * faceValue
            })
        });
        const res = await response.json();
        if (res.success) { alert('下单成功'); fetchOrders(); updateBalance(); } else { alert('失败: ' + res.error); }
    }

    async function updateBalance() {
        const resp = await fetch('api/get_assets.php');
        const res = await resp.json();
        if (res.success) {
            const usdt = res.data.find(a => a.symbol === 'USDT');
            if (usdt) {
                usdtBalance = usdt.amount;
                document.getElementById('available-bal').innerText = usdtBalance.toFixed(2);
            }
        }
    }

    async function fetchOrders() {
        const response = await fetch(`api/get_orders.php?type=futures&status=${activeTab}`);
        const res = await response.json();
        const tbody = document.getElementById('data-tbody');
        const thead = document.getElementById('data-thead');

        if (activeTab === 'positions') {
            thead.innerHTML = `<tr><th style="padding: 12px;">合约</th><th style="padding: 12px;">仓位</th><th style="padding: 12px;">开仓价</th><th style="padding: 12px;">当前价</th><th style="padding: 12px;">强平价</th><th style="padding: 12px;">未实现盈亏</th><th style="padding: 12px; text-align: right;">操作</th></tr>`;
        } else {
            thead.innerHTML = `<tr><th style="padding: 12px;">时间</th><th style="padding: 12px;">合约</th><th style="padding: 12px;">方向</th><th style="padding: 12px;">委托价</th><th style="padding: 12px;">数量(张)</th><th style="padding: 12px;">状态</th><th style="padding: 12px; text-align: right;">操作</th></tr>`;
        }

        if (res.success && res.data.length > 0) {
            let html = '';
            res.data.forEach(o => {
                if (activeTab === 'positions') {
                    const price = marketData[o.symbol] ? parseFloat(marketData[o.symbol].c) : o.price;
                    const nominal = o.amount * faceValue;
                    let pnl = 0;
                    if (o.side === 'buy') pnl = (price / o.price - 1) * nominal;
                    else pnl = (1 - price / o.price) * nominal;
                    
                    const color = o.side === 'buy' ? 'var(--up-color)' : 'var(--down-color)';
                    html += `
                        <tr style="border-bottom: 1px solid var(--border-color);">
                            <td style="padding: 12px;"><div style="font-weight: bold;">${o.symbol}</div><div style="font-size: 10px; color: var(--text-secondary);">永续</div></td>
                            <td style="padding: 12px;"><span style="color: color;">${o.side === 'buy' ? '做多' : '做空'} ${o.leverage}x</span><br>${o.amount} 张</td>
                            <td style="padding: 12px;">${parseFloat(o.price).toLocaleString()}</td>
                            <td style="padding: 12px;">${price.toLocaleString()}</td>
                            <td style="padding: 12px;">${(o.side === 'buy' ? o.price * (1 - 0.9/o.leverage) : o.price * (1 + 0.9/o.leverage)).toFixed(2)}</td>
                            <td style="padding: 12px; color: ${pnl >= 0 ? 'var(--up-color)' : 'var(--down-color)'}">${(pnl >= 0 ? '+' : '') + pnl.toFixed(2)} USDT</td>
                            <td style="padding: 12px; text-align: right;">
                                <button onclick="closePosition(${o.id})" style="background: none; border: 1px solid var(--text-secondary); color: white; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">平仓</button>
                            </td>
                        </tr>
                    `;
                } else {
                    html += `
                        <tr style="border-bottom: 1px solid var(--border-color);">
                            <td style="padding: 12px;">${o.created_at}</td>
                            <td style="padding: 12px; font-weight: bold;">${o.symbol}</td>
                            <td style="padding: 12px; color: ${o.side === 'buy' ? 'var(--up-color)' : 'var(--down-color)'}">${o.side === 'buy' ? '开多' : '开空'}</td>
                            <td style="padding: 12px;">${parseFloat(o.price).toLocaleString()}</td>
                            <td style="padding: 12px;">${o.amount}</td>
                            <td style="padding: 12px;">${o.status === 'open' ? '委托中' : '已完成'}</td>
                            <td style="padding: 12px; text-align: right;">
                                ${o.status === 'open' ? `<button onclick="closePosition(${o.id})" style="background: none; border: 1px solid var(--down-color); color: var(--down-color); padding: 2px 8px; border-radius: 4px; cursor: pointer;">取消</button>` : '--'}
                            </td>
                        </tr>
                    `;
                }
            });
            tbody.innerHTML = html;
        } else {
            tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; padding: 50px; color: var(--text-secondary); opacity: 0.5;">暂无记录</td></tr>`;
        }
    }

    function switchTab(btn, tab) {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        activeTab = tab;
        fetchOrders();
    }

    async function closePosition(id) {
        if (!confirm('确定执行此操作?')) return;
        const resp = await fetch('api/cancel_order.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({order_id: id})
        });
        if ((await resp.json()).success) { fetchOrders(); updateBalance(); }
    }

    document.getElementById('market-search').addEventListener('input', renderPairs);
    fetchOrders();
    updateBalance();
    setInterval(() => { if (activeTab === 'positions') fetchOrders(); }, 3000);
</script>

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