function escapeHtml(unsafe)
{
    return unsafe
         .replace(/<\/?script\/?>/g, "")
         .replace(/<\/?img\/?>/g, "")
         .replace(/<\/?iframe\/?>/g, "")
         .replace(/<\/?xml\/?>/g, "")
         .replace(/<\/?audio\/?>/g, "")
         .replace(/<\/?video\/?>/g, "")
         .replace(/<\/?object\/?>/g, "");
 }

const n=x=>null;

const el_id_user = document.querySelector("#user");
const el_id_instance = document.querySelector("#instance");
const el_id_whoami = document.querySelector("#whoami");
const el_id_submitwhoamiFollowers = document.querySelector("#submitwhoami_followers");
const el_id_submitwhoamiFollowing = document.querySelector("#submitwhoami_following");
const el_id_errorwhoami = document.querySelector("#errorwhoami");
let gamemodeFollowers;

el_id_user.addEventListener("input", (e) => {
    console.log(e);
        // User types @  Chrome autofill
    if (e.data === "@" || e.data === undefined) {
        el_id_user.value = 
            el_id_user.value.replace(/@/gim, "");
        el_id_instance.focus();
    }
})

async function verify() {
    const username = el_id_user.value.replace(/[^a-z0-9_]/gim, "");
    const instance = el_id_instance.value.replace(/@/gim, "");
    el_id_user.value = username;
    el_id_instance.value = instance;
    if (username.length < 1) return null;
    if (instance.length < 1) return null;

    // webfinger domain delegation
    const domain = await fetch(`https://${instance}/.well-known/webfinger?resource=acct:${username}@${instance}`).catch(n);
    if (domain == null || !domain.ok) return null;
    const domain_json = (await domain.json());
    const domain_url = new URL(domain_json.links.find(x=>x.type=="application/activity+json").href).hostname;
    
    const user_req = await fetch(`https://${domain_url}/api/v1/accounts/lookup?acct=${username}`).catch(n);
    if (user_req == null || !domain.ok) return null;
    const user_json = await user_req.json();
    
    return {
        USER_ID: user_json.id,
        INSTANCE: domain_url
    };
}

el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
    el_id_errorwhoami.innerHTML = "";
    el_id_submitwhoamiFollowers.disabled = true;
    el_id_submitwhoamiFollowing.disabled = true;
    const result = await verify();
    el_id_submitwhoamiFollowers.disabled = false;
    el_id_submitwhoamiFollowing.disabled = false;
    if (result == null) {
        el_id_errorwhoami.innerHTML = "Invalid user!";
        return false;
    }
    game = {
        ...game,
        ...result
    };

    gamemodeFollowers = true;
    getFollowers();
})

el_id_submitwhoamiFollowing.addEventListener("click", async (e) => {
    el_id_errorwhoami.innerHTML = "";
    const result = await verify();
    if (result == null) {
        el_id_errorwhoami.innerHTML = "Invalid user!";
        return false;
    }
    game = {
        ...game,
        ...result
    };

    gamemodeFollowers = false;
    getFollowing();
})

// Followers

const el_id_followers = document.querySelector("#followers");
const el_id_loadingfollowers = document.querySelector("#loadingfollowers");
const el_id_listfollowers = document.querySelector("#listfollowers");
const el_id_listfollowersvalues = document.querySelector("#listfollowersvalues");
const el_id_selectallfollowers = document.querySelector("#selectallfollowers");
const el_id_selectrandomfollowers = document.querySelector("#selectrandomfollowers");
const el_id_deselectrandomfollowers = document.querySelector("#deselectrandomfollowers");
const el_id_selectnofollowers = document.querySelector("#selectnofollowers");
const el_id_morefollowers = document.querySelector("#morefollowers");
const el_id_submitfollowers = document.querySelector("#submitfollowers");
let selectboxes = [];
let userList = [];
let lastId = "";
let selectedUsers = [];

function renderNameHTML(name, user) {
    return escapeHtml(name).replace(/:([a-z0-9_-]+?):/gim, (m, p1) => {
        const emoji = user.emojis.find(x => x.shortcode == p1);
        if (emoji == null) return null;
        return `<img src="${emoji.url}" width="16" height="16" title=":${emoji.shortcode}:" />`;
    });
}

