OriginDex/DBVisualiser/renderer.js

const { ipcRenderer } = require('electron');

// Add these variables at the top of the file
let currentEditingStageIndex, currentEditingPokemonIndex;
let allPokemon = []; // This will store all Pokémon for the select dropdown
let currentEvolutionChain = null; // Add this line
let allPokemonForms = [];

document.addEventListener('DOMContentLoaded', () => {
    loadFormsData();
    setupTabButtons();
    setupSearchButtons();
    setupSaveChangesButton();

    const modal = document.getElementById('edit-pokemon-modal');
    const closeBtn = modal.querySelector('.close');
    const form = document.getElementById('edit-pokemon-form');

    closeBtn.onclick = () => {
        modal.style.display = 'none';
    };

    window.onclick = (event) => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };

    form.onsubmit = (e) => {
        e.preventDefault();
        const newPfic = document.getElementById('pokemon-select').value;
        const newMethod = document.getElementById('evolution-method').value;
        updatePokemonInChain(currentEditingStageIndex, currentEditingPokemonIndex, newPfic, newMethod);
        modal.style.display = 'none';
    };

    loadAllPokemon();
    setupPokemonFilter();
});

function setupTabButtons() {
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const tabName = button.getAttribute('data-tab');
            activateTab(tabName);
        });
    });
}

function activateTab(tabName) {
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

    document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
    document.getElementById(`${tabName}-tab`).classList.add('active');
}

function setupSearchButtons() {
    //document.getElementById('forms-search-button').addEventListener('click', searchForms);
    //document.getElementById('evolution-search-button').addEventListener('click', searchEvolution);
}

function setupSaveChangesButton() {
    //document.getElementById('save-changes').addEventListener('click', saveChanges);
}

function loadFormsData() {
    ipcRenderer.send('load-all-pokemon');
}

ipcRenderer.on('all-pokemon-response', (event, response) => {
    if (response.error) {
        console.error('Error loading all Pokémon:', response.error);
    } else {
        allPokemonForms = response.data;
        populateFormsList();
        setupFormsFilter();
    }
});

function populateFormsList() {
    const listElement = document.getElementById('forms-list-items');
    listElement.innerHTML = '';
    allPokemonForms.forEach(pokemon => {
        const li = document.createElement('li');
        li.textContent = `${pokemon.name} ${pokemon.form_name ? `(${pokemon.form_name})` : ''}`;
        li.addEventListener('click', () => showPokemonDetails(pokemon.PFIC));
        listElement.appendChild(li);
    });
}

function setupFormsFilter() {
    const filterInput = document.getElementById('forms-filter');
    filterInput.addEventListener('input', () => {
        const filterValue = filterInput.value.toLowerCase();
        const listItems = document.querySelectorAll('#forms-list-items li');
        listItems.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(filterValue) ? '' : 'none';
        });
    });
}

function showPokemonDetails(pfic) {
    ipcRenderer.send('get-pokemon-details', pfic);
}

ipcRenderer.on('pokemon-details-response', (event, response) => {
    if (response.error) {
        console.error('Error fetching Pokémon details:', response.error);
    } else {
        displayPokemonDetails(response.data);
    }
});

