<?php
include_once 'config.php';
check_auth();

$user_id = $_SESSION['user_id'];
$account = get_account($user_id);
$symbol = $_GET['symbol'] ?? 'BTCUSDT';
$trade_type = $_GET['type'] ?? 'SPOT';
$base_symbol = str_replace('USDT', '', $symbol);

include 'header.php';
?>
<style>
    .glass-card { background: rgba(24, 26, 32, 1); border: 1px solid #2b2f36; border-radius: 4px; overflow: hidden; }
    .trade-nav-item { cursor: pointer; padding: 10px 15px; border-bottom: 2px solid transparent; color: #848e9c; font-size: 14px; }
    .trade-nav-item.active { border-bottom-color: #f0b90b; color: #f0b90b; font-weight: bold; }
    .coin-row { transition: background 0.2s; border-bottom: 1px solid #1e2329; }
    .coin-row:hover { background: #2b3139; cursor: pointer; }
    .coin-row.active { background: #1e2329; border-left: 3px solid #f0b90b; }
    .price-up { color: #0ecb81 !important; }
    .price-down { color: #f6465d !important; }
    #order-book table td { padding: 3px 8px; font-size: 12px; }
    .smaller { font-size: 11px; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-thumb { background: #3b4149; border-radius: 10px; }
</style>

<div class="container-fluid px-1 py-1" style="background-color: #0b0e11; min-height: 95vh; color: #eaecef;">
    <div class="row g-1">
        <!-- Market List -->
        <div class="col-lg-2">
            <div class="glass-card h-100" style="max-height: 900px; display: flex; flex-direction: column;">
                <div class="p-2 border-bottom border-secondary bg-dark">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-transparent border-secondary text-secondary"><i class="bi bi-search"></i></span>
                        <input type="text" id="coin-search" class="form-control bg-transparent text-white border-secondary" placeholder="搜索币种" onkeyup="filterCoins()">
                    </div>
                </div>
                <div id="left-coin-list" style="overflow-y: auto; flex-grow: 1;">
                    <!-- JS populated -->
                </div>
            </div>
        </div>

        <!-- Chart & Trade -->
        <div class="col-lg-7">
            <!-- Ticker Header -->
            <div class="glass-card mb-1 p-2 d-flex align-items-center bg-dark">
                <div class="d-flex align-items-center me-4">
                    <span class="fw-bold fs-5 text-white" id="current-symbol-title"><?php echo $symbol; ?></span>
                </div>
                <div class="me-4 border-end border-secondary pe-4">
                    <div class="fw-bold fs-5" id="header-price">--</div>
                    <div class="smaller text-secondary">≈ $<span id="header-price-usd">--</span></div>
                </div>
                <div class="me-4">
                    <div class="smaller text-secondary mb-1">24h 涨跌</div>
                    <div class="fw-bold" id="header-change">--</div>
                </div>
                <div class="me-4 d-none d-md-block">
                    <div class="smaller text-secondary mb-1">24h 最高</div>
                    <div class="fw-bold smaller" id="header-high">--</div>
                </div>
                <div class="me-4 d-none d-md-block">
                    <div class="smaller text-secondary mb-1">24h 最低</div>
                    <div class="fw-bold smaller" id="header-low">--</div>
                </div>
                <div class="ms-auto d-flex gap-1 bg-black p-1 rounded">
                    <a href="?type=SPOT&symbol=<?php echo $symbol; ?>" class="btn btn-sm <?php echo $trade_type=='SPOT'?'btn-warning':'text-secondary'; ?> fw-bold px-3">现货</a>
                    <a href="?type=CONTRACT&symbol=<?php echo $symbol; ?>" class="btn btn-sm <?php echo $trade_type=='CONTRACT'?'btn-warning':'text-secondary'; ?> fw-bold px-3">合约</a>
                </div>
            </div>

            <!-- TradingView -->
            <div class="glass-card mb-1" style="height: 480px;">
                <div id="tradingview_widget" style="height: 100%;"></div>
            </div>

            <!-- Trading Form -->
            <div class="glass-card p-3">
                <div class="row g-4">
                    <div class="col-md-6 border-end border-secondary">
                        <div class="d-flex justify-content-between mb-3 align-items-center">
                            <span class="text-success fw-bold fs-5">买入 / 做多</span>
                            <span class="text-secondary smaller">可用: <span class="text-white" id="usdt-balance"><?php echo number_format($account['balance'], 2); ?></span> USDT</span>
                        </div>
                        
                        <?php if ($trade_type === 'CONTRACT'): ?>
                        <div class="mb-3 d-flex align-items-center gap-2">
                            <label class="smaller text-secondary" style="min-width: 40px;">杠杆</label>
                            <select id="leverage" class="form-select form-select-sm bg-dark text-white border-secondary w-auto" style="min-width: 100px;">
                                <option value="10">10x</option>
                                <option value="20" selected>20x</option>
                                <option value="50">50x</option>
                                <option value="100">100x</option>
                            </select>
                        </div>
                        <?php endif; ?>

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text bg-dark text-secondary border-secondary" style="width: 60px;">价格</span>
                            <input type="text" class="form-control bg-dark text-warning border-secondary fw-bold" value="市场最优价" disabled>
                        </div>

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text bg-dark text-secondary border-secondary" style="width: 60px;"><?php echo $trade_type=='CONTRACT'?'手数':'数量'; ?></span>
                            <input type="number" id="buy-amount" class="form-control bg-dark text-white border-secondary" placeholder="0.00">
                            <span class="input-group-text bg-dark text-secondary border-secondary"><?php echo $trade_type=='CONTRACT'?'张':$base_symbol; ?></span>
                        </div>

                        <button class="btn btn-success w-100 fw-bold py-2 shadow-sm" onclick="submitOrder('BUY')">立即买入 (做多)</button>
                    </div>

                    <div class="col-md-6">
                        <div class="d-flex justify-content-between mb-3 align-items-center">
                            <span class="text-danger fw-bold fs-5">卖出 / 做空</span>
                            <span class="text-secondary smaller">市价委托</span>
                        </div>
                        
                        <?php if ($trade_type === 'CONTRACT'): ?>
                        <div class="mb-3"><div style="height:31px"></div></div>
                        <?php endif; ?>

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text bg-dark text-secondary border-secondary" style="width: 60px;">价格</span>
                            <input type="text" class="form-control bg-dark text-warning border-secondary fw-bold" value="市场最优价" disabled>
                        </div>

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text bg-dark text-secondary border-secondary" style="width: 60px;"><?php echo $trade_type=='CONTRACT'?'手数':'数量'; ?></span>
                            <input type="number" id="sell-amount" class="form-control bg-dark text-white border-secondary" placeholder="0.00">
                            <span class="input-group-text bg-dark text-secondary border-secondary"><?php echo $trade_type=='CONTRACT'?'张':$base_symbol; ?></span>
                        </div>

                        <button class="btn btn-danger w-100 fw-bold py-2 shadow-sm" onclick="submitOrder('SELL')">立即卖出 (做空)</button>
                    </div>
                </div>
            </div>

            <!-- Positions & History -->
            <div class="glass-card mt-1 p-0">
                <div class="d-flex border-bottom border-secondary bg-dark">
                    <div class="trade-nav-item active">当前持有仓位</div>
                    <div class="trade-nav-item">历史成交记录</div>
                </div>
                <div class="p-0" style="min-height: 250px;">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0 align-middle" id="position-table" style="font-size: 13px;">
                            <thead>
                                <tr class="text-secondary" style="background: #1e2329;">
                                    <th class="ps-3">交易对</th>
                                    <th>方向</th>
                                    <th>杠杆</th>
                                    <th>持有数量</th>
                                    <th>开仓价格</th>
                                    <th>标记价格</th>
                                    <th>盈亏 (USDT)</th>
                                    <th class="text-end pe-3">操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Book -->
        <div class="col-lg-3">
            <div class="glass-card h-100" style="display: flex; flex-direction: column;">
                <div class="p-2 border-bottom border-secondary bg-dark small fw-bold">实时订单簿</div>
                <div id="order-book" style="flex-grow: 1;">
                    <div class="px-2 py-2 d-flex justify-content-between text-secondary smaller">
                        <span>价格 (USDT)</span>
                        <span>数量 (<?php echo $base_symbol; ?>)</span>
                    </div>
                    <div id="asks-container" class="mb-1">
                        <table class="w-100">
                            <tbody id="asks-list"></tbody>
                        </table>
                    </div>
                    <div class="py-3 text-center border-top border-bottom border-secondary my-1 bg-dark">
                        <span id="book-price" class="fs-4 fw-bold">--</span>
                        <div class="smaller text-secondary" id="book-price-usd">≈ $--</div>
                    </div>
                    <div id="bids-container">
                        <table class="w-100">
                            <tbody id="bids-list"></tbody>
                        </table>
                    </div>
                </div>
                <div class="p-2 border-top border-secondary bg-dark">
                    <div class="d-flex justify-content-between smaller">
                        <span class="text-secondary">最新成交</span>
                        <span class="text-success">实时</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
    const symbol = '<?php echo $symbol; ?>';
    const tradeType = '<?php echo $trade_type; ?>';
    let currentPrice = 0;
    let allCoins = [];

    new TradingView.widget({
        "width": "100%", "height": "100%", "symbol": "BINANCE:" + symbol,
        "interval": "15", "timezone": "Etc/UTC", "theme": "dark", "style": "1",
        "locale": "zh_CN", "toolbar_bg": "#f1f3f6", "enable_publishing": false,
        "hide_side_toolbar": false, "allow_symbol_change": true, "container_id": "tradingview_widget"
    });

    function formatPrice(p) {
        p = parseFloat(p);
        if (p < 0.0001) return p.toFixed(8);
        if (p < 0.01) return p.toFixed(6);
        if (p < 1) return p.toFixed(4);
        return p.toFixed(2);
    }

    async function updateMarket() {
        try {
            const r = await fetch('api.php?action=market_data');
            const coins = await r.json();
            allCoins = coins;
            renderCoins();
            
            const c = coins.find(i => i.symbol === symbol);
            if (c) {
                currentPrice = parseFloat(c.price);
                const pFormatted = formatPrice(currentPrice);
                const changeClass = c.change >= 0 ? 'price-up' : 'price-down';
                
                document.getElementById('header-price').textContent = pFormatted;
                document.getElementById('header-price').className = 'fw-bold fs-5 ' + changeClass;
                document.getElementById('header-price-usd').textContent = pFormatted;
                
                document.getElementById('header-change').textContent = (c.change >= 0 ? '+' : '') + c.change + '%';
                document.getElementById('header-change').className = 'fw-bold ' + changeClass;
                
                document.getElementById('header-high').textContent = formatPrice(c.high || currentPrice * 1.02);
                document.getElementById('header-low').textContent = formatPrice(c.low || currentPrice * 0.98);
                
                const bookPrice = document.getElementById('book-price');
                bookPrice.textContent = pFormatted;
                bookPrice.className = 'fs-4 fw-bold ' + changeClass;
                document.getElementById('book-price-usd').textContent = '≈ $' + pFormatted;
                
                renderOrderBook(currentPrice);
            }
        } catch(e) { console.error(e); }
    }

    function renderCoins() {
        const search = document.getElementById('coin-search').value.toLowerCase();
        let listHtml = '';
        allCoins.forEach(c => {
            if (search && !c.symbol.toLowerCase().includes(search)) return;
            const isTarget = c.symbol === symbol;
            const changeClass = c.change >= 0 ? 'text-success' : 'text-danger';
            listHtml += `
                <div class="coin-row p-2 d-flex justify-content-between align-items-center ${isTarget?'active':''}" onclick="location.href='?type=${tradeType}&symbol=${c.symbol}'">
                    <div class="d-flex align-items-center">
                        <img src="${c.icon_url}" width="20" height="20" class="me-2 rounded-circle">
                        <div>
                            <div class="fw-bold smaller text-white">${c.symbol.replace('USDT','')}</div>
                            <div class="text-secondary smaller" style="font-size:9px">USDT</div>
                        </div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold smaller ${changeClass}">${formatPrice(c.price)}</div>
                        <div class="${changeClass}" style="font-size:10px">${(c.change >= 0 ? '+' : '') + c.change}%</div>
                    </div>
                </div>
            `;
        });
        document.getElementById('left-coin-list').innerHTML = listHtml;
    }

    function filterCoins() { renderCoins(); }

    function renderOrderBook(price) {
        if (!price) return;
        let asks = '', bids = '';
        // Asks (Red) - from high to low
        for(let i=10; i>0; i--) {
            const p = price * (1 + i * 0.0001);
            const amt = (Math.random() * 2).toFixed(3);
            asks += `<tr><td class="text-danger">${formatPrice(p)}</td><td class="text-end text-secondary">${amt}</td></tr>`;
        }
        // Bids (Green) - from high to low
        for(let i=1; i<=10; i++) {
            const p = price * (1 - i * 0.0001);
            const amt = (Math.random() * 2).toFixed(3);
            bids += `<tr><td class="text-success">${formatPrice(p)}</td><td class="text-end text-secondary">${amt}</td></tr>`;
        }
        document.getElementById('asks-list').innerHTML = asks;
        document.getElementById('bids-list').innerHTML = bids;
    }

    async function updatePositions() {
        try {
            const r = await fetch('api.php?action=positions');
            const pos = await r.json();
            let html = '';
            if (pos.length === 0) {
                html = '<tr><td colspan="8" class="text-center py-5 text-secondary">暂无持有仓位</td></tr>';
            } else {
                pos.forEach(p => {
                    const pnlClass = p.pnl >= 0 ? 'text-success' : 'text-danger';
                    html += `
                        <tr>
                            <td class="ps-3 fw-bold">${p.symbol}</td>
                            <td><span class="badge ${p.side==='LONG'?'bg-success':'bg-danger'}">${p.side}</span></td>
                            <td><span class="text-warning">${p.leverage}x</span></td>
                            <td>${p.lots} 张</td>
                            <td>${formatPrice(p.entry_price)}</td>
                            <td class="text-warning">${formatPrice(p.current_price)}</td>
                            <td class="${pnlClass} fw-bold">${parseFloat(p.pnl).toFixed(2)} USDT</td>
                            <td class="text-end pe-3"><button class="btn btn-sm btn-outline-danger py-0" onclick="closePosition(${p.id})">平仓</button></td>
                        </tr>
                    `;
                });
            }
            document.querySelector('#position-table tbody').innerHTML = html;
        } catch(e) {}
    }

    async function closePosition(id) {
        if (!confirm('确定要平掉该仓位吗？')) return;
        const res = await fetch('api.php?action=close_position', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id })
        });
        const json = await res.json();
        alert(json.message);
        updatePositions();
    }

    async function submitOrder(side) {
        const amount = document.getElementById(side.toLowerCase() + '-amount').value;
        const leverageSelect = document.getElementById('leverage');
        const leverage = leverageSelect ? leverageSelect.value : 1;
        
        if (!amount || amount <= 0) { alert('请输入有效数量'); return; }

        const res = await fetch('api.php?action=submit_order', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ symbol, side, trade_type: tradeType, amount, leverage })
        });
        const json = await res.json();
        if (json.status === 'success') {
            alert('下单成功');
            location.reload();
        } else {
            alert('错误: ' + json.message);
        }
    }

    setInterval(updateMarket, 2000);
    setInterval(updatePositions, 3000);
    updateMarket();
    updatePositions();
</script>
<?php include 'footer.php'; ?>
