<?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>
    * { box-sizing: border-box; }
    :root {
        --bg-color: #0b0e11;
        --panel-bg: #161a1e;
        --border-color: #2b3139;
        --text-primary: #EAECEF;
        --text-secondary: #848e9c;
        --accent-color: #f0b90b;
        --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-y: auto !important; }

    .trading-layout { display: flex; gap: 1px; background: var(--border-color); padding: 0; min-height: calc(100vh - 64px); }
    .panel { background: var(--panel-bg); display: flex; flex-direction: column; }

    /* Market Panel */
    .market-panel { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border-color); }
    #pairs-list { height: 600px; overflow-y: auto; }
    .pair-item { display: flex; justify-content: space-between; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); }
    .pair-item.active { background: rgba(240, 185, 11, 0.1); }

    /* Center Panel */
    .center-panel { flex: 1; background: var(--bg-color); display: flex; flex-direction: column; }
    .info-bar { height: 60px; display: flex; align-items: center; padding: 0 15px; gap: 15px; border-bottom: 1px solid var(--border-color); background: var(--panel-bg); flex-wrap: wrap; }
    .chart-container { height: 450px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); }
    .order-placement-panel { display: flex; gap: 20px; padding: 20px; border-bottom: 1px solid var(--border-color); background: var(--panel-bg); }
    .order-side-column { flex: 1; }

    /* Input Styles */
    .input-row { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; margin-bottom: 10px; padding: 8px 12px; }
    .input-row input { flex: 1; background: transparent; border: none; color: white; text-align: right; outline: none; font-size: 14px; }
    .execute-btn { width: 100%; padding: 12px; border: none; border-radius: 6px; font-weight: bold; font-size: 15px; cursor: pointer; color: white; }

    /* Order Book Panel */
    .order-book-panel { width: 300px; flex-shrink: 0; border-left: 1px solid var(--border-color); }
    .ob-row { display: flex; justify-content: space-between; padding: 4px 15px; font-size: 12px; position: relative; }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .market-panel { display: none; }
        .order-book-panel { width: 250px; }
    }

    @media (max-width: 992px) {
        .trading-layout { flex-direction: column; }
        .order-book-panel { width: 100%; border-left: none; border-top: 1px solid var(--border-color); }
        .chart-container { height: 350px; }
        .info-bar { height: auto; padding: 10px 15px; }
        .order-placement-panel { flex-direction: column; }
    }

    @media (max-width: 576px) {
        .chart-container { height: 300px; }
        .info-bar-stats { display: none !important; }
        .order-side-column:not(:first-child) { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 20px; }
    }
</style>

