// Game State
const gameState = {
    round: 1,
    phase: 'buffing', // 'buffing' or 'battling'
    fighters: {
        fighter1: {
            id: 'fighter1',
            player: 1,
            health: 1,
            maxHealth: 1,
            buffs: 0,
            name: 'Fighter 1',
            sprite: '🗡️'
        },
        fighter2: {
            id: 'fighter2',
            player: 2,
            health: 1,
            maxHealth: 1,
            buffs: 0,
            name: 'Fighter 2',
            sprite: '⚔️'
        }
    },
    currentTurn: 'fighter1',
    battleInterval: null,
    countdownTimer: 10,
    countdownInterval: null
};

// Initialize game
document.addEventListener('DOMContentLoaded', () => {
    setupControls();
    setupKeyboard();
    addLog('🎮 Game Ready! You have 10 seconds to buff your characters!');
    addLog('💡 Hit your character with Q (Player 1) or P (Player 2) to add +1 HP!');
    addLog('⏰ Battle starts automatically in 10 seconds!');
    startCountdown();
});

// Setup controls
function setupControls() {
    document.getElementById('buff-player1').addEventListener('click', () => buffCharacter(1));
    document.getElementById('buff-player2').addEventListener('click', () => buffCharacter(2));
    document.getElementById('reset-game').addEventListener('click', resetGame);
}

// Setup keyboard
function setupKeyboard() {
    document.addEventListener('keydown', (e) => {
        const key = e.key.toLowerCase();

        if (gameState.phase === 'buffing') {
            if (key === 'q') {
                e.preventDefault();
                buffCharacter(1);
            } else if (key === 'p') {
                e.preventDefault();
                buffCharacter(2);
            }
        }
    });
}

// Countdown Timer
function startCountdown() {
    gameState.countdownTimer = 10;
    updateTimerDisplay();

    gameState.countdownInterval = setInterval(() => {
        gameState.countdownTimer--;
        updateTimerDisplay();

        // Make timer urgent when 3 seconds or less
        const timerDisplay = document.getElementById('timer-display');
        if (gameState.countdownTimer <= 3 && gameState.countdownTimer > 0) {
            timerDisplay.classList.add('urgent');
            addLog(`⏰ ${gameState.countdownTimer} seconds remaining!`);
        }

        // Start battle when timer reaches 0
        if (gameState.countdownTimer <= 0) {
            clearInterval(gameState.countdownInterval);
            addLog('⏰ Time\'s up! Battle begins!');
            startBattle();
        }
    }, 1000);
}

function updateTimerDisplay() {
    const timerValue = document.getElementById('timer-value');
    timerValue.textContent = gameState.countdownTimer;
}

function stopCountdown() {
    if (gameState.countdownInterval) {
        clearInterval(gameState.countdownInterval);
        gameState.countdownInterval = null;
    }
}

// Buff character (Hit with sword)
function buffCharacter(playerNum) {
    if (gameState.phase !== 'buffing') return;

    const fighter = playerNum === 1 ? gameState.fighters.fighter1 : gameState.fighters.fighter2;
    const element = document.getElementById(fighter.id);

    // Add buff (+1 HP)
    fighter.health += 1;
    fighter.maxHealth += 1;
    fighter.buffs += 1;

    // Visual effects
    element.classList.add('buffed', 'hit-flash');
    createSwordSlash(element);
    showFloatingText(element, '+1 HP!', 'buff');
    createParticles(element, '✨', 12);

    // Update UI
    updateFighterStats(fighter.id);
    addLog(`⚔️ Player ${playerNum} buffed their character! Now at ${fighter.health} HP!`);

    setTimeout(() => {
        element.classList.remove('buffed', 'hit-flash');
    }, 600);
}

// Create sword slash effect
function createSwordSlash(element) {
    const rect = element.getBoundingClientRect();
    const slash = document.createElement('div');
    slash.className = 'sword-slash';
    slash.textContent = '⚔️';
    slash.style.left = rect.left + rect.width / 2 + 'px';
    slash.style.top = rect.top + rect.height / 2 + 'px';

    document.getElementById('effects-container').appendChild(slash);

    setTimeout(() => slash.remove(), 500);
}