function displayPokemonDetails(pokemon) {
    const detailsContent = document.getElementById('details-content');
    const pokemonImage = document.getElementById('pokemon-image');
    const pokemonName = document.getElementById('pokemon-name');
    const pokemonPfic = document.getElementById('pokemon-pfic');
    const pokemonNationalDex = document.getElementById('pokemon-national-dex');
    const pokemonGeneration = document.getElementById('pokemon-generation');
    const storableCheckbox = document.getElementById('storable-checkbox');
    const evolutionChainContent = document.getElementById('details-evolution-chain-content');

    pokemonImage.src = `../images-new/${pokemon.PFIC}.png`;
    pokemonImage.onerror = () => { pokemonImage.src = 'placeholder.png'; };
    
    pokemonName.textContent = `${pokemon.name} ${pokemon.form_name ? `(${pokemon.form_name})` : ''}`;
    pokemonPfic.textContent = `PFIC: ${pokemon.PFIC}`;
    pokemonNationalDex.textContent = `National Dex: ${pokemon.national_dex.toString().padStart(4, '0')}`;
    pokemonGeneration.textContent = `Generation: ${pokemon.generation}`;
    
    storableCheckbox.checked = pokemon.storable_in_home;
    storableCheckbox.addEventListener('change', () => updateStorableInHome(pokemon.PFIC, storableCheckbox.checked));

    // Load and display evolution chain
    loadEvolutionChain(pokemon.PFIC);
}

function updateStorableInHome(pfic, storable) {
    ipcRenderer.send('update-storable-in-home', { pfic, storable });
}

function loadEvolutionChain(pfic) {
    ipcRenderer.send('get-evolution-chain', pfic);
}

ipcRenderer.on('evolution-chain-response', (event, response) => {
    if (response.error) {
        console.error('Error fetching evolution chain:', response.error);
    } else {
        displayEvolutionChain(response.data);
    }
});

function displayEvolutionChain(chain) {
    const table = document.getElementById('evolution-table');
    table.innerHTML = '';

    const stages = splitIntoStages(chain);
    const maxForms = Math.max(...stages.map(stage => stage.length));
    const rowCount = maxForms % 2 === 0 ? maxForms + 1 : maxForms;
    const middleRow = Math.floor(rowCount / 2)

    for (let i = 0; i < rowCount; i++) {
        const row = table.insertRow();
        for (let j = 0; j < stages.length; j++) {
            const cell = row.insertCell();
        }
    }

    stages.forEach((stage, stageIndex) => {
        if (stage.length == 1)
        {
            const pokemon = stage[0];
            table.rows[middleRow].cells[stageIndex].appendChild(createPokemonElement(pokemon));
        } else {
            let start = middleRow - Math.floor(stage.length / 2)
            
            stage.forEach((pokemon, index) => {
                let rowIndex = start + index;

                // If the number of elements is even, skip the middle row
                if (stage.length % 2 === 0 && rowIndex >= middleRow) {
                    rowIndex++;
                }

                table.rows[rowIndex].cells[stageIndex].appendChild(createPokemonElement(pokemon));
            });
        }
    });
}

function createPokemonElement(pokemon) {
    const element = document.createElement('div');
    element.className = 'pokemon-card';

    const img = document.createElement('img');
    img.src = `../images-new/${pokemon.pfic}.png`;
    img.alt = pokemon.name;
    img.onerror = () => { img.src = 'placeholder.png'; };

    const name = document.createElement('div');
    name.className = 'pokemon-name';
    name.textContent = pokemon.name;

    const form = document.createElement('div');
    form.className = 'pokemon-form';
    form.textContent = pokemon.form_name || '';

    element.appendChild(img);
    element.appendChild(name);
    element.appendChild(form);

    return element;
}

function createEvolutionArrow() {
    const arrow = document.createElement('div');
    arrow.className = 'evolution-arrow';
    arrow.textContent = '→';
    return arrow;
}

function createBranchElement(evolutions) {
    const branchElement = document.createElement('div');
    branchElement.className = 'evolution-branch';
    const arrowElement = document.createElement('span');
    arrowElement.className = 'evolution-arrow';
    arrowElement.textContent = '→';
    branchElement.appendChild(arrowElement);
    const methodElement = document.createElement('span');
    methodElement.className = 'evolution-method';
    methodElement.textContent = evolutions[0].method || '';
    branchElement.appendChild(methodElement);
    return branchElement;
}

function searchForms() {
    const searchTerm = document.getElementById('forms-search').value.toLowerCase();
    const rows = document.querySelectorAll('#forms-table tbody tr');

    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
}

