script.js

document.addEventListener('DOMContentLoaded', () => {
    const numBandsInput = document.getElementById('num-bands');
    const numDisplay = document.getElementById('num-display');
    const extractBtn = document.getElementById('extract-btn');
    const slotMachine = document.getElementById('slot-machine');
    const resultsGrid = document.getElementById('results');
    
    // Update slider number display
    numBandsInput.addEventListener('input', (e) => {
        numDisplay.textContent = e.target.value;
    });

    // Fallback data if bands.js fails to load
    let library = (typeof window.bandsData !== 'undefined') ? window.bandsData : [
        { band: "Nessun dato trovato - attendi file bands.js", category: "Error" }
    ];

    let isSpinning = false;

    extractBtn.addEventListener('click', () => {
        if (isSpinning) return;
        
        // Ensure library is populated from global bandsData
        if (window.bandsData && window.bandsData.length > 0) {
            library = window.bandsData;
        }

        const count = parseInt(numBandsInput.value, 10);
        startExtractionPhase(count);
    });

    function startExtractionPhase(count) {
        isSpinning = true;
        extractBtn.disabled = true;
        extractBtn.style.opacity = '0.5';
        extractBtn.textContent = 'Estrazione in corso...';
        
        // Hide previous results
        resultsGrid.innerHTML = '';
        resultsGrid.classList.add('hidden');
        
        // Set up the slot machine UI
        slotMachine.innerHTML = '<div class="reel-container"></div>';
        const reelContainer = slotMachine.querySelector('.reel-container');
        
        // Pick the winning bands
        const winners = [];
        const pool = [...library];
        for(let i=0; i<count; i++) {
            if (pool.length === 0) break;
            const randIdx = Math.floor(Math.random() * pool.length);
            winners.push(pool.splice(randIdx, 1)[0]);
        }
        
        // Animation variables
        let spinDuration = 3000; // Total ms of spinning
        let frameRate = 50;      // ms between name swaps
        let elapsed = 0;
        
        const spinInterval = setInterval(() => {
            elapsed += frameRate;
            
            // Random band for visual effect
            const randomBand = library[Math.floor(Math.random() * library.length)].band;
            
            reelContainer.innerHTML = `<div class="reel-item active">${randomBand}</div>`;
            
            // At the end of spin duration, stop spinning and show results
            if (elapsed >= spinDuration) {
                clearInterval(spinInterval);
                finishExtraction(winners);
            }
        }, frameRate);
    }

    function finishExtraction(winners) {
        // Show celebration effect on slot machine briefly
        slotMachine.innerHTML = `
            <div class="reel-container">
                <div class="reel-item active" style="color: var(--accent-1); font-size: 3rem;">🎉 FATTO! 🎉</div>
            </div>`;
            
        setTimeout(() => {
            // Revert slot machine to default
            slotMachine.innerHTML = `
                <div class="slot-placeholder">
                    <div class="icon">🤘</div>
                    <p>Estrazione Completata</p>
                </div>`;
            
            // Render results
            resultsGrid.classList.remove('hidden');
            winners.forEach((winner, index) => {
                const card = document.createElement('a');
                if (winner.link) {
                    card.href = winner.link;
                    card.target = '_blank';
                }
                card.className = 'band-card';
                card.style.animationDelay = `${index * 0.1}s`;
                
                card.innerHTML = `
                    <div class="band-name">${winner.band}</div>
                    <div class="band-category">${winner.category}</div>
                `;
                resultsGrid.appendChild(card);
            });
            
            // Reset button
            isSpinning = false;
            extractBtn.disabled = false;
            extractBtn.style.opacity = '1';
            extractBtn.innerHTML = '<span class="btn-text">Estrai Ancora 🤘</span><span class="btn-glow"></span>';
        }, 1000);
    }
});