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;
            cell2.innerHTML = "<button>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(", ");
            cell3.innerHTML = "<button>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 styleLinks = () => {
        const linkbtns = document.querySelectorAll("button.links")
        linkbtns.forEach(btn => {
            btn.style.background = "#0f0f0f";
            btn.style.border = '1px solid';
            btn.style.padding = '1rem 2rem';
            btn.style.fontSize = "1.2rem"
            btn.style.color = "white";
            btn.style.textDecoration = 'none';
            btn.style.cursor = 'pointer';
            btn.style.lineHeight = 'inherit';
            btn.style.verticalAlign = 'baseline';
            btn.style.transition = 'background 0.3s ease';

            const hoverBg = '#2a2a2a';
            const normalBg = btn.style.background;

            btn.addEventListener("click", () => {
                const target = btn.dataset.target;
                if (!target) return;
                window.location.hash = target;
            })

            btn.addEventListener('mouseenter', () => {
                btn.style.background = hoverBg;
            });

            btn.addEventListener('mouseleave', () => {
                btn.style.background = normalBg;
            });
        })
    }

    const showElements = () => {
        const loadingElement = document.querySelector("#loading");
        const elements = document.querySelectorAll("div #page");
        elements.forEach(element => {
            element.style.visibility = "visible";
        })
        loadingElement.style.visibility = "hidden";
    }

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

    await updateMediaCleanerState();
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerSeriesInfo();
    populateTables();
    styleTables();
    styleLinks();
    showElements();
});