document.addEventListener('DOMContentLoaded', () => {
    // Game state
    let balance = localStorage.getItem('coinBalance') ? parseInt(localStorage.getItem('coinBalance')) : 0;
    let totalTaps = localStorage.getItem('totalTaps') ? parseInt(localStorage.getItem('totalTaps')) : 0;
    let coinsPerTap = 1;
    
    // DOM elements
    const character = document.getElementById('character');
    const balanceDisplay = document.querySelector('#balance span');
    const totalTapsDisplay = document.getElementById('total-taps');
    const coinsPerTapDisplay = document.getElementById('coins-per-tap');
    const coinEffect = document.getElementById('coin-effect');
    
    // Initialize displays
    updateDisplays();
    
    // Tap handler
    character.addEventListener('click', (e) => {
        // Increment counters
        totalTaps++;
        balance += coinsPerTap;
        
        // Save to localStorage
        localStorage.setItem('coinBalance', balance);
        localStorage.setItem('totalTaps', totalTaps);
        
        // Update displays
        updateDisplays();
        
        // Create coin effect
        createCoinEffect(e);
        
        // Add temporary animation class
        character.classList.add('animate-pulse');
        setTimeout(() => {
            character.classList.remove('animate-pulse');
        }, 200);
    });
    
    function updateDisplays() {
        balanceDisplay.textContent = balance.toLocaleString();
        totalTapsDisplay.textContent = totalTaps.toLocaleString();
        coinsPerTapDisplay.textContent = coinsPerTap;
    }
    
    function createCoinEffect(e) {
        // Get character position
        const rect = character.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        
        // Create multiple coins
        for (let i = 0; i < 3; i++) {
            const coin = document.createElement('div');
            coin.classList.add('coin');
            
            // Position randomly around the click point
            const offsetX = (Math.random() - 0.5) * 40;
            const offsetY = (Math.random() - 0.5) * 40;
            
            coin.style.left = `${centerX + offsetX}px`;
            coin.style.top = `${centerY + offsetY}px`;
            
            // Random delay for animation
            coin.style.animationDelay = `${i * 0.1}s`;
            
            document.body.appendChild(coin);
            
            // Remove coin after animation
            setTimeout(() => {
                coin.remove();
            }, 800);
        }
    }
    
    // Check for saved data on load
    if (totalTaps > 0) {
        // Show welcome back message
        const welcomeBack = document.createElement('div');
        welcomeBack.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-full shadow-lg z-50 animate-bounce';
        welcomeBack.textContent = `Welcome back! You have ${balance} coins!`;
        document.body.appendChild(welcomeBack);
        
        setTimeout(() => {
            welcomeBack.remove();
        }, 3000);
    }
});