document.getElementById('searchForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const creatureName = document.getElementById('creature').value;
    const queryParams = new URLSearchParams({
        creature: creatureName,
    });

    // Insert the loading.gif before making the fetch request
    let resultSection = document.getElementById('resultSection');
    resultSection.innerHTML = '';
    let imgElement = document.createElement('img');
    imgElement.src = 'img/checking.gif';
    imgElement.style.width = '500px';
    imgElement.style.height = '500px';
    imgElement.style.display = 'block';
    imgElement.style.marginLeft = 'auto';
    imgElement.style.marginRight = 'auto';
    resultSection.appendChild(imgElement);

    setTimeout(() => {
        fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
            .then((response) => {
                if (!response.ok) {
                    throw response;
                }
                return response.json(); // we only get here if there is no error
            })
            .then((json) => {
                if (json === null) { // if json is null update the image and stop execution
                    imgElement.src = 'img/404.jpg';
                    throw new Error('No data found'); // this will stop the execution and go to the catch block
                }
                resultSection.innerHTML = ''; // Clear previous content
                if (creatureName === 'android') {
                    androidResultTable(json);
                } else {
                    setCreatureTable(json);
                }
            })
            .catch((err) => {
                console.log(err);
                if(!resultSection.hasChildNodes()) { // Only update the image if it wasn't already updated
                    imgElement.src = 'img/404.jpg';
                }
            });

        function setResultImage(name) {
            let imgElement = document.createElement('img');
            imgElement.src = 'img/' + name + ".jpg";
            console.log(imgElement.src);
            imgElement.onerror = function () {
                this.src = 'img/404.jpg';
            };
            resultSection.appendChild(imgElement);
        }

        function formatDiceMnemonic(data) {
            return Array.isArray(data) ?
                data[0] + "d" + data[1] + (data[2] === 0 ? "" : (data[2] > 0 ? "+" : "") + data[2]) :
                data.toString();
        }

        function formatSpeedMnemonic(data){
            return data[0] + '/' + data[1] + '/' + data[2];
        }

        function androidResultTable(data) {
            let container = document.createElement('div');
            container.className = 'container android';

            let creatureTitle = document.createElement('h2');
            creatureTitle.textContent = creatureName.toUpperCase();
            container.appendChild(creatureTitle)

            let image = document.createElement('img');
            image.src = 'img/android.jpg';
            image.onerror = () => { image.src = 'img/404.jpg' };
            image.style.width = '275px';
            image.style.height = '275px';
            container.appendChild(image);

            let description = createDescriptionSection(data);
            container.appendChild(description);

            Object.entries(data).forEach(([key, value]) => {

                if (key === 'thinker' || key === 'worker' || key === 'warrior') {
                    let typeTitle = document.createElement('h2');
                    typeTitle.textContent = key.toUpperCase();
                    container.appendChild(typeTitle);

                    // Create a div for each type (thinker, worker, or warrior)
                    let typeContainer = document.createElement('div');
                    typeContainer.className = 'typeContainer'; // we'll use this in css

                    let profile = createProfileSection(value);
                    let abilities = createAbilitiesSection(value);

                    // Append profile and abilities to the typeContainer, instead of the main container
                    typeContainer.appendChild(profile);
                    typeContainer.appendChild(abilities);

                    // Finally, append the typeContainer to the main container.
                    container.appendChild(typeContainer);
                }
            });

            resultSection.appendChild(container);
        }

        function createProfileSection(data) {
            let profile = document.createElement('div');
            profile.className = 'creature_profile';
            let profileHTML = `
          <h3>Profile</h3>       
          <table>
              <tr><td><b>NUMBER</b></td> <td>${formatDiceMnemonic(data.number)}</td></tr>
              <tr><td><b>MORALE</b></td> <td>${formatDiceMnemonic(data.morale)}</td></tr>
              <tr><td><b>HIT DICE</b></td> <td>${formatDiceMnemonic(data['hit dice'])}</td></tr>
              <tr><td><b>ARMOUR</b></td> <td>${data.armour}</td></tr>
              <tr><td><b>ENVIRON</b></td> <td>${data.environ.join(', ')}</td></tr>
            `;
            if(data['land speed']){
                profileHTML += `<tr><td><b>LAND SPEED</b></td> <td>${formatSpeedMnemonic(data['land speed'])}</td></tr>`;
            }
            if(data['water speed']){
                profileHTML += `<tr><td><b>WATER SPEED</b></td> <td>${formatSpeedMnemonic(data['water speed'])}</td></tr>`;
            }
            if(data['air speed']){
                profileHTML += `<tr><td><b>AIR SPEED</b></td> <td>${formatSpeedMnemonic(data['air speed'])}</td></tr>`;
            }
            profileHTML += '</table>';

            profile.innerHTML = profileHTML;
            return profile;
        }

        function createAbilitiesSection(data) {
            // Abilities section
            let abilities = document.createElement('div');
            abilities.className = 'creature_abilities';
            abilities.innerHTML = `
              <h3>Abilities</h3>
              <table>
                  <tr><td><b>MS</b></td> <td>${formatDiceMnemonic(data.ms)}</td></tr>
                  <tr><td><b>IN</b></td> <td>${formatDiceMnemonic(data.in)}</td></tr>
                  <tr><td><b>DX</b></td> <td>${formatDiceMnemonic(data.dx)}</td></tr>
                  <tr><td><b>CH</b></td> <td>${formatDiceMnemonic(data.ch)}</td></tr>
                  <tr><td><b>CN</b></td> <td>${formatDiceMnemonic(data.cn)}</td></tr>
                  <tr><td><b>PS</b></td> <td>${formatDiceMnemonic(data.ps)}</td></tr>
              </table>
            `;
            return abilities;
        }

        function createAttacksSection(data) {
            // Attacks section
            let attacks = document.createElement('div');
            attacks.className = 'creature_attacks';
            let attacksHTML = '<h3>Attacks</h3>';
            let attacksTable = '<table>';
            for (let attack in data.attacks) {
                let mnemonic_display;
                mnemonic_display = formatDiceMnemonic(data.attacks[attack]);
                if (mnemonic_display === "0d0") {
                    mnemonic_display = 'See Description';
                }
                attacksTable += `<tr><td><b>${attack}</b></td><td>${mnemonic_display}</td></tr>`
            }
            attacksTable += '</table>';
            attacks.innerHTML = attacksHTML + attacksTable;
            return attacks
        }

        function createMutationsSection(mutarray) {
            // Mutations section
            let mutations = document.createElement('div');
            mutations.className = 'creature_mutations';
            let mutationsHTML = '<h3>Mutations</h3>';
            let mutationsList = mutarray.reduce((result, mutation) => result + `<li>${mutation}</li>`, '');
            mutationsHTML += `<ul>${mutationsList}</ul>`;
            mutations.innerHTML = mutationsHTML
            return mutations
        }

        function createDescriptionSection(data) {
            // Description section
            let description = document.createElement('div');
            description.className = 'creature_description';
            let descriptionHTML = `
              <h3>Description</h3>
              <p>${data.description}</p>
            `;
            description.innerHTML = descriptionHTML;
            return description
        }

        function setCreatureTable(data) {
            let container = document.createElement('div');
            container.className = 'container';

            // Creature ID section
            let creatureId = document.createElement('div');
            creatureId.className = 'creature_id';
            creatureId.innerHTML = `
                <h2>${creatureName.toUpperCase()}</h2>
                <img src='img/${creatureName}.jpg' onerror='this.src="img/404.jpg";' style='width: 275px; height: 275px;'>
            `;

            let profile = createProfileSection(data);
            let abilities = createAbilitiesSection(data);
            let attacks = createAttacksSection(data);
            let mutations = createMutationsSection(data.mutations); // Notice the data difference
            let description = createDescriptionSection(data);

            container.appendChild(creatureId);
            container.appendChild(profile);
            container.appendChild(abilities);
            container.appendChild(attacks);
            container.appendChild(mutations);
            container.appendChild(description);

            resultSection.appendChild(container);
        }
    }, 1000);
});