<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Lucky Spin - CV111</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    *{box-sizing:border-box; margin:0; padding:0;}
    :root{
        --bg:#0A0714; --card:#181129; --border:rgba(255,255,255,.07); --border-hi:rgba(155,93,229,.35);
        --gold:#F5C542; --purple:#9B5DE5; --text:#FFFFFF; --muted:#9691B0;
    }
    body{
        min-height:100vh; font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text);
        background:radial-gradient(circle at 20% 0%, rgba(155,93,229,.15), transparent 45%),
                   radial-gradient(circle at 90% 100%, rgba(245,197,66,.1), transparent 40%), var(--bg);
        padding-bottom:34px;
    }
    .top{ display:flex; align-items:center; gap:14px; padding:18px 16px; }
    .top a{ width:38px; height:38px; border-radius:12px; background:var(--card); border:1px solid var(--border);
        display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; font-size:15px; }
    .top h1{ font-size:17px; font-weight:800; }

    main{ max-width:420px; margin:0 auto; padding:0 20px; text-align:center; }

    .wheel-wrap{ position:relative; width:280px; height:280px; margin:20px auto; }
    .pointer{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:10;
        width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:24px solid #F5C542;
        filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
    #wheel{ width:100%; height:100%; border-radius:50%; border:6px solid var(--gold);
        box-shadow:0 0 40px rgba(245,197,66,.4); transition:transform 5s cubic-bezier(.17,.67,.12,.99); }
    .center-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px;
        border-radius:50%; background:linear-gradient(135deg,#F5C542,#E0A926); border:3px solid var(--bg);
        display:flex; align-items:center; justify-content:center; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.4); }
    .center-hub i{ color:#1a1400; font-size:20px; }

    .spin-btn{ width:100%; padding:16px; border-radius:16px; border:none; font-weight:800; font-size:15px; cursor:pointer;
        background:linear-gradient(135deg,#6C3FC5,#9B5DE5,#B57EF0); color:#fff;
        box-shadow:0 14px 30px -10px rgba(108,63,197,.6); margin-top:20px; transition:transform .12s;}
    .spin-btn:active{ transform:scale(.98); }
    .spin-btn:disabled{ opacity:.5; cursor:not-allowed; }

    .status-text{ margin-top:14px; font-size:12.5px; color:var(--muted); }
    .result-box{ margin-top:16px; padding:16px; border-radius:14px; background:rgba(245,197,66,.1);
        border:1px solid rgba(245,197,66,.3); display:none; }
    .result-box.show{ display:block; animation:popIn .4s ease; }
    @keyframes popIn{ from{opacity:0; transform:scale(.8);} to{opacity:1; transform:scale(1);} }
    .result-box .amount{ font-size:24px; font-weight:900; color:var(--gold); }
    .result-box .label{ font-size:12px; color:var(--muted); margin-top:4px; }
</style>
</head>
<body>
<?php $pt = __DIR__ . '/page_transition.php'; if (file_exists($pt)) { include $pt; } ?>

<div class="top">
    <a href="/newrewardcenter.php"><i class="fa-solid fa-arrow-left"></i></a>
    <h1>🎡 Lucky Spin</h1>
</div>

<main>
    <div class="wheel-wrap">
        <div class="pointer"></div>
        <svg id="wheel" viewBox="0 0 200 200"></svg>
        <div class="center-hub"><i class="fa-solid fa-star"></i></div>
    </div>

    <button class="spin-btn" id="spinBtn" onclick="doSpin()">Spin করো!</button>
    <div class="status-text" id="statusText">লোড হচ্ছে...</div>

    <div class="result-box" id="resultBox">
        <div class="amount" id="resultAmount"></div>
        <div class="label">🎉 তুমি জিতেছো!</div>
    </div>
</main>

<script>
const token = localStorage.getItem('token');
if (!token) window.location.href = '/newlogin.php';

let prizes = [];
let currentRotation = 0;

function drawWheel() {
    const svg = document.getElementById('wheel');
    const n = prizes.length;
    const anglePerSlice = 360 / n;
    let paths = '';

    prizes.forEach((p, i) => {
        const startAngle = i * anglePerSlice;
        const endAngle = startAngle + anglePerSlice;
        const startRad = (startAngle - 90) * Math.PI / 180;
        const endRad = (endAngle - 90) * Math.PI / 180;
        const x1 = 100 + 95 * Math.cos(startRad);
        const y1 = 100 + 95 * Math.sin(startRad);
        const x2 = 100 + 95 * Math.cos(endRad);
        const y2 = 100 + 95 * Math.sin(endRad);
        const largeArc = anglePerSlice > 180 ? 1 : 0;

        paths += `<path d="M100,100 L${x1},${y1} A95,95 0 ${largeArc},1 ${x2},${y2} Z" fill="${p.color}" stroke="#0A0714" stroke-width="1"/>`;

        const textAngle = startAngle + anglePerSlice / 2 - 90;
        const textRad = textAngle * Math.PI / 180;
        const tx = 100 + 62 * Math.cos(textRad);
        const ty = 100 + 62 * Math.sin(textRad);
        paths += `<text x="${tx}" y="${ty}" fill="#fff" font-size="9" font-weight="800" text-anchor="middle" transform="rotate(${textAngle + 90}, ${tx}, ${ty})">${p.label}</text>`;
    });

    svg.innerHTML = paths;
}

async function loadStatus() {
    try {
        const res = await fetch('/spin_api.php?action=check', {
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();
        prizes = data.prizes || [];
        drawWheel();

        const btn = document.getElementById('spinBtn');
        const statusText = document.getElementById('statusText');

        if (!data.can_spin) {
            btn.disabled = true;
            btn.textContent = 'আজকের Spin শেষ';
            statusText.textContent = `আজ তুমি "${data.last_prize.prize_label}" জিতেছিলে — কাল আবার এসো!`;
        } else {
            btn.disabled = false;
            btn.textContent = 'Spin করো!';
            statusText.textContent = 'দিনে ১ বার Spin করার সুযোগ আছে';
        }
    } catch (e) {
        document.getElementById('statusText').textContent = 'কিছু একটা সমস্যা হয়েছে';
    }
}

async function doSpin() {
    const btn = document.getElementById('spinBtn');
    btn.disabled = true;
    btn.textContent = 'ঘুরছে...';

    try {
        const res = await fetch('/spin_api.php?action=spin', {
            method: 'POST',
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();

        if (data.code !== 0) {
            document.getElementById('statusText').textContent = data.msg;
            btn.textContent = 'আজকের Spin শেষ';
            return;
        }

        // ✅ Wheel-কে Prize-এর সঠিক Position-এ ঘুরিয়ে থামানো
        const n = prizes.length;
        const anglePerSlice = 360 / n;
        const targetIndex = data.prize_index;
        const targetAngle = 360 * 6 - (targetIndex * anglePerSlice + anglePerSlice / 2);

        currentRotation = targetAngle;
        document.getElementById('wheel').style.transform = `rotate(${currentRotation}deg)`;

        setTimeout(() => {
            document.getElementById('resultAmount').textContent = data.prize.label;
            document.getElementById('resultBox').classList.add('show');
            document.getElementById('statusText').textContent = 'কাল আবার এসো!';
            btn.textContent = 'আজকের Spin শেষ';
        }, 5200);

    } catch (e) {
        document.getElementById('statusText').textContent = 'একটা সমস্যা হয়েছে, আবার চেষ্টা করো।';
        btn.disabled = false;
        btn.textContent = 'Spin করো!';
    }
}

loadStatus();
</script>

</body>
</html>
