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

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

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

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

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 selectedMovies = new Set();
const selectedTvShows = new Set();

const createCheckbox = (mediaInfo = {}, state = []) => {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || '';

  checkbox.addEventListener('change', (e) => {
    const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
    if (checkbox.checked) {
      state.add(mediaInfo);
    } else {
      state.delete(mediaInfo);
    }
    // Update UI or state — use console.log for debugging
    console.log('selected:', Array.from(state));
  });

  return checkbox;
};

const populateTables = async () => {
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerSeriesInfo();

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

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

    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;
            cell2.appendChild(createCheckbox(moviesInfo[i], selectedMovies));
            cell2.className = "actions-cell";
        }
    }
    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.";
    }

    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;
            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
            cell3.appendChild(createCheckbox(seriesInfo[i], selectedTvShows));
            cell3.className = "actions-cell";
        }
    }
    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 series found.";
    }
};

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 finishLoading = () => {
    const loadingElement = document.getElementById("loading");

    const homepage = document.getElementById("homepage");
    loadingElement.style.visibility = "hidden";
    homepage.style.visibility = "visible";

    console.log("Loading element: ", loadingElement);
    console.log("Homepage element: ", homepage);
}