{% extends "base.html" %}
{% block title %}Lucky Spin Wheel{% endblock %}

{% block extra_css %}
<style>
    :root {
        --gold: #FFD700;
        --gold-dark: #B8860B;
        --orange: #FF8C00;
        --fire: #FF6B35;
        --bg-dark: #0a0806;
        --bg-warm: #1a1208;
    }
    body {
        background: var(--bg-dark);
        overflow-x: hidden;
    }

    /* === ATMOSPHERE === */
    .atmosphere {
        position: fixed; inset: 0; z-index: 0; pointer-events: none;
        background:
            radial-gradient(ellipse 80% 60% at 30% 40%, rgba(255,140,0,0.07) 0%, transparent 70%),
            radial-gradient(ellipse 60% 50% at 75% 30%, rgba(255,215,0,0.05) 0%, transparent 60%),
            radial-gradient(ellipse 40% 40% at 50% 80%, rgba(255,107,53,0.04) 0%, transparent 50%);
    }
    .grain {
        position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    /* === HEADER === */
    .top-bar {
        position: sticky; top: 0; z-index: 100;
        background: rgba(10,8,6,0.85);
        backdrop-filter: blur(20px) saturate(1.4);
        border-bottom: 1px solid rgba(255,215,0,0.08);
        padding: 12px 32px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .brand {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28px; letter-spacing: 4px;
        background: linear-gradient(135deg, var(--gold), var(--orange));
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .top-nav { display: flex; align-items: center; gap: 6px; }
    .top-nav a {
        color: rgba(255,215,0,0.7); font-size: 13px; font-weight: 600;
        letter-spacing: 0.5px; transition: all 0.2s;
        padding: 6px 14px; border-radius: 100px;
        border: 1px solid transparent;
    }
    .top-nav a:hover { color: var(--gold); border-color: rgba(255,215,0,0.15); background: rgba(255,215,0,0.05); }
    .top-right { display: flex; align-items: center; gap: 16px; }
    .price-pill {
        background: linear-gradient(135deg, var(--gold), var(--orange));
        color: #1a0e00; padding: 7px 18px; border-radius: 100px;
        font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
        box-shadow: 0 2px 16px rgba(255,165,0,0.25);
    }
    .top-link {
        color: rgba(255,215,0,0.7); font-size: 13px; font-weight: 600;
        letter-spacing: 0.5px; transition: color 0.2s;
    }
    .top-link:hover { color: var(--gold); }

    /* === HERO TITLE (inside char-col) === */
    .hero-text {
        text-align: center; margin-bottom: 8px;
    }
    .hero-text h1 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(36px, 5vw, 58px);
        letter-spacing: 5px;
        line-height: 1;
        background: linear-gradient(180deg, #FFE87C 0%, var(--gold) 40%, var(--orange) 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 2px 12px rgba(255,165,0,0.3));
    }
    .hero-text p {
        font-size: 12px; font-weight: 500; letter-spacing: 2px;
        text-transform: uppercase; color: #c9a84c; margin-top: 4px;
    }

    /* === MAIN LAYOUT === */
    .stage {
        max-width: 1280px; margin: 0 auto;
        padding: 28px 20px 20px;
        display: flex; align-items: center; justify-content: center;
        gap: 20px; min-height: calc(100vh - 100px);
        position: relative; z-index: 1;
    }

    /* === WHEEL === */
    .wheel-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
    .wheel-frame {
        position: relative; width: min(480px, 85vw); aspect-ratio: 1;
    }
    .wheel-ring {
        position: absolute; inset: -20px; border-radius: 50%;
        background: conic-gradient(
            var(--gold) 0deg, var(--orange) 30deg, var(--gold) 60deg,
            var(--fire) 90deg, var(--gold) 120deg, var(--orange) 150deg,
            var(--gold) 180deg, var(--fire) 210deg, var(--gold) 240deg,
            var(--orange) 270deg, var(--gold) 300deg, var(--fire) 330deg, var(--gold) 360deg
        );
        box-shadow:
            0 0 40px rgba(255,165,0,0.25),
            0 0 80px rgba(255,165,0,0.1),
            inset 0 0 30px rgba(0,0,0,0.3);
    }
    .wheel-ring::after {
        content: ''; position: absolute; inset: 7px; border-radius: 50%;
        background: #110e08;
    }
    /* LED dots on the ring */
    .led-ring {
        position: absolute; inset: -20px; border-radius: 50%; z-index: 1;
    }
    .led {
        position: absolute; width: 6px; height: 6px; border-radius: 50%;
        background: var(--gold);
        box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(255,215,0,0.5);
    }
    .led.off { background: #5a4a20; box-shadow: none; }

    canvas#rouletteCanvas {
        position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
    }
    .center-btn {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 88px; height: 88px; border-radius: 50%; border: none;
        background: linear-gradient(145deg, #FFE87C, var(--gold), var(--orange));
        box-shadow:
            0 4px 24px rgba(255,165,0,0.5),
            inset 0 2px 6px rgba(255,255,255,0.4),
            inset 0 -2px 6px rgba(0,0,0,0.2);
        z-index: 3; cursor: pointer;
        display: flex; align-items: center; justify-content: center; flex-direction: column;
        transition: transform 0.15s, box-shadow 0.15s;
        font-family: 'Bebas Neue', sans-serif;
    }
    .center-btn:hover {
        transform: translate(-50%, -50%) scale(1.06);
        box-shadow: 0 6px 32px rgba(255,165,0,0.65), inset 0 2px 6px rgba(255,255,255,0.4);
    }
    .center-btn .s-text { font-size: 20px; color: #3a2400; letter-spacing: 3px; line-height: 1; }
    .center-btn .s-sub { font-size: 9px; color: #6b4a00; font-family: 'Outfit'; font-weight: 600; }

    .pointer {
        position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 5;
        width: 0; height: 0;
        border-left: 18px solid transparent; border-right: 18px solid transparent;
        border-top: 42px solid var(--gold);
        filter: drop-shadow(0 3px 8px rgba(255,200,0,0.6));
    }

    /* === SPIN PACKS (like screenshots) === */
    .spin-packs {
        display: flex; gap: 10px; margin-top: 20px; justify-content: center;
    }
    .pack {
        padding: 10px 22px; border-radius: 14px;
        border: 2px solid rgba(255,215,0,0.2);
        background: rgba(255,215,0,0.04);
        color: var(--gold); font-weight: 700; font-size: 14px;
        cursor: pointer; transition: all 0.2s; user-select: none;
        text-align: center;
    }
    .pack:hover, .pack.active {
        border-color: var(--gold);
        background: rgba(255,215,0,0.12);
        box-shadow: 0 0 16px rgba(255,215,0,0.15);
    }
    .pack .times { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 1px; display: block; line-height: 1; }
    .pack .lbl { font-size: 10px; color: #8a7540; }

    /* === ACTION BUTTON === */
    .spin-action {
        margin-top: 16px; padding: 14px 56px; font-size: 16px; font-weight: 800;
        color: #1a0e00; background: linear-gradient(135deg, #FFE87C, var(--gold), var(--orange));
        border: none; border-radius: 100px; cursor: pointer;
        box-shadow: 0 6px 24px rgba(255,165,0,0.4);
        transition: all 0.2s; letter-spacing: 2px; text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }
    .spin-action:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,165,0,0.5); }
    .spin-action:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    /* === PLAYER TAG (shown when logged in) === */
    .player-tag {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 16px; border-radius: 100px;
        background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2);
        color: var(--gold); font-size: 12px; font-weight: 600;
    }
    .spin-badge {
        display: inline-flex; align-items: center; gap: 4px;
        background: linear-gradient(135deg, var(--gold), var(--orange));
        color: #1a0e00; padding: 3px 10px; border-radius: 100px;
        font-size: 11px; font-weight: 800; margin-left: 4px;
    }

    /* === REGISTRATION MODAL FORM === */
    .reg-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
    .reg-form input {
        padding: 12px 18px; border-radius: 14px;
        border: 1.5px solid rgba(255,215,0,0.15); background: rgba(0,0,0,0.4);
        color: #fff; font-size: 14px; font-family: inherit; outline: none;
        transition: border-color 0.2s;
    }
    .reg-form input:focus { border-color: var(--gold); }
    .reg-form input::placeholder { color: #5a5240; }

    /* === CHARACTER === */
    .char-col {
        flex: 0 0 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: relative;
    }
    .char-img {
        max-width: 280px; max-height: 480px; object-fit: contain;
        filter: drop-shadow(0 16px 40px rgba(255,140,0,0.12));
        animation: bob 3.5s ease-in-out infinite;
    }
    @keyframes bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-14px); }
    }
    /* floating prizes around character */
    .float-item {
        position: absolute; border-radius: 16px;
        background: rgba(255,255,255,0.06); backdrop-filter: blur(6px);
        border: 1px solid rgba(255,215,0,0.1);
        padding: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        animation: floatItem 4s ease-in-out infinite;
    }
    .float-item img { width: 64px; height: 64px; object-fit: contain; }
    .float-item:nth-child(2) { animation-delay: -1s; }
    .float-item:nth-child(3) { animation-delay: -2s; }
    .float-item:nth-child(4) { animation-delay: -0.5s; }
    @keyframes floatItem {
        0%, 100% { transform: translateY(0) rotate(-2deg); }
        50% { transform: translateY(-10px) rotate(2deg); }
    }

    /* === FOOTER === */
    .foot {
        text-align: center; padding: 16px; position: relative; z-index: 1;
        font-size: 11px; color: #4a4030; letter-spacing: 0.5px;
    }
    .foot a { color: var(--gold); opacity: 0.6; transition: opacity 0.2s; }
    .foot a:hover { opacity: 1; }

    /* === MODALS === */
    .mo {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
        z-index: 200; align-items: center; justify-content: center;
    }
    .mo.on { display: flex; }
    .mo-box {
        background: linear-gradient(165deg, #1e1608 0%, #110e08 100%);
        border: 1px solid rgba(255,215,0,0.1);
        border-radius: 28px; padding: 36px; max-width: 440px; width: 92%;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(255,165,0,0.05);
        animation: popUp 0.25s ease;
    }
    @keyframes popUp { from { transform: scale(0.9) translateY(20px); opacity: 0; } }
    .mo-box h2 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28px; letter-spacing: 3px; color: var(--gold); margin-bottom: 8px;
    }
    .mo-box p { color: #8a7e6a; font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
    .mo-box .promo-code {
        display: inline-block; background: rgba(255,215,0,0.06);
        border: 2px dashed var(--gold); padding: 10px 24px; border-radius: 12px;
        font-family: 'Bebas Neue'; font-size: 24px; color: var(--gold);
        letter-spacing: 4px; margin: 14px 0;
    }
    .mo-icon {
        width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px;
        display: flex; align-items: center; justify-content: center; font-size: 30px;
    }
    .mo-icon.win { background: rgba(74,222,128,0.1); color: #4ade80; }
    .mo-icon.lose { background: rgba(255,255,255,0.04); color: #6b6050; }
    .mo-btn {
        margin-top: 16px; padding: 11px 32px; border: none; border-radius: 100px;
        background: linear-gradient(135deg, var(--gold), var(--orange));
        color: #1a0e00; font-size: 14px; font-weight: 700; cursor: pointer;
        transition: all 0.2s; letter-spacing: 0.5px;
    }
    .mo-btn:hover { transform: translateY(-1px); }
    .mo-btn.ghost { background: rgba(255,255,255,0.06); color: #8a7e6a; }
    .mo-btn.teal { background: linear-gradient(135deg, #2EC4B6, #1a8a7e); }

    /* payment info block */
    .pay-info {
        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,215,0,0.08);
        border-radius: 16px; padding: 16px; margin: 14px 0; text-align: left;
    }
    .pay-row {
        display: flex; justify-content: space-between; padding: 7px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px;
    }
    .pay-row:last-child { border-bottom: none; }
    .pay-row .k { color: #6b6050; }
    .pay-row .v { font-weight: 600; color: #d4c8b0; word-break: break-all; }
    .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
    .sdot.wait { background: #f59e0b; }
    .sdot.ok { background: #10b981; }
    .cpbtn {
        background: rgba(255,215,0,0.1); border: none; border-radius: 6px;
        padding: 3px 8px; font-size: 11px; cursor: pointer; margin-left: 6px;
        color: var(--gold);
    }

    /* === RESPONSIVE === */
    @media (max-width: 900px) {
        .stage { flex-direction: column; gap: 10px; padding: 6px 10px 16px; }
        .wheel-frame { width: min(300px, 80vw); }
        .char-col { flex: none; order: -1; }
        .char-img { max-width: 120px; }
        .hero-text h1 { font-size: 32px; letter-spacing: 3px; }
        .hero-text p { font-size: 10px; }
        .top-bar { padding: 10px 16px; }
    }
    @media (max-width: 500px) {
        .spin-packs { flex-wrap: wrap; }
        .float-item { display: none; }
    }
</style>
{% endblock %}

{% block content %}
<div class="atmosphere"></div>
<div class="grain"></div>

<!-- HEADER -->
<header class="top-bar">
    <div class="brand">LUCKY SPIN</div>
    <nav class="top-nav">
        <a href="{{ url_for('terms_page') }}"><i class="fas fa-scroll" style="margin-right:4px;"></i>Rules</a>
        <a href="{{ url_for('terms_page') }}"><i class="fas fa-shield-alt" style="margin-right:4px;"></i>Terms</a>
    </nav>
    <div class="top-right">
        <div class="price-pill">
            <i class="fas fa-coins" style="margin-right:5px;"></i><span id="hPrice">{{ settings.spin_price_usdt }}</span> USDT / spin
        </div>
        {% if player %}
            <div class="player-tag" id="playerTag">
                <i class="fas fa-user-check"></i> {{ player.email }}
                <span class="spin-badge" id="spinBadge" style="display:none;">
                    <i class="fas fa-sync-alt"></i> <span id="spinBalanceNum">0</span>
                </span>
            </div>
        {% else %}
            <button class="top-link" style="background:none;border:none;cursor:pointer;font-family:inherit;" onclick="openMo('regMo')"><i class="fas fa-user-plus" style="margin-right:4px;"></i>Sign Up</button>
        {% endif %}
    </div>
</header>

<!-- STAGE -->
<div class="stage">
    <!-- WHEEL COLUMN -->
    <div class="wheel-col">
        <div class="wheel-frame" id="wheelFrame">
            <div class="wheel-ring"></div>
            <div class="led-ring" id="ledRing"></div>
            <div class="pointer"></div>
            <canvas id="rouletteCanvas" width="480" height="480"></canvas>
            <button class="center-btn" id="centerBtn" onclick="trySpin()">
                <span class="s-text">SPIN</span>
                <span class="s-sub" id="spinsLeft"></span>
            </button>
        </div>

        <!-- SPIN PACKS -->
        <div class="spin-packs" id="spinPacks">
            <div class="pack" data-qty="1" onclick="pickPack(this, 1)">
                <span class="times">1x</span><span class="lbl">spin</span>
            </div>
            <div class="pack active" data-qty="3" onclick="pickPack(this, 3)">
                <span class="times">3x</span><span class="lbl">spins</span>
            </div>
            <div class="pack" data-qty="5" onclick="pickPack(this, 5)">
                <span class="times">5x</span><span class="lbl">spins</span>
            </div>
            <div class="pack" data-qty="8" onclick="pickPack(this, 8)">
                <span class="times">8x</span><span class="lbl">spins</span>
            </div>
            <div class="pack" data-qty="10" onclick="pickPack(this, 10)">
                <span class="times">10x</span><span class="lbl">spins</span>
            </div>
        </div>

        <button class="spin-action" id="spinBtn" onclick="trySpin()">
            <i class="fas fa-play" style="margin-right:8px;"></i>SPIN NOW
        </button>
        <button class="spin-action" id="balanceBtn" onclick="tryBalanceSpin()"
                style="display:none;background:linear-gradient(135deg,#6C63FF,#4A90D9);margin-top:8px;">
            <i class="fas fa-sync-alt" style="margin-right:8px;"></i>USE BALANCE SPIN
            <span id="balanceBtnCount" style="margin-left:6px;opacity:0.8;"></span>
        </button>
    </div>

    <!-- CHARACTER COLUMN -->
    <div class="char-col">
        <div class="hero-text">
            <h1>LUCKY SPIN<br>WHEEL</h1>
            <p>Win attractive gifts when you spin</p>
        </div>
        {% set active_char = settings.character_image_female if settings.character_gender == 'female' and settings.character_image_female else settings.character_image %}
        {% if active_char %}
        <img class="char-img" src="{{ url_for('static', filename='uploads/' + active_char) }}" alt="Lucky Character">
        {% endif %}
        <!-- floating prize items -->
        {% for p in prizes[:4] %}
        <div class="float-item" style="
            {% if loop.index == 1 %}top:5%;left:-30px;{% endif %}
            {% if loop.index == 2 %}top:20%;right:-20px;{% endif %}
            {% if loop.index == 3 %}bottom:25%;left:-24px;{% endif %}
            {% if loop.index == 4 %}bottom:10%;right:-16px;{% endif %}
        ">
            {% if p.image %}
            <img src="{{ url_for('static', filename='uploads/' + p.image) }}" alt="{{ p.name }}">
            {% else %}
            <i class="fas fa-gift" style="font-size:28px;color:var(--gold);padding:8px;"></i>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<footer class="foot">
    *<a href="{{ url_for('terms_page') }}">Terms and conditions apply</a>
</footer>

<!-- PAYMENT CHOICE -->
<div class="mo" id="choiceMo">
    <div class="mo-box">
        <div class="mo-icon" style="background:rgba(255,215,0,0.08);color:var(--gold);"><i class="fas fa-wallet"></i></div>
        <h2>PAYMENT</h2>
        <p>Choose your payment method</p>
        <div style="font-family:'Bebas Neue';font-size:38px;color:var(--gold);margin:8px 0;" id="moQty">3x</div>
        <div style="font-size:12px;color:#6b6050;margin-bottom:14px;">spins selected</div>
        <div style="display:flex;flex-direction:column;gap:10px;">
            <button class="mo-btn" style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;" onclick="initCard()">
                <i class="fas fa-credit-card"></i> Card — <span id="moCardPrice">0</span> RUB
            </button>
            <button class="mo-btn teal" style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;" onclick="initUsdt()">
                <i class="fas fa-coins"></i> USDT TRC-20 — <span id="moUsdtPrice">0</span> USDT
            </button>
        </div>
        <button class="mo-btn ghost" style="margin-top:10px;" onclick="closeMo('choiceMo')">Cancel</button>
    </div>
</div>

<!-- CARD PAYMENT -->
<div class="mo" id="cardMo">
    <div class="mo-box">
        <div class="mo-icon" style="background:rgba(255,215,0,0.08);color:var(--gold);"><i class="fas fa-credit-card"></i></div>
        <h2>CARD PAYMENT</h2>
        <p>Transfer the exact amount shown below</p>
        <div class="pay-info">
            <div class="pay-row"><span class="k">Amount</span><span class="v" id="cpAmt">--</span></div>
            <div class="pay-row"><span class="k">Card</span><span class="v" id="cpCard">--<button class="cpbtn" onclick="cpTxt('cpCard')">Copy</button></span></div>
            <div class="pay-row"><span class="k">Bank</span><span class="v" id="cpBank">--</span></div>
            <div class="pay-row"><span class="k">Order</span><span class="v" id="cpOrd">--</span></div>
            <div class="pay-row"><span class="k">Status</span><span class="v"><span class="sdot wait" id="cpDot"></span><span id="cpSt">Awaiting</span></span></div>
        </div>
        <button class="mo-btn" id="cpBtn" onclick="checkCard()"><i class="fas fa-check" style="margin-right:6px;"></i>I Paid</button>
        <button class="mo-btn ghost" style="margin-top:8px;" onclick="closeMo('cardMo');enableSpin();">Cancel</button>
    </div>
</div>

<!-- USDT PAYMENT -->
<div class="mo" id="usdtMo">
    <div class="mo-box">
        <div class="mo-icon" style="background:rgba(46,196,182,0.1);color:#2EC4B6;"><i class="fas fa-coins"></i></div>
        <h2>USDT TRC-20</h2>
        <p>Send the exact amount to the wallet below</p>
        <div class="pay-info">
            <div class="pay-row"><span class="k">Amount</span><span class="v" id="upAmt">--</span></div>
            <div class="pay-row"><span class="k">Network</span><span class="v" id="upNet">TRC-20</span></div>
            <div class="pay-row"><span class="k">Wallet</span><span class="v" id="upWal">--<button class="cpbtn" onclick="cpTxt('upWal')">Copy</button></span></div>
            <div class="pay-row"><span class="k">Status</span><span class="v"><span class="sdot wait" id="upDot"></span><span id="upSt">Awaiting</span></span></div>
        </div>
        <button class="mo-btn teal" id="upBtn" onclick="checkUsdt()"><i class="fas fa-search" style="margin-right:6px;"></i>Verify</button>
        <button class="mo-btn ghost" style="margin-top:8px;" onclick="closeMo('usdtMo');enableSpin();">Cancel</button>
    </div>
</div>

<!-- REGISTRATION MODAL -->
<div class="mo" id="regMo">
    <div class="mo-box">
        <div class="mo-icon" style="background:rgba(255,215,0,0.08);color:var(--gold);"><i class="fas fa-user-plus"></i></div>
        <h2>JOIN THE GAME</h2>
        <p>Register to spin the wheel and win prizes!</p>
        <div class="reg-form">
            <input type="text" id="regName" placeholder="Your name">
            <input type="email" id="regEmail" placeholder="Email address">
        </div>
        <button class="mo-btn" style="margin-top:18px;width:100%;" onclick="registerPlayer()">
            <i class="fas fa-rocket" style="margin-right:6px;"></i>Join & Play
        </button>
        <button class="mo-btn ghost" style="margin-top:8px;" onclick="closeMo('regMo')">Later</button>
    </div>
</div>

<!-- RESULT -->
<div class="mo" id="resMo">
    <div class="mo-box" id="resBox"></div>
</div>

<!-- CONFETTI CANVAS -->
<canvas id="confettiCanvas" style="position:fixed;inset:0;pointer-events:none;z-index:999;display:none;"></canvas>
{% endblock %}

{% block extra_js %}
<script>
/* ═══ DATA ═══ */
const prizes = [
  {% for p in prizes %}
  {name:"{{ p.name }}",color:"{{ p.color }}",desc:"{{ p.description }}",promo:"{{ p.promo_code }}",img:"{{ p.image }}"},
  {% endfor %}
];

/* ═══ PRIZE IMAGES ═══ */
const pImgs = [];
let imgReady = 0;
const imgTotal = prizes.filter(x=>x.img).length;
prizes.forEach((p,i) => {
    if (p.img) {
        const im = new Image();
        im.onload = () => { imgReady++; if(imgReady>=imgTotal) draw(cAng); };
        im.onerror = () => { imgReady++; };
        im.src = '/static/uploads/' + p.img;
        pImgs[i] = im;
    } else pImgs[i] = null;
});

/* ═══ CANVAS ═══ */
const cv = document.getElementById('rouletteCanvas');
const cx = cv.getContext('2d');
const S = 480, C = S/2, R = S/2-12;
let cAng = 0, spinning = false;

function draw(a) {
    cx.clearRect(0,0,S,S);
    if (!prizes.length) return;
    const sa = 2*Math.PI/prizes.length;
    prizes.forEach((p,i) => {
        const s = a + i*sa, e = s + sa;
        // slice
        cx.beginPath(); cx.moveTo(C,C); cx.arc(C,C,R,s,e); cx.closePath();
        cx.fillStyle = p.color; cx.fill();
        // border
        cx.strokeStyle = 'rgba(255,255,255,0.18)'; cx.lineWidth = 1.5; cx.stroke();
        // inner shadow
        cx.save(); cx.translate(C,C); cx.rotate(s+sa/2);
        // image or text
        if (pImgs[i] && pImgs[i].complete && pImgs[i].naturalWidth) {
            const sz = 62, ix = R*0.55 - sz/2;
            cx.drawImage(pImgs[i], ix, -sz/2, sz, sz);
            cx.textAlign='right'; cx.fillStyle='#fff';
            cx.font='700 11px Outfit'; cx.shadowColor='rgba(0,0,0,0.7)'; cx.shadowBlur=4;
            const t = p.name.length>11 ? p.name.slice(0,11)+'..' : p.name;
            cx.fillText(t, R-10, sz/2 + 6);
        } else {
            cx.textAlign='right'; cx.fillStyle='#fff';
            cx.font='700 12px Outfit'; cx.shadowColor='rgba(0,0,0,0.6)'; cx.shadowBlur=3;
            const t = p.name.length>13 ? p.name.slice(0,13)+'..' : p.name;
            cx.fillText(t, R-16, 4);
        }
        cx.shadowBlur=0;
        cx.restore();
    });
}
draw(cAng);

/* ═══ LED RING ═══ */
(function initLeds(){
    const ring = document.getElementById('ledRing');
    const frame = document.getElementById('wheelFrame');
    const w = frame.offsetWidth + 40; // ring size
    const cx = w/2, cy = w/2, r = w/2 - 4;
    for (let i=0; i<24; i++) {
        const ang = i * (2*Math.PI/24) - Math.PI/2;
        const led = document.createElement('div');
        led.className = 'led' + (i%2?' off':'');
        led.style.left = (cx + r*Math.cos(ang) - 3) + 'px';
        led.style.top = (cy + r*Math.sin(ang) - 3) + 'px';
        ring.appendChild(led);
    }
    // blink
    setInterval(() => {
        ring.querySelectorAll('.led').forEach(l => l.classList.toggle('off'));
    }, 500);
})();

/* ═══ SPIN ANIMATION ═══ */
function spinTo(idx, cb) {
    spinning = true;
    const sa = 2*Math.PI/prizes.length;
    const target = -(idx*sa + sa/2) - Math.PI/2;
    const full = 6*2*Math.PI;
    const total = full + (target - (cAng%(2*Math.PI)))%(2*Math.PI);
    const final_ = cAng + total + (total>0?0:2*Math.PI);
    const dur = 5500, t0 = Date.now(), a0 = cAng;
    function ease(t){return 1-Math.pow(1-t,3.5);}
    (function loop(){
        const t = Math.min((Date.now()-t0)/dur, 1);
        cAng = a0 + (final_-a0)*ease(t);
        draw(cAng);
        if(t<1) requestAnimationFrame(loop);
        else { spinning=false; if(cb)cb(); }
    })();
}

/* ═══ STATE ═══ */
let spinIds=[], selQty=3;
let pRub={{settings.spin_price}}, pUsdt={{settings.spin_price_usdt}};
let isRegistered = {{ 'true' if player else 'false' }};

fetch('/api/public-settings').then(r=>r.json()).then(d=>{
    pRub=d.spin_price; pUsdt=d.spin_price_usdt;
    document.getElementById('hPrice').textContent=pUsdt;
});

function pickPack(el,q) {
    selQty=q;
    document.querySelectorAll('.pack').forEach(p=>p.classList.remove('active'));
    el.classList.add('active');
}

/* ═══ MODALS ═══ */
function openMo(id){document.getElementById(id).classList.add('on');}
function closeMo(id){document.getElementById(id).classList.remove('on');}
function enableSpin(){
    document.getElementById('spinBtn').disabled=false;
    const bb=document.getElementById('balanceBtn');
    if(bb) bb.disabled=false;
}

function trySpin() {
    if(spinning) return;
    if(!isRegistered) { openMo('regMo'); return; }
    showPayment();
}

function tryBalanceSpin() {
    if(spinning) return;
    if(!isRegistered) { openMo('regMo'); return; }
    document.getElementById('balanceBtn').disabled = true;
    document.getElementById('spinBtn').disabled = true;
    fetch('/api/spin-from-balance', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(r=>r.json()).then(d=>{
        if(d.error) { alert(d.error); enableSpin(); return; }
        if(d.balance !== undefined) updateBalanceUI(d.balance);
        spinTo(d.prize_index, ()=>showRes(d, 0));
    }).catch(()=>{ alert('Connection error'); enableSpin(); });
}

function showPayment() {
    if(spinning) return;
    document.getElementById('spinBtn').disabled=true;
    document.getElementById('moQty').textContent=selQty+'x';
    document.getElementById('moCardPrice').textContent=Math.round(pRub*selQty);
    document.getElementById('moUsdtPrice').textContent=(pUsdt*selQty).toFixed(2);
    openMo('choiceMo');
}

/* ═══ CARD ═══ */
function initCard() {
    closeMo('choiceMo');
    fetch('/api/create-payment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({quantity:selQty})})
    .then(r=>r.json()).then(d=>{
        if(d.error){alert(d.error);enableSpin();return;}
        spinIds=d.spin_ids;
        document.getElementById('cpAmt').textContent=d.amount+' RUB ('+d.quantity+' spins)';
        document.getElementById('cpCard').innerHTML=d.wallet_payment+'<button class="cpbtn" onclick="cpTxt(\'cpCard\')">Copy</button>';
        document.getElementById('cpBank').textContent=d.bank_name||'--';
        document.getElementById('cpOrd').textContent=d.order_id;
        document.getElementById('cpSt').textContent='Awaiting';
        document.getElementById('cpDot').className='sdot wait';
        openMo('cardMo');
    }).catch(()=>{alert('Connection error');enableSpin();});
}
function checkCard() {
    if(!spinIds.length) return;
    const b=document.getElementById('cpBtn');
    b.disabled=true; b.innerHTML='<i class="fas fa-spinner fa-spin"></i> Verifying...';
    fetch('/api/check-payment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({spin_ids:spinIds})})
    .then(r=>r.json()).then(d=>{
        if(d.status==='completed'||d.status==='payed'){
            document.getElementById('cpSt').textContent='Paid!';
            document.getElementById('cpDot').className='sdot ok';
            setTimeout(()=>{closeMo('cardMo');runQueue();},700);
        } else {
            document.getElementById('cpSt').textContent='Not confirmed ('+d.status+')';
            b.disabled=false; b.innerHTML='<i class="fas fa-check"></i> I Paid';
        }
    }).catch(()=>{b.disabled=false;b.innerHTML='<i class="fas fa-check"></i> I Paid';});
}

/* ═══ USDT ═══ */
function initUsdt() {
    closeMo('choiceMo');
    fetch('/api/create-usdt-payment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({quantity:selQty})})
    .then(r=>r.json()).then(d=>{
        if(d.error){alert(d.error);enableSpin();return;}
        spinIds=d.spin_ids;
        document.getElementById('upAmt').textContent=d.amount+' USDT ('+d.quantity+' spins)';
        document.getElementById('upWal').innerHTML=d.wallet+'<button class="cpbtn" onclick="cpTxt(\'upWal\')">Copy</button>';
        document.getElementById('upNet').textContent=d.network;
        document.getElementById('upSt').textContent='Awaiting';
        document.getElementById('upDot').className='sdot wait';
        openMo('usdtMo');
    }).catch(()=>{alert('Connection error');enableSpin();});
}
function checkUsdt() {
    if(!spinIds.length) return;
    const b=document.getElementById('upBtn');
    b.disabled=true; b.innerHTML='<i class="fas fa-spinner fa-spin"></i> Checking...';
    fetch('/api/check-usdt-payment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({spin_ids:spinIds})})
    .then(r=>r.json()).then(d=>{
        if(d.status==='completed'){
            document.getElementById('upSt').textContent='Paid! TX:'+((d.tx_hash||'').slice(0,14))+'…';
            document.getElementById('upDot').className='sdot ok';
            setTimeout(()=>{closeMo('usdtMo');runQueue();},700);
        } else {
            document.getElementById('upSt').textContent=d.message||'Not found';
            b.disabled=false; b.innerHTML='<i class="fas fa-search"></i> Verify';
        }
    }).catch(()=>{b.disabled=false;b.innerHTML='<i class="fas fa-search"></i> Verify';});
}

/* ═══ SPIN QUEUE ═══ */
function runQueue(){if(!spinIds.length){enableSpin();return;} nextSpin();}
function nextSpin(){
    if(!spinIds.length){enableSpin();return;}
    const id=spinIds.shift();
    fetch('/api/spin',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({spin_id:id})})
    .then(r=>r.json()).then(d=>{
        if(d.error){alert(d.error);enableSpin();return;}
        spinTo(d.prize_index, ()=>showRes(d, spinIds.length));
    });
}

/* ═══ RESULT ═══ */
function showRes(d, rem) {
    const box=document.getElementById('resBox');
    const nx = rem>0 ? '<button class="mo-btn" onclick="closeMo(\'resMo\');nextSpin();" style="margin-top:10px;"><i class="fas fa-redo" style="margin-right:6px;"></i>Next ('+rem+' left)</button>' : '';
    if(d.won){
        launchConfetti();
        const imgHtml = d.prize_image
            ? '<img src="/static/uploads/'+d.prize_image+'" style="width:90px;height:90px;object-fit:contain;margin:10px auto;display:block;filter:drop-shadow(0 4px 16px rgba(255,165,0,0.4));">'
            : '<div class="mo-icon win" style="margin:0 auto 10px;"><i class="fas fa-trophy"></i></div>';
        box.innerHTML=
            '<div style="position:relative;">'+
            '<div style="font-size:48px;margin-bottom:4px;">🎉</div>'+
            imgHtml+
            '<h2 style="font-size:32px;margin-bottom:4px;">YOU WON!</h2>'+
            '<p style="font-size:18px;color:var(--gold);font-weight:700;margin-bottom:4px;">'+d.prize_name+'</p>'+
            (d.prize_description?'<p style="font-size:13px;color:#8a7e6a;margin-bottom:8px;">'+d.prize_description+'</p>':'')+
            (d.promo_code?'<div class="promo-code">'+d.promo_code+'<br><span style="font-size:11px;font-family:Outfit;font-weight:400;color:#8a7040;">promo code</span></div>':'')+
            '<p style="font-size:11px;color:#6b6050;margin-top:8px;"><i class="fas fa-envelope" style="margin-right:4px;"></i>Check your email for claim instructions</p>'+
            '<button class="mo-btn" style="margin-top:12px;" onclick="closeMo(\'resMo\');enableSpin();">Awesome!</button>'+nx+
            '</div>';
    } else {
        box.innerHTML='<div style="font-size:48px;margin-bottom:8px;">😔</div>'+
            '<h2>BETTER LUCK NEXT TIME</h2><p style="color:#8a7e6a;">You\'re so close — try again!</p>'+
            (rem>0?'<button class="mo-btn" style="margin-top:12px;" onclick="closeMo(\'resMo\');nextSpin();"><i class="fas fa-redo" style="margin-right:6px;"></i>Next ('+rem+' left)</button>'
                  :'<button class="mo-btn" style="margin-top:12px;" onclick="closeMo(\'resMo\');enableSpin();">Try Again</button>');
    }
    openMo('resMo');
}

/* ═══ BALANCE DISPLAY ═══ */
function updateBalanceUI(balance) {
    const badge = document.getElementById('spinBadge');
    const num = document.getElementById('spinBalanceNum');
    const btn = document.getElementById('balanceBtn');
    const cnt = document.getElementById('balanceBtnCount');
    if(badge && num) {
        num.textContent = balance;
        badge.style.display = balance > 0 ? 'inline-flex' : 'none';
    }
    if(btn) {
        btn.style.display = balance > 0 ? 'block' : 'none';
        if(cnt) cnt.textContent = '(' + balance + ' left)';
    }
}

function loadBalance() {
    fetch('/api/player-balance').then(r=>r.json()).then(d=>{
        if(d.registered && d.balance !== undefined) updateBalanceUI(d.balance);
    }).catch(()=>{});
}
loadBalance();
setInterval(loadBalance, 15000);

/* ═══ CONFETTI ═══ */
const confCv = document.getElementById('confettiCanvas');
const confCx = confCv.getContext('2d');
let confParticles = [], confAnim = null;

function launchConfetti() {
    confCv.width = window.innerWidth;
    confCv.height = window.innerHeight;
    confCv.style.display = 'block';
    confParticles = [];
    const colors = ['#FFD700','#FF8C00','#FF6B35','#4ade80','#60a5fa','#f472b6','#a78bfa'];
    for(let i=0;i<160;i++) {
        confParticles.push({
            x: Math.random()*confCv.width,
            y: -20 - Math.random()*200,
            w: 6+Math.random()*8, h: 10+Math.random()*14,
            color: colors[Math.floor(Math.random()*colors.length)],
            vx: (Math.random()-0.5)*4,
            vy: 2+Math.random()*5,
            rot: Math.random()*360, vr: (Math.random()-0.5)*8,
            life: 1,
        });
    }
    if(confAnim) cancelAnimationFrame(confAnim);
    (function loop(){
        confCx.clearRect(0,0,confCv.width,confCv.height);
        let alive = false;
        confParticles.forEach(p=>{
            p.x+=p.vx; p.y+=p.vy; p.rot+=p.vr; p.vy+=0.08;
            p.life = Math.max(0, 1-(p.y/confCv.height));
            if(p.y < confCv.height+20) alive=true;
            confCx.save();
            confCx.globalAlpha = Math.min(1, p.life*2);
            confCx.translate(p.x,p.y); confCx.rotate(p.rot*Math.PI/180);
            confCx.fillStyle=p.color;
            confCx.fillRect(-p.w/2,-p.h/2,p.w,p.h);
            confCx.restore();
        });
        if(alive) confAnim=requestAnimationFrame(loop);
        else confCv.style.display='none';
    })();
    setTimeout(()=>{ if(confAnim){cancelAnimationFrame(confAnim);confCv.style.display='none';} }, 5000);
}

/* ═══ REGISTER ═══ */
function registerPlayer() {
    const n=document.getElementById('regName').value;
    const e=document.getElementById('regEmail').value;
    if(!e||!e.includes('@')){alert('Enter a valid email');return;}
    fetch('/api/register',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,email:e})})
    .then(r=>r.json()).then(d=>{
        if(d.error){alert(d.error);return;}
        isRegistered=true;
        closeMo('regMo');
        // update header to show player tag
        const tr=document.querySelector('.top-right');
        const old=tr.querySelector('button.top-link');
        if(old){
            const tag=document.createElement('div');
            tag.className='player-tag';
            tag.innerHTML='<i class="fas fa-user-check"></i> '+e;
            old.replaceWith(tag);
        }
    });
}

/* ═══ UTIL ═══ */
function cpTxt(id){
    const el=document.getElementById(id);
    const t=el.textContent.replace('Copy','').trim();
    navigator.clipboard.writeText(t);
}
</script>
{% endblock %}