// Start battle
function startBattle() {
    if (gameState.phase !== 'buffing') return;

    stopCountdown();
    gameState.phase = 'battling';

    // Hide timer and disable buffing
    document.getElementById('timer-display').classList.add('hidden');
    document.getElementById('buff-player1').disabled = true;
    document.getElementById('buff-player2').disabled = true;

    // Update phase info
    document.getElementById('phase-info').querySelector('h3').textContent = '📋 Current Phase: BATTLING';
    document.getElementById('phase-description').textContent = 'Watch the fighters battle in turn-based combat!';

    addLog('⚔️ BATTLE START!');
    addLog(`🗡️ Fighter 1: ${gameState.fighters.fighter1.health} HP`);
    addLog(`⚔️ Fighter 2: ${gameState.fighters.fighter2.health} HP`);

    // Start turn-based combat
    setTimeout(() => {
        battleTurn();
    }, 1500);
}

// Execute battle turn
function battleTurn() {
    if (gameState.phase !== 'battling') return;

    const attacker = gameState.fighters[gameState.currentTurn];
    const defender = gameState.currentTurn === 'fighter1' ?
        gameState.fighters.fighter2 : gameState.fighters.fighter1;

    const attackerElement = document.getElementById(attacker.id);
    const defenderElement = document.getElementById(defender.id);

    // Update turn indicator
    document.getElementById('turn-indicator').textContent =
        `${attacker.name}'s Turn!`;

    // Attack animation
    attackerElement.classList.add('attacking');

    setTimeout(() => {
        attackerElement.classList.remove('attacking');

        // Deal damage (1 damage per attack)
        defender.health = Math.max(0, defender.health - 1);

        // Visual effects on defender
        defenderElement.classList.add('hit-flash');
        showFloatingText(defenderElement, '-1 HP!', 'damage');
        createParticles(defenderElement, '💥', 8);

        addLog(`⚔️ ${attacker.name} attacks ${defender.name} for 1 damage!`);
        addLog(`💔 ${defender.name}: ${defender.health}/${defender.maxHealth} HP remaining`);

        updateFighterStats(defender.id);

        setTimeout(() => {
            defenderElement.classList.remove('hit-flash');

            // Check if battle is over
            if (defender.health <= 0) {
                endBattle(attacker);
            } else {
                // Switch turns
                gameState.currentTurn = gameState.currentTurn === 'fighter1' ?
                    'fighter2' : 'fighter1';

                // Continue battle
                setTimeout(() => {
                    battleTurn();
                }, 1500);
            }
        }, 300);
    }, 400);
}

// End battle
function endBattle(winner) {
    gameState.phase = 'ended';

    addLog(`🎉 ${winner.name} WINS!`);
    addLog(`🏆 Victory for Player ${winner.player}!`);
    addLog(`💪 Final HP: ${winner.health}/${winner.maxHealth}`);

    document.getElementById('turn-indicator').textContent =
        `${winner.name} is the WINNER!`;

    // Celebration effects
    const winnerElement = document.getElementById(winner.id);
    createParticles(winnerElement, '🎉', 20);
    createParticles(winnerElement, '⭐', 15);

    winnerElement.style.filter = 'brightness(1.5) saturate(1.5)';
    winnerElement.style.transform = 'scale(1.2)';

    // Show restart prompt
    setTimeout(() => {
        if (confirm(`${winner.name} WINS!\n\nPlayer ${winner.player} is victorious!\n\nPlay again?`)) {
            resetGame();
        }
    }, 2000);
}

