document.addEventListener('DOMContentLoaded', function() {
    // Item selection
    const itemCards = document.querySelectorAll('.item-card');
    let selectedItem = null;

    itemCards.forEach(card => {
        card.addEventListener('click', function() {
            itemCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            selectedItem = this.dataset.item;
        });
    });

    // Form submission
    const statsForm = document.getElementById('stats-form');
    const resultsSection = document.getElementById('results');
    const resultContent = document.getElementById('result-content');

    statsForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!selectedItem) {
            alert('Please select an item first');
            return;
        }

        const attack = parseInt(document.getElementById('attack').value) || 0;
        const defense = parseInt(document.getElementById('defense').value) || 0;
        const luck = parseInt(document.getElementById('luck').value) || 0;

        if (attack < 1 || defense < 1 || luck < 1) {
            alert('Please enter valid stats (minimum 1)');
            return;
        }

        // Simulate effects
        const results = simulateEffects(selectedItem, attack, defense, luck);
        displayResults(results);
        
        // Store in history
        const history = JSON.parse(localStorage.getItem('simulationHistory')) || [];
        history.push({
            date: new Date().toISOString().split('T')[0],
            item: selectedItem,
            stats: {
                attack: parseInt(document.getElementById('attack').value),
                defense: parseInt(document.getElementById('defense').value),
                luck: parseInt(document.getElementById('luck').value)
            },
            effects: results
        });
        localStorage.setItem('simulationHistory', JSON.stringify(history));
        
        resultsSection.classList.remove('hidden');
        resultsSection.scrollIntoView({ behavior: 'smooth' });
});

    function simulateEffects(item, attack, defense, luck) {
        // Deterministic rules with some randomness
        const seed = attack + defense + luck;
        const randomFactor = (Math.sin(seed) + 1) / 2; // Pseudo-random based on stats
        
        let effects = {};
        
        switch(item) {
            case 'sword':
                effects.damageBoost = Math.round((attack * 0.5 + luck * 0.2) * (0.8 + randomFactor * 0.4));
                effects.criticalChance = Math.round((luck * 0.3 + attack * 0.1) * (0.5 + randomFactor * 0.5));
                effects.description = "Your attacks become more powerful, with increased chance to land critical hits.";
                break;
            case 'shield':
                effects.damageReduction = Math.round((defense * 0.6 + luck * 0.1) * (0.7 + randomFactor * 0.3));
                effects.blockChance = Math.round((defense * 0.4 + attack * 0.05) * (0.6 + randomFactor * 0.4));
                effects.description = "Your defenses are strengthened, allowing you to mitigate more damage and block attacks.";
                break;
            case 'star':
                effects.luckMultiplier = Math.round((luck * 0.8 + attack * 0.1 + defense * 0.1) * (0.5 + randomFactor * 0.5));
                effects.itemFindChance = Math.round((luck * 0.5) * (0.6 + randomFactor * 0.4));
                effects.description = "Fortune smiles upon you, increasing your chances for favorable outcomes.";
                break;
        }
        
        effects.itemName = getItemName(item);
        effects.icon = item;
        
        return effects;
    }
    
    function getItemName(item) {
        switch(item) {
            case 'sword': return 'Blade of Might';
            case 'shield': return 'Aegis Barrier';
            case 'star': return 'Talisman of Fortune';
            default: return 'Mysterious Artifact';
        }
    }

    function displayResults(results) {
        resultContent.innerHTML = '';
        
        // Header with item info
        const header = document.createElement('div');
        header.className = 'flex items-center mb-6';
        header.innerHTML = `
            <i data-feather="${results.icon}" class="w-12 h-12 mr-4"></i>
            <div>
                <h3 class="text-xl font-semibold">${results.itemName}</h3>
                <p class="text-gray-600">${results.description}</p>
            </div>
        `;
        resultContent.appendChild(header);
        
        // Display all effects
        for (const [key, value] of Object.entries(results)) {
            if (key === 'itemName' || key === 'description' || key === 'icon') continue;
            
            const effectDiv = document.createElement('div');
            effectDiv.className = 'result-card mb-4';
            
            const label = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
            const percentage = key.includes('Chance') || key.includes('Multiplier') || key.includes('Reduction');
            
            effectDiv.innerHTML = `
                <h3>${label}</h3>
                <div class="flex items-center mt-2">
                    <div class="progress-bar mr-4">
                        <div class="progress-fill" style="width: ${Math.min(value, 100)}%"></div>
                    </div>
                    <span class="font-medium">${value}${percentage ? '%' : ''}</span>
                </div>
            `;
            
            resultContent.appendChild(effectDiv);
        }
        
        // Re-render feather icons
        feather.replace();
    }
});