let pokemonList = [];

async function loadPokemon() {
    const promises = [];
    // Fetch data for Pokémon #1 to #251
    for (let i = 1; i <= 251; i++) {
        promises.push(fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => res.json()));
    }
    
    const pokemonData = await Promise.all(promises);
    pokemonList = pokemonData.map((data, index) => ({
        number: String(index + 1).padStart(3, '0'), // e.g., "001"
        name: data.name,
        sprite: data.sprites.versions['generation-ii'].crystal.front_default // Animated Crystal sprite
    }));

    // Populate the list
    const ul = document.getElementById('pokemon-list');
    pokemonList.forEach(pokemon => {
        const li = document.createElement('li');
        li.textContent = `#${pokemon.number} - ${pokemon.name}`;
        li.dataset.number = pokemon.number;
        ul.appendChild(li);
    });
}

document.getElementById('pokemon-list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        const number = event.target.dataset.number;
        const pokemon = pokemonList.find(p => p.number === number);
        if (pokemon) {
            document.getElementById('pokemon-sprite').src = pokemon.sprite;
            document.getElementById('pokemon-name').textContent = `#${pokemon.number} ${pokemon.name}`;
        }
    }
});

async function init() {
    await loadPokemon();
    // Display the first Pokémon (Bulbasaur) by default
    if (pokemonList.length > 0) {
        const firstPokemon = pokemonList[0];
        document.getElementById('pokemon-sprite').src = firstPokemon.sprite;
        document.getElementById('pokemon-name').textContent = `#${firstPokemon.number} ${firstPokemon.name}`;
    }
}

init();