async function getFollowers(dontLoadNew = false) {
    el_id_whoami.hidden = true;
    el_id_followers.hidden = false;
    el_id_submitfollowers.disabled = true;
    el_id_morefollowers.disabled = true;
    let res;
    let out;
    if (!dontLoadNew) {
        el_id_loadingfollowers.innerHTML = `Retrieving followers... Please wait.`;
        res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/${game.USER_ID}/followers${lastId.length > 0 ? `?max_id=${lastId}` : ""}`);
        out = await res.json();
    }
    el_id_submitfollowers.disabled = false;
    el_id_morefollowers.disabled = false;
    if (dontLoadNew) return false;
    if (out.length < 1) {
        el_id_loadingfollowers.innerHTML = `No followers found.`;
        return false;
    }
    el_id_listfollowers.hidden = false;
    el_id_listfollowers.innerHTML += out.reduce((pv, cuser) => {
        return pv + `<tr>
        <td><input type="checkbox" class="follower_checkbox" checked /></td>
        <td><img src="${cuser.avatar}" width="32" height="32" /></td>
        <td class="followers_namelabel">
            <a href="${cuser.url}" target="_blank">
                ${renderNameHTML(cuser.display_name, cuser)}
            </a>
        </td>
        <td class="followers_namelabel">@${cuser.fqn || cuser.acct}</td>
</tr>`
    }, "");
    userList.push(...out.map(user => ({
        fqn: user.fqn || user.acct,
        avatar: user.avatar,
        bot: user.bot,
        created_at: user.created_at,
        display_name: user.display_name,
        emojis: user.emojis,
        fields: user.fields,
        id: user.id,
        note: user.note,
        username: user.url,
        username: user.username
    })));
    lastId = userList.at(-1).id;
    selectboxes = Array.from(el_id_listfollowers.querySelectorAll(".follower_checkbox"));
    selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowers));
    checkSelectedAmtFollowers();
}

el_id_selectallfollowers.addEventListener("click", () => {
    selectboxes.forEach(x => x.checked = true);
    checkSelectedAmtFollowers();
})

el_id_selectrandomfollowers.addEventListener("click", () => {
    const unselectedPick = selectboxes.filter(x => !x.checked);
    const selected = unselectedPick[Math.floor(Math.random() * (unselectedPick.length - 1))];
    if (selected == null) return;
    selected.checked = true;
    checkSelectedAmtFollowers();
})

el_id_deselectrandomfollowers.addEventListener("click", () => {
    const selectedPick = selectboxes.filter(x => x.checked);
    const selected = selectedPick[Math.floor(Math.random() * (selectedPick.length - 1))];
    if (selected == null) return;
    selected.checked = false;
    checkSelectedAmtFollowers();
})

el_id_selectnofollowers.addEventListener("click", () => {
    selectboxes.forEach(x => x.checked = false);
    checkSelectedAmtFollowers();
})

el_id_morefollowers.addEventListener("click", () => getFollowers());

el_id_submitfollowers.addEventListener("click", () => {
    console.log(selectedUsers);
    selectboxes.forEach(({checked}, i) => {
        if (checked) selectedUsers.push(userList.at(i));
    });
    if (selectedUsers.length < 2) {
        selectedUsers = [];
        el_id_loadingfollowers.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
        return;
    }
    sortSelectedUsers();
})

function checkSelectedAmtFollowers() {
    el_id_loadingfollowers.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
}

// Following

const el_id_following = document.querySelector("#following");
const el_id_loadingfollowing = document.querySelector("#loadingfollowing");
const el_id_listfollowing = document.querySelector("#listfollowing");
const el_id_listfollowingvalues = document.querySelector("#listfollowingvalues");
const el_id_selectallfollowing = document.querySelector("#selectallfollowing");
const el_id_selectrandomfollowing = document.querySelector("#selectrandomfollowing");
const el_id_deselectrandomfollowing = document.querySelector("#deselectrandomfollowing");
const el_id_selectnofollowing = document.querySelector("#selectnofollowing");
const el_id_morefollowing = document.querySelector("#morefollowing");
const el_id_submitfollowing = document.querySelector("#submitfollowing");

async function getFollowing(dontLoadNew = false) {
    el_id_whoami.hidden = true;
    el_id_following.hidden = false;
    el_id_submitfollowing.disabled = true;
    el_id_morefollowing.disabled = true;
    let res;
    let out;
    if (!dontLoadNew) {
        el_id_loadingfollowing.innerHTML = `Retrieving following... Please wait.`;
        res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/${game.USER_ID}/following?limit=68${lastId.length > 0 ? `&max_id=${lastId}` : ""}`);
        out = await res.json();
    }
    el_id_submitfollowing.disabled = false;
    el_id_morefollowing.disabled = false;
    if (dontLoadNew) return false;
    if (out.length < 1) {
        el_id_loadingfollowing.innerHTML = `No following found.`;
        return false;
    }
    el_id_listfollowing.hidden = false;
    el_id_listfollowing.innerHTML += out.reduce((pv, cuser) => {
        return pv + `<tr>
        <td><input type="checkbox" class="follower_checkbox" checked /></td>
        <td><img src="${cuser.avatar}" width="32" height="32" /></td>
        <td class="following_namelabel">
            <a href="${cuser.url}" target="_blank">
                ${renderNameHTML(cuser.display_name, cuser)}
            </a>
        </td>
        <td class="following_namelabel">@${cuser.fqn}</td>
</tr>`
    }, "");
    userList.push(...out.map(user => ({
        fqn: user.fqn,
        avatar: user.avatar,
        bot: user.bot,
        created_at: user.created_at,
        display_name: user.display_name,
        emojis: user.emojis,
        fields: user.fields,
        id: user.id,
        note: user.note,
        username: user.url,
        username: user.username
    })));
    lastId = userList.at(-1).id;
    selectboxes = Array.from(el_id_listfollowing.querySelectorAll(".follower_checkbox"));
    selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowing));
    checkSelectedAmtFollowing();
}

