const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Player object
const player = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    width: 50,
    height: 50,
    speed: 5,
    state: 'water', // can be 'fire' or 'water'
    mana: 100,
    maxMana: 100
};

// UI elements
const manaBar = document.getElementById('manaBar');
const levelDisplay = document.getElementById('levelDisplay');

// Levels and obstacles
const levels = [
    // Level 1 obstacles
    [
        { x: 100, y: 100, width: 50, height: 50, type: 'fire' },
        { x: 200, y: 200, width: 50, height: 50, type: 'water' }
    ],
    // Level 2 obstacles
    [
        { x: 300, y: 300, width: 50, height: 50, type: 'water' },
        { x: 400, y: 400, width: 50, height: 50, type: 'fire' }
    ]
];
let currentLevel = 0;

// Input handling
let keys = {};
document.addEventListener('keydown', e => {
    keys[e.key.toLowerCase()] = true;
});
document.addEventListener('keyup', e => {
    keys[e.key.toLowerCase()] = false;
});

// Touch controls
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
const upBtn = document.getElementById('upBtn');
const downBtn = document.getElementById('downBtn');
const actionBtn = document.getElementById('actionBtn');

leftBtn.addEventListener('touchstart', () => keys['a'] = true);
leftBtn.addEventListener('touchend', () => keys['a'] = false);
rightBtn.addEventListener('touchstart', () => keys['d'] = true);
rightBtn.addEventListener('touchend', () => keys['d'] = false);
upBtn.addEventListener('touchstart', () => keys['w'] = true);
upBtn.addEventListener('touchend', () => keys['w'] = false);
downBtn.addEventListener('touchstart', () => keys['s'] = true);
downBtn.addEventListener('touchend', () => keys['s'] = false);
actionBtn.addEventListener('touchstart', () => {
    if (player.mana >= 20) {
        // Switch state or use action
        player.state = player.state === 'water' ? 'fire' : 'water';
        player.mana -= 20;
    }
});

// Game loop
function gameLoop() {
    update();
    render();
    requestAnimationFrame(gameLoop);
}

function update() {
    // Player movement
    if (keys['w']) player.y -= player.speed;
    if (keys['s']) player.y += player.speed;
    if (keys['a']) player.x -= player.speed;
    if (keys['d']) player.x += player.speed;

    // Prevent going out of bounds
    if (player.x < 0) player.x = 0;
    if (player.x > canvas.width - player.width) player.x = canvas.width - player.width;
    if (player.y < 0) player.y = 0;
    if (player.y > canvas.height - player.height) player.y = canvas.height - player.height;

    // Mana regeneration
    if (player.mana < player.maxMana) {
        player.mana += 0.5; // Adjust regeneration rate
    }
    // Mana cap
    if (player.mana > player.maxMana) player.mana = player.maxMana;

    // Collision detection
    const obstacles = levels[currentLevel];
    obstacles.forEach(obstacle => {
        if (
            player.x < obstacle.x + obstacle.width &&
            player.x + player.width > obstacle.x &&
            player.y < obstacle.y + obstacle.height &&
            player.y + player.height > obstacle.y
        ) {
            // Collision occurred
            if (player.state !== obstacle.type) {
                // Player is in the wrong state, handle collision
                // Maybe reset position or lose life
                player.x = canvas.width / 2;
                player.y = canvas.height / 2;
                player.mana -= 10;
            }
        }
    });

    // Win condition
    if (player.x > canvas.width - player.width && player.y > canvas.height - player.height) {
        currentLevel++;
        if (currentLevel >= levels.length) {
            alert('You win!');
            currentLevel = 0;
        } else {
            // Reset player position for next level
            player.x = canvas.width / 2;
            player.y = canvas.height / 2;
            player.mana = player.maxMana;
        }
    }
}

function render() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw player
    if (player.state === 'water') {
        ctx.fillStyle = '#00f';
    } else {
        ctx.fillStyle = '#f00';
    }
    ctx.fillRect(player.x, player.y, player.width, player.height);

    // Draw obstacles
    levels[currentLevel].forEach(obstacle => {
        if (obstacle.type === 'water') {
            ctx.fillStyle = '#00f';
        } else {
            ctx.fillStyle = '#f00';
        }
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    });

    // Update UI
    manaBar.style.width = `${(player.mana / player.maxMana) * 200}px`;
    levelDisplay.textContent = `Level: ${currentLevel + 1}`;
}

// Start the game loop
gameLoop();