function searchEvolution() {
    const searchTerm = document.getElementById('evolution-search').value;
    ipcRenderer.send('search-evolution', searchTerm);
}

ipcRenderer.on('evolution-search-response', (event, response) => {
    if (response.error) {
        console.error('Error searching evolution:', response.error);
    } else if (response.data.length > 0) {
        const pfic = response.data[0].PFIC;
        ipcRenderer.send('get-evolution-chain', pfic);
    } else {
        document.getElementById('evolution-chain').innerHTML = 'No Pokémon found.';
    }
});

ipcRenderer.on('evolution-chain-response', (event, response) => {
    if (response.error) {
        console.error('Error fetching evolution chain:', response.error);
    } else {
        currentEvolutionChain = response.data; // Add this line
        displayEvolutionChain(currentEvolutionChain);
    }
});

function createPokemonElement(pokemon, stageIndex, pokemonIndex) {
    const element = document.createElement('div');
    element.className = 'pokemon-card';

    const img = document.createElement('img');
    img.src = `../images-new/${pokemon.pfic}.png`;
    img.alt = pokemon.name;
    img.onerror = () => { img.src = 'placeholder.png'; };

    const name = document.createElement('div');
    name.className = 'pokemon-name';
    name.textContent = pokemon.name;

    const form = document.createElement('div');
    form.className = 'pokemon-form';
    form.textContent = pokemon.form_name || '';

    const editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.className = 'edit-pokemon';
    editButton.addEventListener('click', () => editPokemon(stageIndex, pokemonIndex));

    const editButtons = document.createElement('div');
    editButtons.className = 'edit-buttons';
    editButtons.appendChild(editButton);

    element.appendChild(img);
    element.appendChild(name);
    element.appendChild(form);
    element.appendChild(editButtons);

    return element;
}

function setupEvolutionControls() {
    document.getElementById('add-stage').addEventListener('click', addStage);
    document.getElementById('save-evolution-changes').addEventListener('click', saveEvolutionChanges);
}

function editPokemon(stageIndex, pokemonIndex) {
    console.log('Editing Pokemon:', stageIndex, pokemonIndex);
    if (!currentEvolutionChain) {
        console.error('No evolution chain loaded');
        return;
    }
    currentEditingStageIndex = stageIndex;
    currentEditingPokemonIndex = pokemonIndex;
    
    const modal = document.getElementById('edit-pokemon-modal');
    console.log('Modal element:', modal);
    const pokemonSelect = document.getElementById('pokemon-select');
    const evolutionMethod = document.getElementById('evolution-method');
    
    // Set current values
    const currentPokemon = getCurrentPokemon(stageIndex, pokemonIndex);
    console.log('Current Pokemon:', currentPokemon);
    if (currentPokemon) {
        pokemonSelect.value = currentPokemon.pfic;
        evolutionMethod.value = currentPokemon.method || '';
        
        modal.style.display = 'block';
        console.log('Modal display set to block');
    } else {
        console.error('Could not find the current Pokémon');
    }
}

function removePokemon(stageIndex, pokemonIndex) {
    // Implement remove functionality
    console.log(`Removing Pokémon at stage ${stageIndex}, index ${pokemonIndex}`);
    // Remove the Pokémon from the DOM and update the data structure
}

function addStage() {
    // Implement add stage functionality
    console.log('Adding new stage');
    // You can open a modal or inline form to add a new stage
}

function saveEvolutionChanges() {
    console.log('Saving evolution changes');
    ipcRenderer.send('save-evolution-changes', currentEvolutionChain);
}

function splitIntoStages(chain) {
    const stages = [];
    let currentStage = [chain];

    while (currentStage.length > 0) {
        stages.push(currentStage);
        const nextStage = [];
        currentStage.forEach(pokemon => {
            nextStage.push(...pokemon.evolutions);
        });
        currentStage = nextStage;
    }

    return stages;
}

