document.addEventListener('DOMContentLoaded', function() {
  // Initialize loot boxes
  const lootTrack = document.getElementById('lootTrack');
  const lootBoxes = [
    { value: 10, rarity: 'common' },
    { value: 25, rarity: 'uncommon' },
    { value: 50, rarity: 'rare' },
    { value: 100, rarity: 'epic' },
    { value: 250, rarity: 'legendary' },
    { value: 500, rarity: 'mythic' },
    { value: 1000, rarity: 'divine' }
  ];

  lootBoxes.forEach((box, index) => {
    const boxElement = document.createElement('div');
    boxElement.className = 'loot-box flex-shrink-0';
    boxElement.dataset.value = box.value;
    boxElement.dataset.rarity = box.rarity;
    
    const icon = document.createElement('i');
    icon.setAttribute('data-feather', 'box');
    icon.className = 'text-white';
    
    boxElement.appendChild(icon);
    lootTrack.appendChild(boxElement);
    
    // Add duplicate boxes for infinite scroll effect
    if (index < 3) {
      const clone = boxElement.cloneNode(true);
      lootTrack.appendChild(clone);
    }
  });

  // Initialize multipliers
  const multiTrack = document.getElementById('multiTrack');
  const multipliers = [1, 1.5, 2, 2.5, 3, 5, 10];

  multipliers.forEach((mult, index) => {
    const multElement = document.createElement('div');
    multElement.className = 'multiplier flex-shrink-0';
    multElement.textContent = `×${mult}`;
    multElement.dataset.multiplier = mult;
    
    multiTrack.appendChild(multElement);
    
    // Add duplicate multipliers for infinite scroll effect
    if (index < 3) {
      const clone = multElement.cloneNode(true);
      multiTrack.appendChild(clone);
    }
  });

  // Spin functionality
  const spinBtn = document.getElementById('spinBtn');
  const resultModal = document.getElementById('resultModal');
  const resultAmount = document.getElementById('resultAmount');
  const resultDetails = document.getElementById('resultDetails');
  const closeModal = document.getElementById('closeModal');

  spinBtn.addEventListener('click', function() {
    // Disable button during spin
    spinBtn.disabled = true;
    spinBtn.classList.add('opacity-50', 'cursor-not-allowed');
    spinBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i><span>SPINNING...</span>';
    feather.replace();

    // Simulate spinning animation
    lootTrack.style.transition = 'transform 4s cubic-bezier(0.1, 0.7, 0.1, 1)';
    multiTrack.style.transition = 'transform 3.5s cubic-bezier(0.1, 0.7, 0.1, 1)';

    // Random final positions
    const lootPosition = -Math.floor(Math.random() * lootBoxes.length) * 108 - 54;
    const multiPosition = -Math.floor(Math.random() * multipliers.length) * 86 - 43;

    lootTrack.style.transform = `translateX(${lootPosition}px)`;
    multiTrack.style.transform = `translateX(${multiPosition}px)`;

    // After spin completes
    setTimeout(() => {
      // Get results
      const lootResult = Math.floor(Math.random() * lootBoxes.length);
      const multiResult = Math.floor(Math.random() * multipliers.length);
      
      const prize = lootBoxes[lootResult].value;
      const multiplier = multipliers[multiResult];
      const total = prize * multiplier;

      // Show result
      resultAmount.textContent = `${total} SC`;
      resultDetails.innerHTML = `
        <div>Base: ${prize} SC</div>
        <div>Multiplier: ×${multiplier}</div>
      `;
      resultModal.classList.remove('hidden');

      // Reset button
      spinBtn.disabled = false;
      spinBtn.classList.remove('opacity-50', 'cursor-not-allowed');
      spinBtn.innerHTML = '<i data-feather="rotate-cw"></i><span>SPIN AGAIN</span>';
      feather.replace();
    }, 4000);
  });

  closeModal.addEventListener('click', function() {
    resultModal.classList.add('hidden');
  });

  // Replace icons again after dynamic content
  feather.replace();
});