<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['user_id'])) { header('Location: login.php'); exit; }
include 'header.php';

$user_id = $_SESSION['user_id'];
$user_assets = [];
if ($user_id) {
    // $db is already defined in header.php
    $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; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
    .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 { flex-shrink: 0; height: 55px; padding: 0 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 25px; }
    .chart-box { height: 450px; flex-shrink: 0; background: #161a1e; border-bottom: 1px solid #2b3139; }
    .bottom-content-wrapper { flex-grow: 1; background: #161a1e; display: flex; flex-direction: column; }

    .col-header { padding: 15px; font-weight: 600; border-bottom: 1px solid #2b3139; font-size: 14px; color: #eaecef; height: 50px; display: flex; align-items: center; }
    
    #pairs-list { height: 756px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    #pairs-list::-webkit-scrollbar { width: 4px; }
    #pairs-list::-webkit-scrollbar-track { background: transparent; }
    #pairs-list::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }

    .coin-icon { width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; }
    .stats-item { display: flex; flex-direction: column; }
    .stats-label { font-size: 11px; color: #848e9c; }
    .stats-value { font-size: 13px; font-weight: 600; color: white; }

    .category-tabs { display: flex; padding: 15px 15px 10px; gap: 8px; }
    .category-tab { flex: 1; text-align: center; padding: 8px 0; background: #2b3139; border-radius: 6px; font-size: 12px; color: #848e9c; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
    .category-tab.active { background: rgba(0, 102, 255, 0.1); color: var(--primary-color); border-color: var(--primary-color); font-weight: bold; }
    
    .search-box { padding: 0 15px 15px; position: relative; }
    .search-box i { position: absolute; left: 25px; top: 12px; 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); }

    .pair-item { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); height: 42px; }
    .pair-item:hover { background: #1e2329; }
    .pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }

    /* Order Panel - New Layout */
    .order-panel { padding: 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
    .panel-row { margin-bottom: 15px; }
    .panel-label { color: #848e9c; font-size: 13px; margin-bottom: 8px; font-weight: 500; display: block; }
    
    .duration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .time-btn { background: #2b3139; border: 1px solid #3c424a; color: #eaecef; padding: 8px 4px; border-radius: 6px; font-size: 13px; cursor: pointer; text-align: center; font-weight: 600; transition: all 0.2s; }
    .time-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-1px); }
    .time-btn .rate { font-size: 10px; font-weight: 400; color: #0ecb81; margin-top: 1px; }
    .time-btn.active .rate { color: #fff; opacity: 0.9; }

    .input-wrapper { position: relative; }
    .amount-input-group { background: #2b3139; border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid #3c424a; transition: 0.2s; }
    .amount-input-group:focus-within { border-color: var(--primary-color); }
    .amount-input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 16px; font-weight: 600; width: 100%; }
    .amount-input-group .unit { color: #848e9c; font-weight: 600; font-size: 14px; }

    .balance-info-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
    .balance-info-row .label { color: #848e9c; }
    .balance-info-row .value { color: #eaecef; font-weight: 600; }
    .balance-info-row .profit-val { color: #0ecb81; font-weight: 700; }

    .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
    .trade-btn { padding: 12px; border-radius: 8px; font-weight: 800; font-size: 15px; border: none; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; }
    .btn-up { background: #0ecb81; }
    .btn-down { background: #f6465d; }
    .trade-btn:hover { filter: brightness(1.1); }

    /* Records */
    .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); }
    .table-responsive { height: 350px; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    .table-responsive::-webkit-scrollbar { width: 4px; }
    .table-responsive::-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; }
    
    /* Order Book */
    .ob-header { display: flex; justify-content: space-between; padding: 8px 15px; background: #161a1e; font-size: 11px; color: #848e9c; border-bottom: 1px solid #2b3139; }
    .ob-row { display: flex; justify-content: space-between; padding: 4px 15px; font-size: 12px; }
    .ob-row .price.up { color: #0ecb81; }
    .ob-row .price.down { color: #f6465d; }
    #order-book-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
    #order-book-list::-webkit-scrollbar { width: 4px; }
    #order-book-list::-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-panel { padding: 15px; }
        .duration-grid { grid-template-columns: repeat(3, 1fr); }
        .table-responsive { height: auto; max-height: 400px; }
        .trading-page-wrapper { padding-bottom: 70px; } /* Space for bottom nav */
        
        .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; }
    }

    /* Countdown Modal Styles */
    .countdown-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 10000;
        backdrop-filter: blur(4px);
    }
    .modal-content-card {
        background: #161a1e; width: 360px; border-radius: 20px; padding: 30px; position: relative; color: white;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid #2b3139;
    }
    .modal-close {
        position: absolute; top: 15px; right: 15px; width: 32px; height: 32px;
        background: #2b3139; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: #848e9c; transition: 0.2s;
    }
    .modal-close:hover { background: #3c424a; color: white; }
    .countdown-circle-wrap { display: flex; flex-direction: column; align-items: center; margin: 25px 0; }
    .circle-progress { position: relative; width: 140px; height: 140px; }
    .circle-progress svg { transform: rotate(-90deg); width: 140px; height: 140px; }
    .circle-bg { fill: none; stroke: #2b3139; stroke-width: 10; }
    .circle-bar {
        fill: none; stroke: #0ecb81; stroke-width: 10; stroke-linecap: round;
        stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 0.1s linear;
    }
    .countdown-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; font-weight: 800; }
    .modal-info-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
    .modal-info-label { color: #848e9c; }
    .modal-info-value { font-weight: 600; color: #eaecef; }
    .modal-info-value.up { color: #0ecb81; }
    .modal-info-value.down { color: #f6465d; }
    .modal-footer-text { text-align: center; color: #848e9c; font-size: 12px; margin-top: 20px; border-top: 1px solid #2b3139; padding-top: 15px; }

    #result-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: #161a1e; border-radius: 20px; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10;
    }
    .result-icon { font-size: 60px; margin-bottom: 20px; }
    .result-title { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
    .result-amount { font-size: 32px; font-weight: 800; margin-bottom: 30px; }
    .result-btn { background: var(--primary-color); color: white; padding: 12px 40px; border-radius: 10px; font-weight: 700; cursor: pointer; border: 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" class="active"><?php echo __('nav_options'); ?></a>
        <a href="spot.php"><?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: Pair Selection (Desktop) -->
        <div class="left-col d-none d-lg-flex">
            <div class="category-tabs">
                <div class="category-tab active" onclick="location.href='options.php'"><?php echo __('nav_options'); ?></div>
                <div class="category-tab" 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: Chart & Order -->
        <div class="center-col">
            <div class="chart-header d-none d-lg-flex">
                 <div class="d-flex align-items-center" style="gap:12px;">
                    <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; line-height: 1;">--</div>
                    <div id="curr-change" style="font-size: 12px; font-weight: 600; margin-top:2px;">--</div>
                </div>
                <div class="stats-item d-none d-md-flex"><span class="stats-label"><?php echo __('24h_high'); ?></span><span class="stats-value" id="h-high">--</span></div>
                <div class="stats-item d-none d-md-flex"><span class="stats-label"><?php echo __('24h_low'); ?></span><span class="stats-value" id="h-low">--</span></div>
            </div>
            
            <div class="chart-box" id="tv_chart_container"></div>
            
            <div class="bottom-content-wrapper">
                <div class="order-panel">
                    <!-- Row 1: Duration -->
                    <div class="panel-row">
                        <label class="panel-label"><?php echo __('settlement_time'); ?> / <?php echo __('profit'); ?></label>
                        <div class="duration-grid">
                            <div class="time-btn active" data-duration="60" data-rate="8" data-min="100">60s<div class="rate">+8%</div></div>
                            <div class="time-btn" data-duration="90" data-rate="12" data-min="5000">90s<div class="rate">+12%</div></div>
                            <div class="time-btn" data-duration="120" data-rate="15" data-min="30000">120s<div class="rate">+15%</div></div>
                            <div class="time-btn" data-duration="180" data-rate="20" data-min="100000">180s<div class="rate">+20%</div></div>
                            <div class="time-btn" data-duration="300" data-rate="32" data-min="300000">300s<div class="rate">+32%</div></div>
                        </div>
                    </div>

                    <!-- Row 2: Amount -->
                    <div class="panel-row" style="margin-bottom: 10px;">
                        <label class="panel-label"><?php echo __('buy_amount'); ?></label>
                        <div class="amount-input-group">
                            <input type="number" id="option-amount" value="100" placeholder="<?php echo __('min_amount'); ?> 100">
                            <span class="unit">USDT</span>
                        </div>
                    </div>

                    <!-- Row 2.5: Balance & Profit -->
                    <div class="balance-info-row">
                        <div>
                            <span class="label"><?php echo __('available'); ?>: </span>
                            <span class="value"><span id="usdt-balance">0.00</span> USDT</span>
                        </div>
                        <div>
                            <span class="label"><?php echo __('expected_profit'); ?>: </span>
                            <span class="profit-val" id="potential-profit">+0.00</span>
                        </div>
                    </div>

                    <!-- Row 3: Buttons -->
                    <div class="action-buttons">
                        <button class="trade-btn btn-up" id="btn-buy-up">
                            <i class="fas fa-arrow-up"></i> <?php echo __('buy_up'); ?>
                        </button>
                        <button class="trade-btn btn-down" id="btn-buy-down">
                            <i class="fas fa-arrow-down"></i> <?php echo __('buy_down'); ?>
                        </button>
                    </div>
                </div>

                <div class="records-container">
                    <div class="record-tabs">
                        <div class="record-tab active" data-status="pending"><?php echo __('in_progress'); ?></div>
                        <div class="record-tab" data-status="completed"><?php echo __('settled'); ?></div>
                    </div>
                    <div class="table-responsive">
                        <table id="records-list"></table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: Order Book (Desktop) -->
        <div class="right-col d-none d-xl-flex">
            <div class="col-header"><?php echo __('order_book'); ?></div>
            <div class="ob-header">
                <span><?php echo __('price'); ?>(USDT)</span>
                <span><?php echo __('amount'); ?></span>
            </div>
            <div id="order-book-list">
                <div id="asks-list"></div>
                <div id="price-mid" style="padding:10px 15px; font-weight:800; text-align:center; font-size:16px; border-top:1px solid #2b3139; border-bottom:1px solid #2b3139;">--</div>
                <div id="bids-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>

<!-- Countdown Modal -->
<div id="countdown-modal" class="countdown-modal">
    <div class="modal-content-card">
        <div class="modal-close" onclick="closeCountdownModal()"><i class="fas fa-times"></i></div>
        <div style="font-size: 20px; font-weight: 800; text-align: left;" id="modal-symbol">--</div>
        
        <div class="countdown-circle-wrap">
            <div class="circle-progress">
                <svg>
                    <circle class="circle-bg" cx="70" cy="70" r="65"></circle>
                    <circle id="circle-bar" class="circle-bar" cx="70" cy="70" r="65"></circle>
                </svg>
                <div class="countdown-text" id="countdown-timer">00:00</div>
            </div>
        </div>

        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('current_price'); ?></span>
            <span class="modal-info-value" id="modal-curr-price">--</span>
        </div>
        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('period'); ?></span>
            <span class="modal-info-value" id="modal-period">--</span>
        </div>
        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('direction'); ?></span>
            <span class="modal-info-value" id="modal-direction">--</span>
        </div>
        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('amount'); ?></span>
            <span class="modal-info-value" id="modal-amount">--</span>
        </div>
        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('price'); ?></span>
            <span class="modal-info-value" id="modal-price">--</span>
        </div>
        <div class="modal-info-row">
            <span class="modal-info-label"><?php echo __('expected_profit'); ?></span>
            <span class="modal-info-value up" id="modal-profit">--</span>
        </div>

        <div class="modal-footer-text">
            <?php echo __('final_price_notice'); ?>
        </div>

        <div id="result-overlay">
            <div class="result-icon" id="result-icon"></div>
            <div class="result-title" id="result-title"></div>
            <div class="result-amount" id="result-amount"></div>
            <button class="result-btn" onclick="closeCountdownModal()"><?php echo __('confirm'); ?></button>
        </div>
    </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;
    let selectedDuration = 60, selectedRate = 8, minAmount = 100;
    const marketData = {};
    const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'];
    let fetchOrdersInterval;
    let activeOrdersTab = 'pending';
    let countdownInterval;

    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'),
        hHigh: document.getElementById('h-high'),
        hLow: document.getElementById('h-low'),
        pairsList: document.getElementById('pairs-list'),
        pairsListMobile: document.getElementById('pairs-list-mobile'),
        pairSearch: document.getElementById('pair-search'),
        pairSearchMobile: document.getElementById('pair-search-mobile'),
        asksList: document.getElementById('asks-list'),
        bidsList: document.getElementById('bids-list'),
        midPrice: document.getElementById('price-mid'),
        optionAmountInput: document.getElementById('option-amount'),
        potentialProfit: document.getElementById('potential-profit'),
        usdtBalance: document.getElementById('usdt-balance'),
        recordsList: document.getElementById('records-list'),
        
        // Modal DOM
        modal: document.getElementById('countdown-modal'),
        modalSymbol: document.getElementById('modal-symbol'),
        modalTimer: document.getElementById('countdown-timer'),
        modalCircle: document.getElementById('circle-bar'),
        modalCurrPrice: document.getElementById('modal-curr-price'),
        modalPeriod: document.getElementById('modal-period'),
        modalDirection: document.getElementById('modal-direction'),
        modalAmount: document.getElementById('modal-amount'),
        modalPrice: document.getElementById('modal-price'),
        modalProfit: document.getElementById('modal-profit'),
        resultOverlay: document.getElementById('result-overlay'),
        resultIcon: document.getElementById('result-icon'),
        resultTitle: document.getElementById('result-title'),
        resultAmount: document.getElementById('result-amount')
    };

    function updateAvailableBalance() {
        dom.usdtBalance.innerText = parseFloat(userAssets.USDT || 0).toFixed(2);
    }

    function initChartWidget(symbol) {
        if (chartWidget) { chartWidget = null; }
        document.getElementById('tv_chart_container').innerHTML = '';
        chartWidget = new TradingView.widget({
            "autosize": true, "symbol": `BINANCE:${symbol}`,
            "interval": "1", "timezone": "Etc/UTC", "theme": "dark", "style": "1",
            "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>",
            "toolbar_bg": "#161a1e", "enable_publishing": false, "hide_side_toolbar": true, "allow_symbol_change": false,
            "container_id": "tv_chart_container",
            "studies": ["Volume@tv-basicstudies"],
            "overrides": {
                "paneProperties.background": "#161a1e",
                "paneProperties.vertGridProperties.color": "rgba(255, 255, 255, 0.03)",
                "paneProperties.horzGridProperties.color": "rgba(255, 255, 255, 0.03)",
                "scalesProperties.textColor" : "#848e9c",
            }
        });
    }

    function connectWebSocket() {
        if (ws) ws.close();
        const tickerStreams = pairs.map(p => `${p.toLowerCase()}@ticker`).join('/');
        const depthStream = `${currentPair.toLowerCase()}@depth20@100ms`;
        ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${tickerStreams}/${depthStream}`);
        
        ws.onmessage = (event) => {
            const { stream, data } = JSON.parse(event.data);
            if (!data) return;
            if (stream.endsWith('@ticker')) {
                marketData[data.s] = data;
                if (data.s === currentPair) {
                    currentPrice = parseFloat(data.c);
                    updatePriceUI(data);
                    if(dom.midPrice) {
                        dom.midPrice.innerText = currentPrice.toFixed(2);
                        dom.midPrice.style.color = data.P >= 0 ? '#0ecb81' : '#f6465d';
                    }
                    
                    if (dom.modal.style.display === 'flex') {
                        dom.modalCurrPrice.innerText = currentPrice.toFixed(4);
                        dom.modalCurrPrice.style.color = data.P >= 0 ? '#0ecb81' : '#f6465d';
                    }
                }
                if (dom.pairsList.offsetParent || dom.pairsListMobile.offsetParent) renderPairs();
            } else if (stream.endsWith('@depth20@100ms')) {
                if(dom.asksList) renderOrderBook(data.bids, data.asks);
            }
        };
        ws.onclose = () => setTimeout(connectWebSocket, 5000);
    }

    function renderOrderBook(bids, asks) {
        const formatRow = (row, type) => `<div class="ob-row"><div class="price ${type}">${parseFloat(row[0]).toFixed(2)}</div><div>${parseFloat(row[1]).toFixed(3)}</div></div>`;
        dom.asksList.innerHTML = asks.slice(0, 20).reverse().map(a => formatRow(a, 'down')).join('');
        dom.bidsList.innerHTML = bids.slice(0, 20).map(b => formatRow(b, 'up')).join('');
    }

    function updatePriceUI(d) {
        const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
        const priceStr = parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2});
        
        if(dom.currPrice) dom.currPrice.innerText = priceStr;
        if(dom.currPrice) dom.currPrice.style.color = color;
        if(dom.currChange) dom.currChange.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
        if(dom.currChange) dom.currChange.style.color = color;
        
        dom.currPriceMobile.innerText = priceStr;
        dom.currPriceMobile.style.color = color;
        dom.currChangeMobile.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
        dom.currChangeMobile.style.color = color;
        
        if(dom.hHigh) dom.hHigh.innerText = parseFloat(d.h).toFixed(2);
        if(dom.hLow) dom.hLow.innerText = parseFloat(d.l).toFixed(2);
        document.title = `${priceStr} | ${currentPair}`;
    }

    function renderPairs() {
        const query = dom.pairSearch.value.toUpperCase();
        const queryMobile = dom.pairSearchMobile.value.toUpperCase();
        
        const generateHtml = (q) => pairs.filter(p => p.includes(q)).map(p => {
            const d = marketData[p] || {};
            const price = d.c ? parseFloat(d.c).toFixed(2) : '--';
            const change = d.P ? `${parseFloat(d.P) >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%` : '--';
            const color = (d.P && parseFloat(d.P) >= 0) ? '#0ecb81' : '#f6465d';
            return `<div class="pair-item ${p === currentPair ? 'active' : ''}" data-pair="${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"><div style="font-weight:600; color:white;">${p.replace('USDT','/USDT')}</div></div>
                    <div style="text-align:right"><div style="font-weight:600; color:white;">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div>
                 </div>`;
        }).join('');

        dom.pairsList.innerHTML = generateHtml(query);
        dom.pairsListMobile.innerHTML = generateHtml(queryMobile);
    }

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

    function updatePotentialProfit() {
        const amount = parseFloat(dom.optionAmountInput.value) || 0;
        dom.potentialProfit.innerText = `+${(amount * (selectedRate / 100)).toFixed(2)}`;
    }

    window.closeCountdownModal = () => {
        dom.modal.style.display = 'none';
        dom.resultOverlay.style.display = 'none';
        if (countdownInterval) clearInterval(countdownInterval);
    };

    function startCountdown(duration, orderId) {
        let timeLeft = duration;
        const total = duration;
        dom.modalTimer.innerText = `00:${timeLeft < 10 ? '0' + timeLeft : timeLeft}`;
        dom.modalCircle.style.strokeDashoffset = 0;
        
        if (countdownInterval) clearInterval(countdownInterval);
        
        countdownInterval = setInterval(async () => {
            timeLeft--;
            if (timeLeft <= 0) {
                clearInterval(countdownInterval);
                dom.modalTimer.innerText = "00:00";
                dom.modalCircle.style.strokeDashoffset = 408;
                
                // Show final result
                try {
                    const r = await fetch(`api/get_option_orders.php?status=completed`);
                    const orders = await r.json();
                    const order = orders.find(o => o.id == orderId);
                    if (order) {
                        const profit = parseFloat(order.profit);
                        dom.resultIcon.innerHTML = profit > 0 ? '<i class="fas fa-trophy" style="color:#0ecb81"></i>' : '<i class="fas fa-times-circle" style="color:#f6465d"></i>';
                        dom.resultTitle.innerText = profit > 0 ? '<?php echo __('win'); ?>' : '<?php echo __('loss'); ?>';
                        dom.resultTitle.style.color = profit > 0 ? '#0ecb81' : '#f6465d';
                        dom.resultAmount.innerText = (profit > 0 ? '+' : '') + profit.toFixed(2) + ' USDT';
                        dom.resultAmount.style.color = profit > 0 ? '#0ecb81' : '#f6465d';
                        dom.resultOverlay.style.display = 'flex';
                    } else {
                        // Fallback if order not found immediately
                        setTimeout(() => startCountdown(0, orderId), 2000);
                    }
                } catch(e) {}
                return;
            }
            
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            dom.modalTimer.innerText = `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
            
            const offset = (408 * (total - timeLeft) / total);
            dom.modalCircle.style.strokeDashoffset = offset;
        }, 1000);
    }

    async function placeOrder(direction) {
        const amount = parseFloat(dom.optionAmountInput.value);
        if (isNaN(amount) || amount < minAmount) { alert("<?php echo __('min_amount'); ?>: " + minAmount + " USDT"); return; }
        
        const btn = direction === 'up' ? document.getElementById('btn-buy-up') : document.getElementById('btn-buy-down');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        try {
            const response = await fetch('api/place_option_order.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    pair: currentPair, amount: amount, direction: direction, 
                    duration: selectedDuration, rate: selectedRate, price: currentPrice
                })
            });
            const result = await response.json();
            if (result.success) {
                // Show Modal
                dom.modalSymbol.innerText = currentPair.replace('USDT', '');
                dom.modalPeriod.innerText = selectedDuration + 's';
                dom.modalDirection.innerText = direction === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>';
                dom.modalDirection.className = 'modal-info-value ' + (direction === 'up' ? 'up' : 'down');
                dom.modalAmount.innerText = amount + ' USDT';
                dom.modalPrice.innerText = currentPrice.toFixed(4);
                dom.modalProfit.innerText = '+' + (amount * (selectedRate / 100)).toFixed(2) + ' USDT';
                dom.modalProfit.className = 'modal-info-value up';
                dom.modal.style.display = 'flex';
                dom.resultOverlay.style.display = 'none';
                
                startCountdown(selectedDuration, result.order.id);
                fetchOrders();
            } else {
                alert(result.error || "<?php echo __('error_placing_order'); ?>");
            }
        } catch(e) { alert("<?php echo __('network_error'); ?>"); }
        finally { btn.disabled = false; btn.innerHTML = originalText; }
    }

    async function fetchOrders() {
        try {
            const r = await fetch(`api/get_option_orders.php?status=${activeOrdersTab}`);
            const orders = await r.json();
            renderOrders(orders);
        } catch (e) {}
    }

    function renderOrders(orders) {
        if (!orders || orders.length === 0) {
            dom.recordsList.innerHTML = '<tr><td colspan="8" style="text-align:center; padding:40px; color:#848e9c"><?php echo __('no_records'); ?></td></tr>';
            return;
        }
        let html = `<thead><tr><th><?php echo __('pair'); ?></th><th><?php echo __('direction'); ?></th><th><?php echo __('amount'); ?></th><th><?php echo __('opening_price'); ?></th><th><?php echo __('closing_price'); ?></th><th><?php echo __('profit'); ?></th><th><?php echo __('status'); ?></th><th><?php echo __('time'); ?></th></tr></thead><tbody>`;
        orders.forEach(o => {
            const color = o.direction === 'up' ? '#0ecb81' : '#f6465d';
            const statusColor = o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '#0ecb81' : '#f6465d') : '#ffc107';
            html += `<tr>
                <td style="font-weight:600">${o.symbol}</td>
                <td style="color:${color}">${o.direction === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>'}</td>
                <td>${parseFloat(o.amount).toFixed(2)}</td>
                <td>${parseFloat(o.opening_price).toFixed(4)}</td>
                <td>${o.closing_price ? parseFloat(o.closing_price).toFixed(4) : '--'}</td>
                <td style="color:${statusColor}">${o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '+' : '') + parseFloat(o.profit).toFixed(2) : '--'}</td>
                <td style="color:${statusColor}">${o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '<?php echo __('win'); ?>' : '<?php echo __('loss'); ?>') : '<?php echo __('in_progress'); ?>'}</td>
                <td style="color:#848e9c">${o.created_at}</td>
            </tr>`;
        });
        dom.recordsList.innerHTML = html + '</tbody>';
    }

    dom.pairsList.addEventListener('click', e => { const item = e.target.closest('.pair-item'); if (item) switchPair(item.dataset.pair); });
    dom.pairsListMobile.addEventListener('click', e => { const item = e.target.closest('.pair-item'); if (item) switchPair(item.dataset.pair); });
    dom.pairSearch.addEventListener('input', renderPairs);
    dom.pairSearchMobile.addEventListener('input', renderPairs);
    
    document.querySelectorAll('.time-btn').forEach(btn => btn.addEventListener('click', () => {
        document.querySelector('.time-btn.active').classList.remove('active');
        btn.classList.add('active');
        selectedDuration = parseInt(btn.dataset.duration);
        selectedRate = parseInt(btn.dataset.rate);
        minAmount = parseInt(btn.dataset.min);
        dom.optionAmountInput.placeholder = "<?php echo __('min_amount'); ?> " + minAmount;
        updatePotentialProfit();
    }));
    dom.optionAmountInput.addEventListener('input', updatePotentialProfit);
    document.getElementById('btn-buy-up').addEventListener('click', () => placeOrder('up'));
    document.getElementById('btn-buy-down').addEventListener('click', () => placeOrder('down'));
    document.querySelectorAll('.record-tab').forEach(tab => tab.addEventListener('click', () => {
        document.querySelector('.record-tab.active').classList.remove('active');
        tab.classList.add('active');
        activeOrdersTab = tab.dataset.status;
        fetchOrders();
    }));

    updateAvailableBalance();
    switchPair('BTCUSDT');
    updatePotentialProfit();
    fetchOrders();
    setInterval(fetchOrders, 5000);
});
</script>

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