function saveChanges() {
    // Implement the logic to save changes
    // This will involve collecting the data from the forms table
    // and sending it back to the main process to update the database
}

// Add this function to load all Pokémon
function loadAllPokemon() {
    ipcRenderer.send('load-all-pokemon');
}

// Add this event listener
ipcRenderer.on('all-pokemon-response', (event, response) => {
    if (response.error) {
        console.error('Error loading all Pokémon:', response.error);
    } else {
        allPokemon = response.data;
        populatePokemonSelect();
        populatePokemonList();
    }
});

// Add this function to populate the Pokémon select dropdown
function populatePokemonSelect() {
    const select = document.getElementById('pokemon-select');
    select.innerHTML = '';
    allPokemon.forEach(pokemon => {
        const option = document.createElement('option');
        option.value = pokemon.PFIC;
        option.textContent = `${pokemon.PFIC} - ${pokemon.name} ${pokemon.form_name ? `(${pokemon.form_name})` : ''}`;
        select.appendChild(option);
    });
}

// Add this function to get the current Pokémon being edited
function getCurrentPokemon(stageIndex, pokemonIndex) {
    if (!currentEvolutionChain) {
        console.error('No evolution chain loaded');
        return null;
    }
    const stages = splitIntoStages(currentEvolutionChain);
    if (stageIndex < 0 || stageIndex >= stages.length || pokemonIndex < 0 || pokemonIndex >= stages[stageIndex].length) {
        console.error('Invalid stage or pokemon index');
        return null;
    }
    return stages[stageIndex][pokemonIndex];
}

// Add this function to update the Pokémon in the chain
function updatePokemonInChain(stageIndex, pokemonIndex, newPfic, newMethod) {
    const stages = splitIntoStages(currentEvolutionChain);
    const pokemon = stages[stageIndex][pokemonIndex];
    
    // Update the Pokémon data
    pokemon.pfic = newPfic;
    pokemon.name = allPokemon.find(p => p.PFIC === newPfic).name;
    pokemon.form_name = allPokemon.find(p => p.PFIC === newPfic).form_name;
    
    // Update the evolution method if it's not the first stage
    if (stageIndex > 0) {
        const previousStagePokemon = stages[stageIndex - 1].find(p => p.evolutions.includes(pokemon));
        const evolutionIndex = previousStagePokemon.evolutions.indexOf(pokemon);
        previousStagePokemon.evolutions[evolutionIndex].method = newMethod;
    }

    // Redisplay the evolution chain
    displayEvolutionChain(currentEvolutionChain);
}

// Add this event listener for the save response
ipcRenderer.on('save-evolution-changes-response', (event, response) => {
    if (response.error) {
        console.error('Error saving evolution changes:', response.error);
        alert('Failed to save changes. Please try again.');
    } else {
        alert('Changes saved successfully!');
    }
});

// Add this function to populate the Pokémon list
function populatePokemonList() {
    const listElement = document.getElementById('pokemon-list-items');
    listElement.innerHTML = '';
    allPokemon.forEach(pokemon => {
        const li = document.createElement('li');
        li.textContent = `${pokemon.name} ${pokemon.form_name ? `(${pokemon.form_name})` : ''}`;
        li.addEventListener('click', () => loadEvolutionChain(pokemon.PFIC));
        listElement.appendChild(li);
    });
}

// Add this function to set up the Pokémon filter
function setupPokemonFilter() {
    const filterInput = document.getElementById('pokemon-filter');
    filterInput.addEventListener('input', () => {
        const filterValue = filterInput.value.toLowerCase();
        const listItems = document.querySelectorAll('#pokemon-list-items li');
        listItems.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(filterValue) ? '' : 'none';
        });
    });
}

// Modify the loadEvolutionChain function
function loadEvolutionChain(pfic) {
    ipcRenderer.send('get-evolution-chain', pfic);
}