document.addEventListener('pageshow', async () => {
    await refreshFrontEnd();
});

const refreshFrontEnd = async () => {
    startLoading();
    await updateMediaCleanerState();

    var moviesTitle = document.getElementById("moviesTitle");
    var seriesTitle = document.getElementById("seriesTitle");
    var animeSeriesTitle = document.getElementById("animeSeriesTitle");

    moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
    seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
    animeSeriesTitle.innerHTML = await getMediaCleanerAnimeSeriesTitle();

    await populateTables();
    addClickHandlersToLinks();
    addClickHandlersToDeleteButtons();
    finishLoading();
}

const getMediaCleanerTvSeriesInfo = async () => {
    const response = await fetch("/mediacleaner/state/getTvSeriesInfo");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }

    return await response.json();
};

const getMediaCleanerAnimeSeriesInfo = async () => {
    const response = await fetch("/mediacleaner/state/getAnimeSeriesInfo");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }

    return await response.json();
};

const getMediaCleanerMovieInfo = async () => {
    const response = await fetch("/mediacleaner/state/getMovieInfo");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }

    return await response.json();
};

const updateMediaCleanerState = async () => {
    const response = await fetch("/mediacleaner/state/updateState");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }

    return response.json();
};

const getMediaCleanerAnimeSeriesTitle = async () => {
    const response = await fetch("/mediacleaner/state/getAnimeSeriesTitle");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`);
    }

    return response.json();
};

const getMediaCleanerSeriesTitle = async () => {
    const response = await fetch("/mediacleaner/state/getSeriesTitle");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`);
    }

    return response.json();
};

