document.addEventListener('DOMContentLoaded', () => {
    const rollButton = document.getElementById('rollButton');
    const statusText = document.getElementById('statusText');
    const rewardPopup = document.querySelector('reward-popup');
    
    // Simulate loot box spin
    rollButton.addEventListener('click', () => {
        // Disable button during animation
        rollButton.disabled = true;
        statusText.textContent = "Rolling...";
        
        // Get components
        const lootBoxCarousel = document.querySelector('loot-box-carousel');
        const multiplierTrack = document.querySelector('multiplier-track');
        
        // Start both animations
        lootBoxCarousel.startSpin();
        multiplierTrack.startSpin();
        
        // After animations complete, show reward
        setTimeout(() => {
            const selectedBox = lootBoxCarousel.getSelectedBox();
            const selectedMultiplier = multiplierTrack.getSelectedMultiplier();
            
            // Calculate reward
            const baseReward = selectedBox.value;
            const multiplier = selectedMultiplier.value;
            const finalReward = baseReward * multiplier;
            
            // Update status
            statusText.textContent = `Selected: ${selectedBox.rarity} Loot Box (${baseReward} SC) ×${multiplier}`;
            
            // Show reward popup
            rewardPopup.show({
                baseReward,
                multiplier,
                finalReward,
                rarity: selectedBox.rarity
            });
            
            // Re-enable button
            rollButton.disabled = false;
        }, 5000); // Match this with animation duration
    });
    
    // Initialize reward popup as hidden
    rewardPopup.hide();
});