// Reset game
function resetGame() {
    // Stop any existing countdown
    stopCountdown();

    // Reset game state
    gameState.round++;
    gameState.phase = 'buffing';
    gameState.currentTurn = 'fighter1';

    gameState.fighters.fighter1.health = 1;
    gameState.fighters.fighter1.maxHealth = 1;
    gameState.fighters.fighter1.buffs = 0;

    gameState.fighters.fighter2.health = 1;
    gameState.fighters.fighter2.maxHealth = 1;
    gameState.fighters.fighter2.buffs = 0;

    // Reset UI
    document.getElementById('round').textContent = gameState.round;
    document.getElementById('buff-player1').disabled = false;
    document.getElementById('buff-player2').disabled = false;

    // Show timer again
    const timerDisplay = document.getElementById('timer-display');
    timerDisplay.classList.remove('hidden', 'urgent');

    document.getElementById('phase-info').querySelector('h3').textContent =
        '📋 Current Phase: BUFFING';
    document.getElementById('phase-description').textContent =
        'Hit your character with the sword to increase their HP!';
    document.getElementById('turn-indicator').textContent =
        'Buffing Phase - Hit your character to make them stronger!';

    // Reset fighter visuals
    document.getElementById('fighter1').style.filter = '';
    document.getElementById('fighter1').style.transform = '';
    document.getElementById('fighter2').style.filter = '';
    document.getElementById('fighter2').style.transform = '';

    updateFighterStats('fighter1');
    updateFighterStats('fighter2');

    addLog(`🔄 Round ${gameState.round} begins! You have 10 seconds to buff!`);

    // Restart countdown
    startCountdown();
}

// Update fighter stats display
function updateFighterStats(fighterId) {
    const fighter = gameState.fighters[fighterId];
    const element = document.getElementById(fighterId);

    // Update health bar
    const healthFill = element.querySelector('.health-fill');
    const percentage = (fighter.health / fighter.maxHealth) * 100;
    healthFill.style.width = percentage + '%';

    // Change health bar color
    if (percentage > 50) {
        healthFill.style.background = 'linear-gradient(90deg, #00ff00 0%, #44ff44 100%)';
    } else if (percentage > 25) {
        healthFill.style.background = 'linear-gradient(90deg, #ffaa00 0%, #ffcc00 100%)';
    } else {
        healthFill.style.background = 'linear-gradient(90deg, #ff0000 0%, #ff6b6b 100%)';
    }

    // Update HP display
    const hpValue = element.querySelector('.hp-value');
    hpValue.textContent = fighter.health;

    if (fighter.health <= fighter.maxHealth * 0.25) {
        hpValue.style.color = '#ff4444';
        hpValue.style.textShadow = '0 0 5px #ff4444';
    } else if (fighter.health <= fighter.maxHealth * 0.5) {
        hpValue.style.color = '#ffaa00';
        hpValue.style.textShadow = '0 0 5px #ffaa00';
    } else {
        hpValue.style.color = '#00ff00';
        hpValue.style.textShadow = '0 0 5px #00ff00';
    }

    // Update player stat boxes
    const playerNum = fighter.player;
    document.getElementById(`player${playerNum}-hp`).textContent = fighter.health;
    document.getElementById(`player${playerNum}-buffs`).textContent = fighter.buffs;
}

// Show floating text
function showFloatingText(element, text, type) {
    const rect = element.getBoundingClientRect();
    const floating = document.createElement('div');
    floating.className = `floating-text ${type}`;
    floating.textContent = text;
    floating.style.left = rect.left + rect.width / 2 - 30 + 'px';
    floating.style.top = rect.top + 'px';

    document.getElementById('effects-container').appendChild(floating);

    setTimeout(() => floating.remove(), 1000);
}

// Create particles
function createParticles(element, emoji, count) {
    const rect = element.getBoundingClientRect();

    for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.textContent = emoji;

        const angle = (Math.PI * 2 * i) / count;
        const distance = 60 + Math.random() * 40;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance;

        particle.style.setProperty('--tx', tx + 'px');
        particle.style.setProperty('--ty', ty + 'px');
        particle.style.left = rect.left + rect.width / 2 + 'px';
        particle.style.top = rect.top + rect.height / 2 + 'px';

        document.getElementById('effects-container').appendChild(particle);

        setTimeout(() => particle.remove(), 800);
    }
}

// Add log entry
function addLog(message) {
    const logContent = document.getElementById('log-content');
    const entry = document.createElement('div');
    entry.className = 'log-entry';
    entry.textContent = message;
    logContent.insertBefore(entry, logContent.firstChild);

    // Keep only last 30 entries
    while (logContent.children.length > 30) {
        logContent.removeChild(logContent.lastChild);
    }
}

// Auto-save
setInterval(() => {
    localStorage.setItem('fighterArenaState', JSON.stringify({
        round: gameState.round,
        fighter1HP: gameState.fighters.fighter1.health,
        fighter2HP: gameState.fighters.fighter2.health
    }));
}, 5000);