document.addEventListener('pageshow', async () => {
    var moviesTitle = document.getElementById("moviesTitle");
    var seriesTitle = document.getElementById("seriesTitle");
    var moviesTable = document.getElementById("moviesTable");
    var seriesTable = document.getElementById("seriesTable");

    const getMediaCleanerSeriesInfo = async () => {
        const response = await fetch("/mediacleaner/state/getSeriesInfo");

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

        return response.json();
    };

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

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

        return 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 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 = () => {
        var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
        seriesTableBody.replaceChildren();
        seriesTableBody.style.border = "1px solid";
        seriesTableBody.style.borderCollapse = "collapse";

        var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
        moviesTableBody.replaceChildren();
        moviesTableBody.style.border = "1px solid";

        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;
            // Will need to be enabled once radarr and sonarr integration is enabled.
            // Maybe change this to an element to remove hard coding.
            cell2.innerHTML = "<button type=\"button\" disabled>Delete</button>";
        }

        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;
            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
            // Will need to be enabled once radarr and sonarr integration is enabled.
            // Maybe change this to an element to remove hard coding.
            cell3.innerHTML = "<button type=\"button\" disabled>Delete</button>";
            cell3.className = "actions-cell";
        }
    };

    // const styleTables = () => {
    //     const tables = document.querySelectorAll("table");
    //     const cells = document.querySelectorAll("th, td");

    //     tables.forEach(table => {
    //         table.style.border = "1px solid";
    //         table.style.borderCollapse = "collapse";
    //     })

    //     cells.forEach(cell => {
    //         cell.style.border = "1px solid";
    //         cell.style.padding = "0.5rem 0.75rem";
    //         cell.style.textAlign = "left"
    //     });
    // };

    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 showElements = () => {
        const loadingElement = document.querySelector("#loading");
        const elements = document.querySelectorAll("div #page");
        elements.forEach(element => {
            element.style.visibility = "visible";
        })
        loadingElement.style.visibility = "hidden";
    }

    const fetchCss = async () => {
        const response = await fetch('/web/configurationpage?name=home.css')

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

        const css = await response.text();
        const styles = document.createElement('style');
        styles.textContent = css;
        document.head.appendChild(styles);
    }

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

    await updateMediaCleanerState();
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerSeriesInfo();
    populateTables();
    addClickHandlersToLinks();
    showElements();
    fetchCss();
});