document.addEventListener('DOMContentLoaded', function() {
    // Initialize match history from localStorage or create empty array
    let matchHistory = JSON.parse(localStorage.getItem('stadiumModHistory')) || [];
    
    // Set next match date (always next Saturday)
    const today = new Date();
    const nextSaturday = new Date(today);
    nextSaturday.setDate(today.getDate() + (6 - today.getDay() + 7) % 7);
    document.getElementById('next-match').textContent = nextSaturday.toLocaleDateString('en-US', { 
        weekday: 'long', 
        month: 'long', 
        day: 'numeric' 
    });

    // Display match history
    renderMatchHistory();

    // Simulation button
    document.getElementById('simulate-btn').addEventListener('click', function() {
        simulateMatch();
    });

    function simulateMatch() {
        const resultContainer = document.getElementById('result-container');
        const matchResult = document.getElementById('match-result');
        const happinessImpact = document.getElementById('happiness-impact');
        
        // Random result (60% chance to win, 40% to lose)
        const isWin = Math.random() < 0.6;
        const resultText = isWin ? "🏆 Your team won!" : "😞 Your team lost...";
        const impactText = isWin ? 
            "Citizens are celebrating! Happiness increased by 15%." : 
            "Citizens are disappointed. Happiness decreased by 10%.";
        
        // Add to match history
        const matchEntry = {
            date: new Date().toLocaleDateString(),
            result: isWin ? 'win' : 'loss',
            happinessChange: isWin ? 15 : -10
        };
        
        matchHistory.unshift(matchEntry);
        localStorage.setItem('stadiumModHistory', JSON.stringify(matchHistory));
        
        // Display result
        matchResult.textContent = resultText;
        happinessImpact.textContent = impactText;
        resultContainer.className = isWin ? 
            'mt-4 p-4 rounded-lg win-animation' : 
            'mt-4 p-4 rounded-lg loss-animation';
        resultContainer.classList.remove('hidden');
        
        // Update history display
        renderMatchHistory();
        
        // Disable button temporarily
        const btn = document.getElementById('simulate-btn');
        btn.disabled = true;
        setTimeout(() => {
            btn.disabled = false;
        }, 3000);
    }

    function renderMatchHistory() {
        const container = document.getElementById('match-history');
        container.innerHTML = '';
        
        if (matchHistory.length === 0) {
            container.innerHTML = '<p class="text-gray-500">No matches played yet</p>';
            return;
        }
        
        matchHistory.forEach(match => {
            const matchEl = document.createElement('div');
            matchEl.className = `match-item p-3 rounded-lg flex justify-between items-center ${
                match.result === 'win' ? 'bg-green-50' : 'bg-red-50'
            }`;
            
            matchEl.innerHTML = `
                <div class="flex items-center">
                    <i data-feather="${match.result === 'win' ? 'thumbs-up' : 'thumbs-down'}" 
                       class="w-4 h-4 mr-2 ${match.result === 'win' ? 'text-green-500' : 'text-red-500'}"></i>
                    <span class="font-medium">${match.date}</span>
                </div>
                <span class="${match.result === 'win' ? 'text-green-600' : 'text-red-600'} font-bold">
                    ${match.result === 'win' ? '+' : ''}${match.happinessChange}% happiness
                </span>
            `;
            
            container.appendChild(matchEl);
        });
        
        feather.replace();
    }
});