<?php
// Define rewards in PHP (can later be loaded from DB, etc.)
$rewards = [
    "10 Coins",
    "20 Coins",
    "50 Coins",
    "Try Again",
    "100 Coins",
    "Free Spin",
    "Better Luck Next Time",
    "Jackpot"
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spin Wheel Demo</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 40px;
            background: #f0f2f5;
            text-align: center;
        }

        h1 {
            margin-bottom: 10px;
        }

        .main-btn {
            padding: 12px 24px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background: #2196f3;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        }

        .main-btn:hover {
            background: #1976d2;
        }

        /* Modal (popup) overlay */
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.6);
            display: none;          /* hidden by default */
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal.show {
            display: flex;          /* flex centers content */
        }

        .modal-content {
            background: #fff;
            padding: 20px 30px 30px;
            border-radius: 8px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            position: relative;
            box-shadow: 0 8px 16px rgba(0,0,0,0.25);
        }

        .close-btn {
            position: absolute;
            top: 8px;
            right: 10px;
            font-size: 22px;
            border: none;
            background: none;
            cursor: pointer;
            color: #777;
        }

        .close-btn:hover {
            color: #000;
        }

        .primary-btn {
            padding: 10px 22px;
            font-size: 15px;
            border-radius: 4px;
            border: none;
            margin-top: 10px;
            background: #4caf50;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .primary-btn:disabled {
            opacity: 0.6;
            cursor: default;
        }

        .primary-btn:hover:not(:disabled) {
            background: #388e3c;
        }

        .wheel-wrapper {
            position: relative;
            width: 260px;
            height: 260px;
            margin: 20px auto;
        }

        .wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 8px solid #333;
            /* 8 slices, 45deg each, colors mapped to PHP rewards order */
            background: conic-gradient(
                #f44336 0deg   45deg,
                #ff9800 45deg  90deg,
                #ffeb3b 90deg  135deg,
                #4caf50 135deg 180deg,
                #2196f3 180deg 225deg,
                #9c27b0 225deg 270deg,
                #00bcd4 270deg 315deg,
                #795548 315deg 360deg
            );
            box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(0,0,0,0.4);
            transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
            transform: rotate(0deg);
        }

        /* Center circle just for look (optional) */
        .wheel::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            background: #fff;
            border-radius: 50%;
            border: 3px solid #333;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Pointer at the top */
        .pointer {
            position: absolute;
            top: -32px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 18px solid transparent;
            border-right: 18px solid transparent;
            border-bottom: 32px solid #e91e63;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
        }

        .result {
            margin-top: 15px;
            font-weight: bold;
            min-height: 24px;
        }
    </style>
</head>
<body>

    <h1>Spin Wheel Example</h1>
    <p>Click the button to open the spin wheel popup.</p>

    <!-- Main page button -->
    <button class="main-btn" id="openModalBtn">Rotate Spin Wheel</button>

    <!-- Modal popup -->
    <div class="modal" id="spinModal">
        <div class="modal-content">
            <button class="close-btn" id="closeModalBtn">&times;</button>
            <h2>Spin &amp; Win</h2>

            <div class="wheel-wrapper">
                <div class="pointer"></div>
                <div class="wheel" id="wheel"></div>
            </div>

            <button class="primary-btn" id="spinBtn">Rotate</button>
            <div class="result" id="resultText">Click "Rotate" to spin the wheel.</div>
        </div>
    </div>

    <script>
        // PHP rewards → JS array
        const rewards = <?php echo json_encode($rewards); ?>;

        const openModalBtn  = document.getElementById('openModalBtn');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const modal         = document.getElementById('spinModal');
        const wheel         = document.getElementById('wheel');
        const spinBtn       = document.getElementById('spinBtn');
        const resultText    = document.getElementById('resultText');

        let isSpinning = false;
        let currentRotation = 0;

        // Open popup
        openModalBtn.addEventListener('click', () => {
            modal.classList.add('show');
        });

        // Close popup
        function closeModal() {
            if (isSpinning) return; // optional: prevent closing while spinning
            modal.classList.remove('show');
        }

        closeModalBtn.addEventListener('click', closeModal);

        // Close if click on dark background
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });

        // Spin logic
        spinBtn.addEventListener('click', () => {
            if (isSpinning) return;
            isSpinning = true;
            spinBtn.disabled = true;
            resultText.textContent = 'Spinning...';

            const sliceCount = rewards.length;    // must match CSS slices (8 here)
            const fullSpins  = 3;                 // how many full 360° spins
            const randomEnd  = Math.floor(Math.random() * 360); // extra degrees

            const targetRotation = currentRotation + fullSpins * 360 + randomEnd;

            // Apply rotation
            wheel.style.transform = `rotate(${targetRotation}deg)`;

            const onTransitionEnd = () => {
                wheel.removeEventListener('transitionend', onTransitionEnd);

                // Normalize rotation to 0–359
                const finalRotation = ((targetRotation % 360) + 360) % 360;
                currentRotation = finalRotation;

                // Pointer is at 12 o'clock (90deg in CSS angle system)
                // Find original angle under pointer before rotation
                const pointerAngle = (90 - finalRotation + 360) % 360;

                const sliceAngle = 360 / sliceCount;
                const index = Math.floor(pointerAngle / sliceAngle);

                const reward = rewards[index] || 'No Reward';
                resultText.textContent = 'You won: ' + reward;

                isSpinning = false;
                spinBtn.disabled = false;
            };

            wheel.addEventListener('transitionend', onTransitionEnd);
        });
    </script>
</body>
</html>
