{% extends 'base.html' %}
{% load static %}

{% block title %}Game | Crashten{% endblock %}

{% block content %}
    <div class="history-ribbon">
        <div class="history-items" id="historyTape"></div>
    </div>

    <div class="game-screen">
        <canvas id="engineCanvas"></canvas>
        
        <div class="hud-flight" id="hudFlightLayer">
            <div class="text-multiplier" id="displayMultiplier">1.00x</div>
            <div class="text-label">Current Payout</div>
        </div>

        <div class="hud-waiting" id="hudWaitingLayer">
            <div class="title-waiting">WAITING FOR NEXT ROUND...</div>
            <div class="bar-track"><div class="bar-fill" id="progressFill"></div></div>
        </div>
    </div>

    <div class="controls-wrapper">
        <div class="panel-bet" id="bettingPanel_1">
            <div class="tabs-bet">
                <button class="btn-tab active" id="tabManual_1" onclick="GameApp.AI.toggle(1, false)">Bet</button>
                <button class="btn-tab ai-tab" id="tabAi_1" onclick="GameApp.AI.toggle(1, true)">AI 🤖</button>
            </div>
            
            <div class="controls-disabled">
                <div class="stepper-ui">
                    <button class="btn-step" onclick="GameApp.UI.adjustBet(1, -50)">−</button>
                    <input type="number" id="inputBetAmount_1" class="input-bet-amount" value="50" min="50"
                           oninput="GameApp.UI.handleManualInput(1, this.value)" 
                           onblur="GameApp.UI.validateManualInput(1, this.value)">
                    <button class="btn-step" onclick="GameApp.UI.adjustBet(1, 50)">+</button>
                </div>
            </div>

            <button class="btn-massive status-bet" id="btnMainAction_1" onclick="GameApp.Core.handleUserAction(1)">
                <span class="btn-massive-title" id="actionTitle_1">BET</span>
                <span class="btn-massive-sub" id="actionSubTitle_1">50.00 KES</span>
            </button>

            <div class="controls-disabled" style="display: flex; flex-direction: column; gap: 8px;">
                <div class="auto-cashout-ui">
                    <label><input type="checkbox" id="chkAuto_1" onchange="GameApp.UI.toggleAuto(1)"> Auto Cashout</label>
                    <input type="number" id="inputAuto_1" class="auto-cashout-input" value="2.00" step="0.1" min="1.01" onchange="GameApp.UI.setAutoTarget(1, this.value)">
                </div>
                
                <div class="grid-quick">
                    <button class="btn-quick" onclick="GameApp.UI.setBet(1, 100)">100</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(1, 500)">500</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(1, 1000)">1000</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(1, 3000)">3000</button>
                </div>
            </div>
        </div>

        <div class="panel-bet" id="bettingPanel_2">
            <div class="tabs-bet">
                <button class="btn-tab active" id="tabManual_2" onclick="GameApp.AI.toggle(2, false)">Bet</button>
                <button class="btn-tab ai-tab" id="tabAi_2" onclick="GameApp.AI.toggle(2, true)">AI 🤖</button>
            </div>
            
            <div class="controls-disabled">
                <div class="stepper-ui">
                    <button class="btn-step" onclick="GameApp.UI.adjustBet(2, -50)">−</button>
                    <input type="number" id="inputBetAmount_2" class="input-bet-amount" value="50" min="50"
                           oninput="GameApp.UI.handleManualInput(2, this.value)" 
                           onblur="GameApp.UI.validateManualInput(2, this.value)">
                    <button class="btn-step" onclick="GameApp.UI.adjustBet(2, 50)">+</button>
                </div>
            </div>

            <button class="btn-massive status-bet" id="btnMainAction_2" onclick="GameApp.Core.handleUserAction(2)">
                <span class="btn-massive-title" id="actionTitle_2">BET</span>
                <span class="btn-massive-sub" id="actionSubTitle_2">50.00 KES</span>
            </button>

            <div class="controls-disabled" style="display: flex; flex-direction: column; gap: 8px;">
                <div class="auto-cashout-ui">
                    <label><input type="checkbox" id="chkAuto_2" onchange="GameApp.UI.toggleAuto(2)"> Auto Cashout</label>
                    <input type="number" id="inputAuto_2" class="auto-cashout-input" value="2.00" step="0.1" min="1.01" onchange="GameApp.UI.setAutoTarget(2, this.value)">
                </div>

                <div class="grid-quick">
                    <button class="btn-quick" onclick="GameApp.UI.setBet(2, 100)">100</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(2, 500)">500</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(2, 1000)">1000</button>
                    <button class="btn-quick" onclick="GameApp.UI.setBet(2, 3000)">3000</button>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-table" id="betTableSection">
        <div class="table-tabs">
            <button class="table-tab active" id="btnTabAll" onclick="GameApp.UI.switchTableTab('all')">ALL BETS</button>
            <button class="table-tab" id="btnTabMy" onclick="GameApp.UI.switchTableTab('my')">MY BETS</button>
            <button class="table-tab" id="btnTabTop" onclick="GameApp.UI.switchTableTab('top')">TOP</button>
        </div>
        
        <div class="table-stats">
            <div class="stat-box">
                <span class="stat-label">TOTAL BETS</span>
                <span class="stat-value" id="statTotalBets">0</span>
            </div>
            <div class="stat-box text-right">
                <span class="stat-label">TOTAL STAKES</span>
                <span class="stat-value" id="statTotalStakes">KES 0</span>
            </div>
        </div>

        <div class="table-wrap">
            <table class="table-core w-100">
                <thead>
                    <tr>
                        <th class="text-start">User</th>
                        <th class="text-end">Bet KES</th>
                        <th class="text-end">X</th>
                        <th class="text-end">Cashout</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody"></tbody>
            </table>
        </div>
    </div>
{% endblock %}