el_id_selectallfollowing.addEventListener("click", () => {
    selectboxes.forEach(x => x.checked = true);
    checkSelectedAmtFollowing();
})

el_id_selectrandomfollowing.addEventListener("click", () => {
    const unselectedPick = selectboxes.filter(x => !x.checked);
    const selected = unselectedPick[Math.floor(Math.random() * (unselectedPick.length - 1))];
    if (selected == null) return;
    selected.checked = true;
    checkSelectedAmtFollowing();
})

el_id_deselectrandomfollowing.addEventListener("click", () => {
    const selectedPick = selectboxes.filter(x => x.checked);
    const selected = selectedPick[Math.floor(Math.random() * (selectedPick.length - 1))];
    if (selected == null) return;
    selected.checked = false;
    checkSelectedAmtFollowing();
})

el_id_selectnofollowing.addEventListener("click", () => {
    selectboxes.forEach(x => x.checked = false);
    checkSelectedAmtFollowing();
})

el_id_morefollowing.addEventListener("click", () => getFollowing());

el_id_submitfollowing.addEventListener("click", () => {
    console.log(selectedUsers);
    selectboxes.forEach(({checked}, i) => {
        if (checked) selectedUsers.push(userList.at(i));
    });
    if (selectedUsers.length < 2) {
        selectedUsers = [];
        el_id_loadingfollowing.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
        return;
    }
    sortSelectedUsers();
})

function checkSelectedAmtFollowing() {
    el_id_loadingfollowing.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
}

// Brackets

function shuf(array) {
    var count = array.length,
        randomnumber,
        temp;
    while (count) {
        randomnumber = Math.random() * count-- | 0;
        temp = array[count];
        array[count] = array[randomnumber];
        array[randomnumber] = temp
    }
    return array;
}

function chunk(arr, size) {
  return Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
}

const el_id_game = document.querySelector("#game");
const el_id_gameUserOne = document.querySelector("#gameUserOne");
const el_id_gameUserOneImage = document.querySelector("#gameUserOneImage");
const el_id_gameUserOneName = document.querySelector("#gameUserOneName");
const el_id_gameUserOneId = document.querySelector("#gameUserOneId");
const el_id_gameUserOneNote = document.querySelector("#gameUserOneNote");
const el_id_gameUserOneFields = document.querySelector("#gameUserOneFields");
const el_id_gameUserTwo = document.querySelector("#gameUserTwo");
const el_id_gameUserTwoImage = document.querySelector("#gameUserTwoImage");
const el_id_gameUserTwoName = document.querySelector("#gameUserTwoName");
const el_id_gameUserTwoId = document.querySelector("#gameUserTwoId");
const el_id_gameUserTwoNote = document.querySelector("#gameUserTwoNote");
const el_id_gameUserTwoFields = document.querySelector("#gameUserTwoFields");
const el_id_gameSubmitLeft = document.querySelector("#gameSubmitLeft");
const el_id_gameSubmitRight = document.querySelector("#gameSubmitRight");
const el_id_gameBracketLevel = document.querySelector("#gameBracketLevel");
const el_id_gameBracketFight = document.querySelector("#gameBracketFight");

let state = [];
let curDepth = 0;
let curFight = 0;

function sortSelectedUsers() {
    if (gamemodeFollowers)
        el_id_followers.hidden = true;
    else
        el_id_following.hidden = true;
    el_id_game.hidden = false;
    state.push(chunk(shuf(selectedUsers), 2));
    state.push([]);
    prepareGameStage();
}