<div class="trading-layout">
    <!-- Left Panel (Hidden on mobile) -->
    <div class="panel market-panel">
        <div style="padding: 12px; border-bottom: 1px solid var(--border-color);">
            <div style="position: relative;">
                <i class="fas fa-search" style="position: absolute; left: 10px; top: 10px; color: var(--text-secondary);"></i>
                <input type="text" id="market-search" placeholder="搜索币对" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); color: white; padding: 8px 12px 8px 32px; border-radius: 6px; font-size: 13px; outline: none;">
            </div>
        </div>
        <div id="pairs-list"></div>
    </div>

    <!-- Center Panel -->
    <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="28" height="28" onerror="this.src='https://cdn-icons-png.flaticon.com/512/2585/2585274.png'">
                <span id="current-pair-display" style="font-size: 18px; font-weight: bold;">BTC/USDT</span>
            </div>
            <div style="display: flex; flex-direction: column;">
                <span id="last-price" style="font-size: 18px; font-weight: bold; color: var(--up-color);">--</span>
                <span id="price-change" style="font-size: 12px; color: var(--up-color);">--</span>
            </div>
            <div class="info-bar-stats" style="display: flex; gap: 20px; margin-left: auto; font-size: 11px;">
                <div style="color: var(--text-secondary);">24h高 <span id="high-24h" style="color: white; display: block;">--</span></div>
                <div style="color: var(--text-secondary);">24h低 <span id="low-24h" style="color: white; display: block;">--</span></div>
                <div style="color: var(--text-secondary);">24h量 <span id="vol-24h" style="color: white; display: block;">--</span></div>
            </div>
        </div>

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

        <div class="center-content">
            <div class="order-placement-panel">
                <!-- Buy Column -->
                <div class="order-side-column" id="buy-column">
                    <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                        <button class="order-type-btn" onclick="setOrderType('buy', 'limit')" id="buy-limit-btn" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; padding: 0;">限价</button>
                        <button class="order-type-btn active" onclick="setOrderType('buy', 'market')" id="buy-market-btn" style="background: none; border: none; color: var(--accent-color); font-weight: bold; cursor: pointer; font-size: 14px; padding: 0;">市价</button>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px;">
                        <span style="color: var(--text-secondary);">可用 <span id="buy-available">--</span> USDT</span>
                    </div>
                    <div class="input-row" id="buy-price-row" style="display: none;">
                        <span style="color: var(--text-secondary); font-size: 13px;">价格</span>
                        <input type="number" id="buy-price" placeholder="0.00">
                        <span style="color: var(--text-secondary); font-size: 12px; margin-left: 5px;">USDT</span>
                    </div>
                    <div class="input-row" id="buy-market-price-row">
                        <span style="color: var(--text-secondary); font-size: 13px;">价格</span>
                        <input type="text" id="buy-market-price-display" value="以当前市价买入" disabled style="text-align: right; color: var(--text-secondary);">
                    </div>
                    <div class="input-row">
                        <span style="color: var(--text-secondary); font-size: 13px;">数量</span>
                        <input type="number" id="buy-amount" placeholder="0.00">
                        <span class="asset-name" style="color: var(--text-secondary); font-size: 12px; margin-left: 5px; width: 40px; text-align: right;">BTC</span>
                    </div>
                    
                    <div style="margin: 15px 0 25px 0; position: relative; padding: 0 5px;">
                        <input type="range" min="0" max="100" value="0" id="buy-slider" style="width: 100%; accent-color: var(--up-color);" oninput="updateFromSlider('buy', this.value)">
                        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: var(--text-secondary);">
                            <span onclick="setSlider('buy', 0)">0%</span>
                            <span onclick="setSlider('buy', 25)">25%</span>
                            <span onclick="setSlider('buy', 50)">50%</span>
                            <span onclick="setSlider('buy', 75)">75%</span>
                            <span onclick="setSlider('buy', 100)">100%</span>
                        </div>
                    </div>
                    
                    <button class="execute-btn" style="background: var(--up-color);" onclick="placeOrder('buy')">买入 <span class="asset-name">BTC</span></button>
                </div>

                <!-- Sell Column -->
                <div class="order-side-column" id="sell-column">
                    <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                        <button class="order-type-btn active" onclick="setOrderType('sell', 'limit')" id="sell-limit-btn" style="background: none; border: none; color: var(--accent-color); font-weight: bold; cursor: pointer; font-size: 14px; padding: 0;">限价</button>
                        <button class="order-type-btn" onclick="setOrderType('sell', 'market')" id="sell-market-btn" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; padding: 0;">市价</button>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px;">
                        <span style="color: var(--text-secondary);">可用 <span id="sell-available">--</span> <span class="asset-name">BTC</span></span>
                    </div>
                    <div class="input-row" id="sell-price-row">
                        <span style="color: var(--text-secondary); font-size: 13px;">价格</span>
                        <input type="number" id="sell-price" placeholder="0.00">
                        <span style="color: var(--text-secondary); font-size: 12px; margin-left: 5px;">USDT</span>
                    </div>
                    <div class="input-row" id="sell-market-price-row" style="display: none;">
                        <span style="color: var(--text-secondary); font-size: 13px;">价格</span>
                        <input type="text" id="sell-market-price-display" value="以当前市价卖出" disabled style="text-align: right; color: var(--text-secondary);">
                    </div>
                    <div class="input-row">
                        <span style="color: var(--text-secondary); font-size: 13px;">数量</span>
                        <input type="number" id="sell-amount" placeholder="0.00">
                        <span class="asset-name" style="color: var(--text-secondary); font-size: 12px; margin-left: 5px; width: 40px; text-align: right;">BTC</span>
                    </div>

                    <div style="margin: 15px 0 25px 0; position: relative; padding: 0 5px;">
                        <input type="range" min="0" max="100" value="0" id="sell-slider" style="width: 100%; accent-color: var(--down-color);" oninput="updateFromSlider('sell', this.value)">
                        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: var(--text-secondary);">
                            <span onclick="setSlider('sell', 0)">0%</span>
                            <span onclick="setSlider('sell', 25)">25%</span>
                            <span onclick="setSlider('sell', 50)">50%</span>
                            <span onclick="setSlider('sell', 75)">75%</span>
                            <span onclick="setSlider('sell', 100)">100%</span>
                        </div>
                    </div>

                    <button class="execute-btn" style="background: var(--down-color);" onclick="placeOrder('sell')">卖出 <span class="asset-name">BTC</span></button>
                </div>
            </div>

            <!-- Orders Table -->
            <div style="background: var(--panel-bg);">
                <div style="display: flex; border-bottom: 1px solid var(--border-color); padding: 0 15px;">
                    <button class="tab-btn active" onclick="switchTab(this, 'open')" style="background: none; border: none; color: var(--accent-color); padding: 12px 15px; font-size: 14px; border-bottom: 2px solid var(--accent-color); cursor: pointer;">当前委托</button>
                    <button class="tab-btn" onclick="switchTab(this, 'history')" style="background: none; border: none; color: var(--text-secondary); padding: 12px 15px; font-size: 14px; cursor: pointer;">历史委托</button>
                </div>
                <div style="padding: 15px; overflow-x: auto;">
                    <table id="orders-table" style="width: 100%; border-collapse: collapse; min-width: 600px; font-size: 12px;">
                        <thead style="color: var(--text-secondary); text-align: left;">
                            <tr>
                                <th style="padding: 10px 5px;">时间</th>
                                <th style="padding: 10px 5px;">币对</th>
                                <th style="padding: 10px 5px;">类型</th>
                                <th style="padding: 10px 5px;">方向</th>
                                <th style="padding: 10px 5px;">价格</th>
                                <th style="padding: 10px 5px;">数量</th>
                                <th style="padding: 10px 5px;">状态</th>
                                <th style="padding: 10px 5px; text-align: right;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="orders-tbody">
                            <tr><td colspan="8" style="text-align: center; padding: 40px; color: var(--text-secondary);">暂无记录</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Panel (Order Book) -->
    <div class="panel order-book-panel">
        <div style="padding: 10px 15px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between;">
            <span>价格(USDT)</span>
            <span>数量(BTC)</span>
        </div>
        <div id="asks-list" style="display: flex; flex-direction: column-reverse;"></div>
        <div 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>
        <div id="bids-list"></div>
    </div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
    let currentPair = 'BTCUSDT';
    let currentPrice = 0;
    let usdtBalance = 0;
    let userAssets = {};
    let marketData = {};
    let orderTypes = { buy: 'market', sell: 'limit' };
    let activeTab = 'open';

    const pairs = [
        'BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'LINKUSDT', 'AVAXUSDT'
    ];

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

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

    function updateUI(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('ob-mid-price').innerText = currentPrice.toLocaleString();
        document.getElementById('high-24h').innerText = parseFloat(data.h).toLocaleString();
        document.getElementById('low-24h').innerText = parseFloat(data.l).toLocaleString();
        document.getElementById('vol-24h').innerText = parseFloat(data.v).toLocaleString();
        
        updateOrderBook();
    }

    function renderPairs() {
        const list = document.getElementById('pairs-list');
        if (!list) return;
        let html = '';
        pairs.forEach(p => {
            const d = marketData[p] || {c: 0, P: 0};
            const name = p.replace('USDT', '');
            html += `
                <div class="pair-item ${currentPair === p ? 'active' : ''}" onclick="switchPair('${p}')">
                    <span style="font-weight: 500;">${name}/USDT</span>
                    <span style="color: ${d.P >= 0 ? 'var(--up-color)' : 'var(--down-color)'}">${parseFloat(d.c).toLocaleString()}</span>
                </div>
            `;
        });
        list.innerHTML = html;
    }

    function switchPair(p) {
        currentPair = p;
        const name = p.replace('USDT', '');
        document.getElementById('current-pair-display').innerText = name + '/USDT';
        document.querySelectorAll('.asset-name').forEach(el => el.innerText = name);
        initChart(p);
        updateAvailable();
    }

    async function updateAvailable() {
        const resp = await fetch('api/get_assets.php');
        const res = await resp.json();
        if (res.success) {
            res.data.forEach(a => { userAssets[a.symbol] = parseFloat(a.amount); });
            usdtBalance = userAssets['USDT'] || 0;
            const coin = currentPair.replace('USDT', '');
            document.getElementById('buy-available').innerText = usdtBalance.toFixed(2);
            document.getElementById('sell-available').innerText = (userAssets[coin] || 0).toFixed(6);
        }
    }

    function setOrderType(side, type) {
        orderTypes[side] = type;
        document.getElementById(`${side}-limit-btn`).style.color = type === 'limit' ? 'var(--accent-color)' : 'var(--text-secondary)';
        document.getElementById(`${side}-market-btn`).style.color = type === 'market' ? 'var(--accent-color)' : 'var(--text-secondary)';
        document.getElementById(`${side}-price-row`).style.display = type === 'limit' ? 'flex' : 'none';
        document.getElementById(`${side}-market-price-row`).style.display = type === 'market' ? 'flex' : 'none';
    }

    function updateOrderBook() {
        const asks = document.getElementById('asks-list');
        const bids = document.getElementById('bids-list');
        let asksHtml = ''; let bidsHtml = '';
        for(let i=0; i<10; i++) {
            const ap = currentPrice * (1 + (i+1)*0.001);
            const bp = currentPrice * (1 - (i+1)*0.001);
            asksHtml += `<div class="ob-row"><span style="color: var(--down-color);">${ap.toFixed(2)}</span><span>${(Math.random()).toFixed(4)}</span></div>`;
            bidsHtml += `<div class="ob-row"><span style="color: var(--up-color);">${bp.toFixed(2)}</span><span>${(Math.random()).toFixed(4)}</span></div>`;
        }
        asks.innerHTML = asksHtml; bids.innerHTML = bidsHtml;
    }

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

    function updateFromSlider(side, val) {
        const coin = currentPair.replace('USDT', '');
        if (side === 'buy') {
            const amount = (usdtBalance * (val/100)) / (parseFloat(document.getElementById('buy-price').value) || currentPrice);
            document.getElementById('buy-amount').value = amount.toFixed(6);
        } else {
            const amount = (userAssets[coin] || 0) * (val/100);
            document.getElementById('sell-amount').value = amount.toFixed(6);
        }
    }

    async function placeOrder(side) {
        const amount = parseFloat(document.getElementById(side + '-amount').value);
        if (!amount) return alert('请输入数量');
        const price = orderTypes[side] === 'limit' ? parseFloat(document.getElementById(side + '-price').value) : currentPrice;
        
        const resp = await fetch('api/place_order.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                symbol: currentPair, type: 'spot', side: side, order_type: orderTypes[side],
                price: price, amount: amount, total: price * amount
            })
        });
        const res = await resp.json();
        if (res.success) { alert('成功'); updateAvailable(); fetchOrders(); } else { alert(res.error); }
    }

    async function fetchOrders() {
        const resp = await fetch(`api/get_orders.php?type=spot&status=${activeTab}`);
        const res = await resp.json();
        const tbody = document.getElementById('orders-tbody');
        if (res.success && res.data.length > 0) {
            tbody.innerHTML = res.data.map(o => `
                <tr style="border-bottom: 1px solid var(--border-color);">
                    <td style="padding: 10px 5px;">${o.created_at}</td>
                    <td style="padding: 10px 5px; font-weight: bold;">${o.symbol}</td>
                    <td style="padding: 10px 5px;">${o.order_type}</td>
                    <td style="padding: 10px 5px; color: ${o.side === 'buy' ? 'var(--up-color)' : 'var(--down-color)'}">${o.side}</td>
                    <td style="padding: 10px 5px;">${parseFloat(o.price).toLocaleString()}</td>
                    <td style="padding: 10px 5px;">${parseFloat(o.amount).toFixed(6)}</td>
                    <td style="padding: 10px 5px;">${o.status}</td>
                    <td style="padding: 10px 5px; text-align: right;">${o.status === 'open' ? `<button onclick="cancelOrder(${o.id})">取消</button>` : '--'}</td>
                </tr>
            `).join('');
        } else {
            tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; padding: 40px;">暂无记录</td></tr>';
        }
    }

    function switchTab(btn, tab) {
        document.querySelectorAll('.tab-btn').forEach(b => {
            b.classList.remove('active');
            b.style.color = 'var(--text-secondary)';
            b.style.borderBottom = 'none';
        });
        btn.classList.add('active');
        btn.style.color = 'var(--accent-color)';
        btn.style.borderBottom = '2px solid var(--accent-color)';
        activeTab = tab;
        fetchOrders();
    }

    updateAvailable();
    fetchOrders();
</script>

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