const getMediaCleanerMoviesTitle = async () => {
    const response = await fetch("/mediacleaner/state/getMoviesTitle");

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`);
    }

    return response.json();
};


const populateTables = async () => {
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerTvSeriesInfo();
    var animeSeriesInfo = await getMediaCleanerAnimeSeriesInfo();

    var seriesTable = document.getElementById("seriesTable");
    var moviesTable = document.getElementById("moviesTable");
    var animeSeriesTable = document.getElementById("animeSeriesTable");

    var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
    seriesTableBody.replaceChildren();
    var seriesDeleteButton = document.getElementById('seriesDeleteButton');

    var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
    moviesTableBody.replaceChildren();
    var moviesDeleteButton = document.getElementById('moviesDeleteButton');

    var animeSeriesTableBody = animeSeriesTable.getElementsByTagName('tbody')[0];
    animeSeriesTableBody.replaceChildren();
    var animeSeriesDeleteButton = document.getElementById('animeSeriesDeleteButton');

    if (moviesInfo.length > 0){
        for(let i = 0; i < moviesInfo.length; i++){
            var row = moviesTableBody.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = moviesInfo[i].Name;
            cell1.className = "table-text";
            cell2.appendChild(createCheckbox(moviesInfo[i], moviesTable, moviesDeleteButton));
            cell2.className = "table-checkbox"
        }
    }
    else{
        var columnCount = moviesTable.tHead.rows[0].cells.length;
        var row = moviesTableBody.insertRow(-1);
        var cell1 = row.insertCell(0);
        cell1.colSpan = columnCount;
        cell1.innerHTML = "No stale movies found.";
        cell1.className = "table-text";
    }

    if(seriesInfo.length > 0){
        for(let i = 0; i < seriesInfo.length; i++){
            var row = seriesTableBody.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = seriesInfo[i].Name;
            cell1.className = "table-text";
            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season).join(", ");
            cell2.className = "table-text";
            cell3.appendChild(createCheckbox(seriesInfo[i], seriesTable, seriesDeleteButton));
            cell3.className = "table-checkbox"
        }
    }
    else{
        var columnCount = seriesTable.tHead.rows[0].cells.length;
        var row = seriesTableBody.insertRow(-1);
        var cell1 = row.insertCell(0);
        cell1.colSpan = columnCount;
        cell1.innerHTML = "No stale tv series found.";
        cell1.className = "table-text";
    }

    if(animeSeriesInfo.length > 0){
        for(let i = 0; i < animeSeriesInfo.length; i++){
            var row = animeSeriesTableBody.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = animeSeriesInfo[i].Name;
            cell1.className = "table-text";
            cell2.innerHTML = animeSeriesInfo[i].Seasons.map(season => season).join(", ");
            cell2.className = "table-text";
            cell3.appendChild(createCheckbox(animeSeriesInfo[i], animeSeriesTable, animeSeriesDeleteButton));
            cell3.className = "table-checkbox"
        }
    }
    else{
        var columnCount = animeSeriesTable.tHead.rows[0].cells.length;
        var row = animeSeriesTableBody.insertRow(-1);
        var cell1 = row.insertCell(0);
        cell1.colSpan = columnCount;
        cell1.innerHTML = "No stale anime series found.";
        cell1.className = "table-text";
    }
};

const createCheckbox = (mediaInfo = {}, table, deleteButton) => {
    const container = document.createElement('div');
    container.className = 'checkboxContainer';
    container.style.marginBottom = 0;

    const label = document.createElement('label');
    label.className = 'emby-checkbox-label';
    label.style.textAlign = 'center';
    label.style.paddingLeft = '1.8em';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.setAttribute('is', 'emby-checkbox');
    checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || '';

    const span = document.createElement('span');
    span.textContent = '';

    label.appendChild(checkbox);
    label.appendChild(span);
    container.appendChild(label);

    checkbox.addEventListener('change', (e) => {
        if(isDeleteButtonVisible(table)){
            deleteButton.style.visibility = 'visible';
        }
        else {
            deleteButton.style.visibility = 'hidden';
        }
    });

    return container;
};

const isDeleteButtonVisible = (table) => {
    const checkboxes = table.getElementsByClassName('emby-checkbox');
    const hasChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
    return hasChecked;
}

const addClickHandlersToLinks = () => {
    const linkBtns = document.querySelectorAll("button.links");
    linkBtns.forEach(btn => {
        btn.addEventListener("click", () => {
            const target = btn.dataset.target;
            if (!target) return;
            window.location.hash = target;
        })
    })
}

const addClickHandlersToDeleteButtons = () => {
    const deleteMoviesButtonElement = document.getElementById("moviesDeleteButton");
    const deleteSeriesButtonElement = document.getElementById("seriesDeleteButton");
    const deleteAnimeSeriesButtonElement = document.getElementById("animeSeriesDeleteButton");
    deleteMoviesButtonElement.addEventListener("click", deleteFromRadarr);
    deleteSeriesButtonElement.addEventListener("click", deleteFromSonarr);
    deleteAnimeSeriesButtonElement.addEventListener("click", deleteFromAnimeSonarr);
}

const getCheckedMedia = (table) => {
    const checkboxes = table.getElementsByClassName('emby-checkbox');
    const selectedMediaCheckboxes = Array.from(checkboxes).filter(checkbox => checkbox.checked);
    const selectedMedia = selectedMediaCheckboxes.map(selectedMediaCheckbox => JSON.parse(selectedMediaCheckbox.dataset.mediaInfo));
    console.log("Selected media: ", selectedMedia);
    return selectedMedia;
}

const deleteMovieFromRadarrApi = async (movie) => {
    const response = await fetch("/radarr/deleteMovieFromRadarr", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(movie)
    });

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }
}

const deleteSeriesFromSonarrApi = async (series) => {
    const response = await fetch("/sonarr/deleteSeriesFromSonarr", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(series)
    });

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }
}

const deleteSeriesFromAnimeSonarrApi = async (series) => {
    const response = await fetch("/sonarr/deleteSeriesFromAnimeSonarr", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(series)
    });

    if(!response.ok){
        throw new Error(`Response status: ${response.status}`)
    }
}

const deleteFromRadarr = async () => {
    const selectedMovies = getCheckedMedia(moviesTable);
    selectedMovies.forEach(async movie => await deleteMovieFromRadarrApi(movie));
    refreshFrontEnd();
}

const deleteFromSonarr = () => {
    const selectedSeries = getCheckedMedia(seriesTable);
    selectedSeries.forEach(async series => await deleteSeriesFromSonarrApi(series));
    refreshFrontEnd();
}

const deleteFromAnimeSonarr = () => {
    const selectedSeries = getCheckedMedia(animeSeriesTable);
    selectedSeries.forEach(async series => await deleteSeriesFromAnimeSonarrApi(series));
    refreshFrontEnd();
}

const finishLoading = () => {
    const loadingElement = document.getElementById("loading");
    const homepage = document.getElementById("homepage");
    loadingElement.style.visibility = "hidden";
    homepage.style.visibility = "visible";
}

const startLoading = () => {
    const loadingElement = document.getElementById("loading");
    const homepage = document.getElementById("homepage");
    const moviesDeleteButton = document.getElementById('moviesDeleteButton');
    const seriesDeleteButton = document.getElementById('seriesDeleteButton');

    loadingElement.style.visibility = "visible";
    homepage.style.visibility = "hidden";
    moviesDeleteButton.style.visibility = "hidden";
    seriesDeleteButton.style.visibility = "hidden";
}