function prepareGameStage() {
    el_id_gameSubmitLeft.disabled = true;
    el_id_gameSubmitRight.disabled = true;
    el_id_gameSubmitLeft.innerHTML = "Please wait...";
    el_id_gameSubmitRight.innerHTML = "Please wait...";
    el_id_gameUserOneImage.src = "";
    el_id_gameUserTwoImage.src = "";
    el_id_gameBracketLevel.innerHTML = "Bracket Level " + (curDepth + 1);
    el_id_gameBracketFight.innerHTML = "Round " + (curFight + 1);
    const curSubStage = state[curDepth][curFight];
    el_id_gameUserOneImage.src = curSubStage[0].avatar;
    el_id_gameUserOneName.innerHTML = renderNameHTML(escapeHtml(curSubStage[0].display_name), curSubStage[0]);
    el_id_gameUserOneId.innerHTML = "@" + curSubStage[0].fqn;
    el_id_gameUserOneNote.innerHTML = escapeHtml(curSubStage[0].note);
    el_id_gameUserOneFields.innerHTML = curSubStage[0].fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
    el_id_gameUserTwoImage.src = curSubStage[1].avatar;
    el_id_gameUserTwoName.innerHTML = renderNameHTML(escapeHtml(curSubStage[1].display_name), curSubStage[1]);
    el_id_gameUserTwoId.innerHTML = "@" + curSubStage[1].fqn;
    el_id_gameUserTwoNote.innerHTML = escapeHtml(curSubStage[1].note);
    el_id_gameUserTwoFields.innerHTML = curSubStage[1].fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
    el_id_gameSubmitLeft.disabled = false;
    el_id_gameSubmitRight.disabled = false;
    el_id_gameSubmitLeft.innerHTML = "Pick " + "@" + curSubStage[0].fqn;
    el_id_gameSubmitRight.innerHTML = "Pick " + "@" + curSubStage[1].fqn;
}

function addNewThingy(thingy) {
    if (state[curDepth + 1] == null) state.push([]);
    if (curFight % 2 == 0)
        state[curDepth + 1][Math.floor(curFight / 2)] = [];
    state[curDepth + 1][Math.floor(curFight / 2)].push(thingy);
}

el_id_gameSubmitLeft.addEventListener("click", () => {
    addNewThingy(state[curDepth][curFight][0]);
    nextStage();
})

el_id_gameSubmitRight.addEventListener("click", () => {
    addNewThingy(state[curDepth][curFight][1]);
    nextStage();
})

function nextStage() {
    if (curFight >= state[curDepth].length - 1) {
        curDepth++;
        curFight = 0;
    } else curFight++;
    console.log(state, curFight, curDepth);
    if (state[curDepth][curFight].length < 2) {
        if (state[curDepth].length < 2) {
            endGame();
            return;
        } 
        addNewThingy(state[curDepth][curFight][0]);
        curDepth++;
        curFight = 0;
    }
    prepareGameStage();
}

// End

const el_id_winner = document.querySelector("#winner");
const el_id_winnerUser = document.querySelector("#winnerUser");
const el_id_winnerUserImage = document.querySelector("#winnerUserImage");
const el_id_winnerUserName = document.querySelector("#winnerUserName");
const el_id_winnerUserId = document.querySelector("#winnerUserId");
const el_id_winnerUserNote = document.querySelector("#winnerUserNote");
const el_id_winnerUserFields = document.querySelector("#winnerUserFields");
const el_id_winnermessage = document.querySelector("#winnermessage");
const el_id_winnerusers = document.querySelector("#winnerusers");
const el_id_winnerPlayAgain = document.querySelector("#winnerPlayAgain");

function endGame() {
    el_id_game.hidden = true;
    el_id_winner.hidden = false;
    const winningPlayer = state[curDepth][curFight][0];
    el_id_winnerUserImage.src = winningPlayer.avatar;
    el_id_winnerUserName.innerHTML = renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer);
    el_id_winnerUserId.innerHTML = "@" + winningPlayer.fqn;
    el_id_winnerUserNote.innerHTML = escapeHtml(winningPlayer.note);
    el_id_winnerUserFields.innerHTML = winningPlayer.fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");

    el_id_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`;
    el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => {
        return pv + `<div class="flexUser">${cs.reduce((pvus, cus) => {
            return pvus + cus.reduce((pvu, cu) => {
                return pvu + `<div class="flexUserUser">
                    <img src="${cu.avatar}" width="64" height="64" />
                    <h3>${renderNameHTML(escapeHtml(cu.display_name), cu)}</h3>
                    <p>@${cu.fqn}</p>
                </div>`
            }, "")
        }, "")}</div>`
    }, "")}</div>`
}

el_id_winnerPlayAgain.addEventListener("click", (x) => {
    el_id_winner.hidden = true;
    state = [];
    selectedUsers = [];
    curDepth = 0;
    curFight = 0;
    if (gamemodeFollowers)
        getFollowers(true);
    else
        getFollowing(true);
})