// ==UserScript==
// @name          VoidVerified
// @version       1.2.0
// @namespace     http://tampermonkey.net/
// @author        voidnyan
// @description   Display a verified sign next to user's name in AniList.
// @homepageURL   https://github.com/voidnyan/void-verified#voidverified
// @supportURL    https://github.com/voidnyan/void-verified/issues
// @grant         none
// @match         https://anilist.co/*
// @license MIT
// @downloadURL none
// ==/UserScript==

(function () {
	'use strict';

	const defaultSettings = {
		copyColorFromProfile: {
			defaultValue: true,
			description: "Copy user color from their profile.",
		},
		moveSubscribeButtons: {
			defaultValue: false,
			description:
				"Move activity subscribe button next to comments and likes.",
		},
		hideLikeCount: {
			defaultValue: false,
			description: "Hide activity and reply like counts.",
		},
		enabledForUsername: {
			defaultValue: true,
			description: "Display a verified sign next to usernames.",
		},
		enabledForProfileName: {
			defaultValue: false,
			description: "Display a verified sign next to a profile name.",
		},
		defaultSign: {
			defaultValue: "✔",
			description: "The default sign displayed next to a username.",
		},
		highlightEnabled: {
			defaultValue: true,
			description: "Highlight user activity with a border.",
		},
		highlightEnabledForReplies: {
			defaultValue: true,
			description: "Highlight replies with a border.",
		},
		highlightSize: {
			defaultValue: "5px",
			description: "Width of the highlight border.",
		},
		useDefaultHighlightColor: {
			defaultValue: false,
			description:
				"Use fallback highlight color when user color is not specified.",
		},
		defaultHighlightColor: {
			defaultValue: "#FFFFFF",
			description: "Fallback highlight color.",
		},
		globalCssEnabled: {
			defaultValue: false,
			description: "Enable custom global CSS.",
		},
		globalCssAutoDisable: {
			defaultValue: true,
			description: "Disable global CSS when a profile has custom CSS.",
		},
		quickAccessEnabled: {
			defaultValue: false,
			description: "Display quick access of users in home page.",
		},
	};

	class ColorFunctions {
		static hexToRgb(hex) {
			const r = parseInt(hex.slice(1, 3), 16);
			const g = parseInt(hex.slice(3, 5), 16);
			const b = parseInt(hex.slice(5, 7), 16);

			return `${r}, ${g}, ${b}`;
		}

		static rgbToHex(rgb) {
			const [r, g, b] = rgb.split(",");
			const hex = this.generateHex(r, g, b);
			return hex;
		}

		static generateHex(r, g, b) {
			return (
				"#" +
				[r, g, b]
					.map((x) => {
						const hex = Number(x).toString(16);
						return hex.length === 1 ? "0" + hex : hex;
					})
					.join("")
			);
		}
	}

	class AnilistAPI {
		apiQueryTimeoutInMinutes = 30;
		apiQueryTimeout = this.apiQueryTimeoutInMinutes * 60 * 1000;

		settings;
		constructor(settings) {
			this.settings = settings;
		}

		queryUserData() {
			this.#createUserQuery();
		}

		async #createUserQuery() {
			let stopQueries = false;

			for (const user of this.#getUsersToQuery()) {
				if (stopQueries) {
					break;
				}

				stopQueries = this.#queryUser(user);
			}
		}

		#userQuery = `
        query ($username: String) {
            User(name: $username) {
                name
                avatar {
                    large
                }
                options {
                    profileColor
                }
            }
        }
    `;

		#queryUser(user) {
			const variables = {
				username: user.username,
			};

			const url = "https://graphql.anilist.co";
			const options = {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					Accept: "application/json",
				},
				body: JSON.stringify({
					query: this.#userQuery,
					variables,
				}),
			};

			let stopQueries = false;

			fetch(url, options)
				.then(this.#handleResponse)
				.then((data) => {
					const resultUser = data.User;
					this.settings.updateUserFromApi(user, resultUser);
				})
				.catch((err) => {
					console.error(err);
					stopQueries = true;
				});

			return stopQueries;
		}

		#getUsersToQuery() {
			if (
				this.settings.getOptionValue(
					this.settings.options.copyColorFromProfile
				) ||
				this.settings.getOptionValue(
					this.settings.options.quickAccessEnabled
				)
			) {
				return this.#filterUsersByLastFetch();
			}

			const users = this.settings.verifiedUsers.filter(
				(user) => user.copyColorFromProfile || user.quickAccessEnabled
			);

			return this.#filterUsersByLastFetch(users);
		}

		#handleResponse(response) {
			return response.json().then((json) => {
				return response.ok ? json.data : Promise.reject(json);
			});
		}

		#filterUsersByLastFetch(users = null) {
			const currentDate = new Date();
			if (users) {
				return users.filter(
					(user) =>
						!user.lastFetch ||
						currentDate - new Date(user.lastFetch) >
							this.apiQueryTimeout
				);
			}
			return this.settings.verifiedUsers.filter(
				(user) =>
					!user.lastFetch ||
					currentDate - new Date(user.lastFetch) > this.apiQueryTimeout
			);
		}
	}

	class Settings {
		localStorageUsers = "void-verified-users";
		localStorageSettings = "void-verified-settings";
		version = "1.2.0";

		verifiedUsers = [];

		options = defaultSettings;

		constructor() {
			this.verifiedUsers =
				JSON.parse(localStorage.getItem(this.localStorageUsers)) ?? [];

			const settingsInLocalStorage =
				JSON.parse(localStorage.getItem(this.localStorageSettings)) ?? {};

			for (const [key, value] of Object.entries(settingsInLocalStorage)) {
				if (!this.options[key]) {
					continue;
				}
				this.options[key].value = value.value;
			}
		}

		getOptionValue(object) {
			if (object.value === "") {
				return object.defaultValue;
			}
			return object.value ?? object.defaultValue;
		}

		verifyUser(username) {
			if (
				this.verifiedUsers.find(
					(user) => user.username.toLowerCase() === username.toLowerCase()
				)
			) {
				return;
			}

			this.verifiedUsers.push({ username });
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);

			const anilistAPI = new AnilistAPI(this);
			anilistAPI.queryUserData();
		}

		updateUserOption(username, key, value) {
			this.verifiedUsers = this.verifiedUsers.map((u) =>
				u.username === username
					? {
							...u,
							[key]: value,
					  }
					: u
			);
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		updateUserFromApi(user, apiUser) {
			const newUser = this.#mapApiUser(user, apiUser);
			this.verifiedUsers = this.verifiedUsers.map((u) =>
				u.username.toLowerCase() === user.username.toLowerCase()
					? newUser
					: u
			);

			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		#mapApiUser(user, apiUser) {
			let userObject = { ...user };

			userObject.color = this.#handleAnilistColor(
				apiUser.options.profileColor
			);

			userObject.username = apiUser.name;
			userObject.avatar = apiUser.avatar.large;
			userObject.lastFetch = new Date();

			return userObject;
		}

		removeUser(username) {
			this.verifiedUsers = this.verifiedUsers.filter(
				(user) => user.username !== username
			);
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		saveSettingToLocalStorage(key, value) {
			let localSettings = JSON.parse(
				localStorage.getItem(this.localStorageSettings)
			);

			this.options[key].value = value;

			if (localSettings === null) {
				const settings = {
					[key]: value,
				};
				localStorage.setItem(
					this.localStorageSettings,
					JSON.stringify(settings)
				);
				return;
			}

			localSettings[key] = { value };
			localStorage.setItem(
				this.localStorageSettings,
				JSON.stringify(localSettings)
			);
		}

		#defaultColors = [
			"gray",
			"blue",
			"purple",
			"green",
			"orange",
			"red",
			"pink",
		];

		#defaultColorRgb = {
			gray: "103, 123, 148",
			blue: "61, 180, 242",
			purple: "192, 99, 255",
			green: "76, 202, 81",
			orange: "239, 136, 26",
			red: "225, 51, 51",
			pink: "252, 157, 214",
		};

		#handleAnilistColor(color) {
			if (this.#defaultColors.includes(color)) {
				return this.#defaultColorRgb[color];
			}

			return ColorFunctions.hexToRgb(color);
		}
	}

	class StyleHandler {
		settings;
		usernameStyles = "";
		highlightStyles = "";
		otherStyles = "";

		profileLink = this.createStyleLink("", "profile");

		constructor(settings) {
			this.settings = settings;
		}

		refreshStyles() {
			this.createStyles();
			this.createStyleLink(this.usernameStyles, "username");
			this.createStyleLink(this.highlightStyles, "highlight");
			this.createStyleLink(this.otherStyles, "other");
		}

		createStyles() {
			this.usernameStyles = "";
			this.otherStyles = `a[href="/settings/developer" i]::after{content: " & Void"}`;

			for (const user of this.settings.verifiedUsers) {
				if (
					this.settings.getOptionValue(
						this.settings.options.enabledForUsername
					) ||
					user.enabledForUsername
				) {
					this.createUsernameCSS(user);
				}
			}

			if (
				this.settings.getOptionValue(
					this.settings.options.moveSubscribeButtons
				)
			) {
				this.otherStyles += `
                .has-label::before {
                top: -30px !important;
                left: unset !important;
                right: -10px;
                }
    
                .has-label[label="Unsubscribe"],
                .has-label[label="Subscribe"] {
                font-size: 0.875em !important;
                }
    
                .has-label[label="Unsubscribe"] {
                color: rgba(var(--color-green),.8);
                }
                `;
			}

			this.createHighlightStyles();

			if (this.settings.getOptionValue(this.settings.options.hideLikeCount)) {
				this.otherStyles += `
                    .like-wrap .count {
                        display: none;
                    }
                `;
			}
		}

		createHighlightStyles() {
			this.highlightStyles = "";
			for (const user of this.settings.verifiedUsers) {
				if (
					this.settings.getOptionValue(
						this.settings.options.highlightEnabled
					) ||
					user.highlightEnabled
				) {
					this.createHighlightCSS(
						user,
						`div.wrap:has( div.header > a.name[href*="${user.username}" i] )`
					);
					this.createHighlightCSS(
						user,
						`div.wrap:has( div.details > a.name[href*="${user.username}" i] )`
					);
				}

				if (
					this.settings.getOptionValue(
						this.settings.options.highlightEnabledForReplies
					) ||
					user.highlightEnabledForReplies
				) {
					this.createHighlightCSS(
						user,
						`div.reply:has( a.name[href*="${user.username}" i] )`
					);
				}
			}

			this.disableHighlightOnSmallCards();
		}

		createUsernameCSS(user) {
			this.usernameStyles += `
                a.name[href*="${user.username}" i]::after {
                    content: "${
						this.stringIsEmpty(user.sign) ??
						this.settings.getOptionValue(
							this.settings.options.defaultSign
						)
					}";
                    color: ${
						this.getUserColor(user) ?? "rgb(var(--color-blue))"
					}
                }
                `;
		}

		createHighlightCSS(user, selector) {
			this.highlightStyles += `
                ${selector} {
                    margin-right: -${this.settings.getOptionValue(
						this.settings.options.highlightSize
					)};
                    border-right: ${this.settings.getOptionValue(
						this.settings.options.highlightSize
					)} solid ${
			this.getUserColor(user) ?? this.getDefaultHighlightColor()
		};
                    border-radius: 5px;
                }
                `;
		}

		disableHighlightOnSmallCards() {
			this.highlightStyles += `
                div.wrap:has(div.small) {
                margin-right: 0px !important;
                border-right: 0px solid black !important;
                }
                `;
		}

		refreshHomePage() {
			if (
				!this.settings.getOptionValue(
					this.settings.options.highlightEnabled
				)
			) {
				return;
			}
			this.createHighlightStyles();
			this.createStyleLink(this.highlightStyles, "highlight");
		}

		clearProfileVerify() {
			this.profileLink.href =
				"data:text/css;charset=UTF-8," + encodeURIComponent("");
		}

		clearStyles(id) {
			const styles = document.getElementById(`void-verified-${id}-styles`);
			styles?.remove();
		}

		verifyProfile() {
			if (
				!this.settings.getOptionValue(
					this.settings.options.enabledForProfileName
				)
			) {
				return;
			}

			const usernameHeader = document.querySelector("h1.name");
			const username = usernameHeader.innerHTML.trim();

			const user = this.settings.verifiedUsers.find(
				(u) => u.username === username
			);
			if (!user) {
				this.clearProfileVerify();
				return;
			}

			const profileStyle = `
                    h1.name::after {
                    content: "${
						this.stringIsEmpty(user.sign) ??
						this.settings.getOptionValue(
							this.settings.options.defaultSign
						)
					}"
                    }
                `;
			this.profileLink.href =
				"data:text/css;charset=UTF-8," + encodeURIComponent(profileStyle);
		}

		copyUserColor() {
			const usernameHeader = document.querySelector("h1.name");
			const username = usernameHeader.innerHTML.trim();
			const user = this.settings.verifiedUsers.find(
				(u) => u.username === username
			);

			if (!user) {
				return;
			}

			if (
				!(
					user.copyColorFromProfile ||
					this.settings.getOptionValue(
						this.settings.options.copyColorFromProfile
					)
				)
			) {
				return;
			}

			const color =
				getComputedStyle(usernameHeader).getPropertyValue("--color-blue");

			this.settings.updateUserOption(user.username, "color", color);
		}

		getUserColor(user) {
			return (
				user.colorOverride ??
				(user.color &&
				(user.copyColorFromProfile ||
					this.settings.getOptionValue(
						this.settings.options.copyColorFromProfile
					))
					? `rgb(${user.color})`
					: undefined)
			);
		}

		getDefaultHighlightColor() {
			if (
				this.settings.getOptionValue(
					this.settings.options.useDefaultHighlightColor
				)
			) {
				return this.settings.getOptionValue(
					this.settings.options.defaultHighlightColor
				);
			}
			return "rgb(var(--color-blue))";
		}

		createStyleLink(styles, id) {
			const oldLink = document.getElementById(`void-verified-${id}-styles`);
			const link = document.createElement("link");
			link.setAttribute("id", `void-verified-${id}-styles`);
			link.setAttribute("rel", "stylesheet");
			link.setAttribute("type", "text/css");
			link.setAttribute(
				"href",
				"data:text/css;charset=UTF-8," + encodeURIComponent(styles)
			);
			document.head?.append(link);
			oldLink?.remove();
			return link;
		}

		stringIsEmpty(string) {
			if (!string || string.length === 0) {
				return undefined;
			}
			return string;
		}
	}

	class GlobalCSS {
		settings;
		styleHandler;

		styleId = "global-css";
		isCleared = false;

		cssInLocalStorage = "void-verified-global-css";
		constructor(settings) {
			this.settings = settings;
			this.styleHandler = new StyleHandler(settings);

			this.css = localStorage.getItem(this.cssInLocalStorage) ?? "";
		}

		createCss() {
			if (
				!this.settings.getOptionValue(
					this.settings.options.globalCssEnabled
				)
			) {
				this.styleHandler.clearStyles(this.styleId);
				return;
			}

			if (!this.shouldRender()) {
				return;
			}

			this.isCleared = false;
			this.styleHandler.createStyleLink(this.css, this.styleId);
		}

		updateCss(css) {
			this.css = css;
			this.createCss();
			localStorage.setItem(this.cssInLocalStorage, css);
		}

		clearCssForProfile() {
			if (this.isCleared) {
				return;
			}
			if (!this.shouldRender()) {
				this.styleHandler.clearStyles(this.styleId);
				this.isCleared = true;
			}
		}

		shouldRender() {
			if (window.location.pathname.startsWith("/settings")) {
				return false;
			}

			if (
				!this.settings.getOptionValue(
					this.settings.options.globalCssAutoDisable
				)
			) {
				return true;
			}

			const profileCustomCss = document.getElementById(
				"customCSS-automail-styles"
			);

			if (!profileCustomCss) {
				return true;
			}

			const shouldRender = profileCustomCss.innerHTML.trim().length === 0;
			return shouldRender;
		}
	}

	class ActivityHandler {
		settings;
		constructor(settings) {
			this.settings = settings;
		}

		moveAndDisplaySubscribeButton() {
			if (
				!this.settings.getOptionValue(
					this.settings.options.moveSubscribeButtons
				)
			) {
				return;
			}

			const subscribeButtons = document.querySelectorAll(
				"span[label='Unsubscribe'], span[label='Subscribe']"
			);
			for (const subscribeButton of subscribeButtons) {
				if (subscribeButton.parentNode.classList.contains("actions")) {
					continue;
				}

				const container = subscribeButton.parentNode.parentNode;
				const actions = container.querySelector(".actions");
				actions.append(subscribeButton);
			}
		}
	}

	class SettingsUserInterface {
		settings;
		styleHandler;
		globalCSS;
		AnilistBlue = "120, 180, 255";

		constructor(settings, styleHandler, globalCSS) {
			this.settings = settings;
			this.styleHandler = styleHandler;
			this.globalCSS = globalCSS;
		}

		renderSettingsUi() {
			const container = document.querySelector(
				".settings.container > .content"
			);
			const settingsContainer = document.createElement("div");
			settingsContainer.setAttribute("id", "voidverified-settings");
			this.#renderSettingsHeader(settingsContainer);

			const settingsListContainer = document.createElement("div");
			settingsListContainer.style.display = "flex";
			settingsListContainer.style.flexDirection = "column";
			settingsListContainer.style.gap = "5px";
			for (const [key, setting] of Object.entries(this.settings.options)) {
				this.#renderSetting(setting, settingsListContainer, key);
			}

			settingsContainer.append(settingsListContainer);

			this.#renderUserTable(settingsContainer);

			this.#renderCustomCssEditor(settingsContainer);

			container.append(settingsContainer);
		}

		removeSettingsUi() {
			const settings = document.querySelector("#voidverified-settings");
			settings?.remove();
		}

		#renderSettingsHeader(settingsContainer) {
			const headerContainer = document.createElement("div");
			const header = document.createElement("h1");
			header.style.marginTop = "30px";
			header.innerText = "VoidVerified settings";

			const versionInfo = document.createElement("p");
			versionInfo.append("version: ");
			const versionNumber = document.createElement("span");
			versionNumber.style.color = `rgb(${this.AnilistBlue})`;
			versionNumber.append(this.settings.version);

			versionInfo.append(versionNumber);

			headerContainer.append(header);
			headerContainer.append(versionInfo);
			settingsContainer.append(headerContainer);
		}

		#renderUserTable(settingsContainer) {
			const oldTableContainer = document.querySelector(
				"#void-verified-user-table"
			);
			const tableContainer =
				oldTableContainer ?? document.createElement("div");
			tableContainer.innerHTML = "";

			tableContainer.setAttribute("id", "void-verified-user-table");

			const table = document.createElement("table");
			const head = document.createElement("thead");
			const headrow = document.createElement("tr");
			headrow.append(this.#createCell("Username", "th"));
			headrow.append(this.#createCell("Sign", "th"));
			headrow.append(this.#createCell("Color", "th"));
			headrow.append(this.#createCell("Other", "th"));

			head.append(headrow);

			const body = document.createElement("tbody");

			for (const user of this.settings.verifiedUsers) {
				body.append(this.#createUserRow(user));
			}

			table.append(head);
			table.append(body);
			tableContainer.append(table);

			const inputForm = document.createElement("form");
			inputForm.addEventListener("submit", (event) =>
				this.#handleVerifyUserForm(event, this.settings)
			);
			const label = document.createElement("label");
			label.innerText = "Add user";
			inputForm.append(label);
			const textInput = document.createElement("input");
			textInput.setAttribute("id", "voidverified-add-user");

			inputForm.append(textInput);
			tableContainer.append(inputForm);

			oldTableContainer || settingsContainer.append(tableContainer);
		}

		#createUserRow(user) {
			const row = document.createElement("tr");
			const userLink = document.createElement("a");
			userLink.innerText = user.username;
			userLink.setAttribute(
				"href",
				`https://anilist.co/user/${user.username}/`
			);
			userLink.setAttribute("target", "_blank");
			row.append(this.#createCell(userLink));

			const signInput = document.createElement("input");
			signInput.value = user.sign ?? "";
			signInput.style.width = "100px";
			signInput.addEventListener("input", (event) =>
				this.#updateUserOption(user.username, "sign", event.target.value)
			);
			const signCell = this.#createCell(signInput);
			signCell.append(
				this.#createUserCheckbox(
					user.enabledForUsername,
					user.username,
					"enabledForUsername",
					this.settings.getOptionValue(
						this.settings.options.enabledForUsername
					)
				)
			);

			row.append(this.#createCell(signCell));

			const colorInput = document.createElement("input");
			colorInput.setAttribute("type", "color");
			colorInput.style.border = "0";
			colorInput.style.height = "24px";
			colorInput.style.width = "40px";
			colorInput.style.padding = "0";
			colorInput.style.backgroundColor = "unset";
			colorInput.value = this.#getUserColorPickerColor(user);
			colorInput.addEventListener(
				"change",
				(event) => this.#handleUserColorChange(event, user.username),
				false
			);

			const colorInputContainer = document.createElement("span");

			const colorCell = this.#createCell(colorInput);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.copyColorFromProfile,
					user.username,
					"copyColorFromProfile",
					this.settings.getOptionValue(
						this.settings.options.copyColorFromProfile
					)
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.highlightEnabled,
					user.username,
					"highlightEnabled",
					this.settings.getOptionValue(
						this.settings.options.highlightEnabled
					)
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.highlightEnabledForReplies,
					user.username,
					"highlightEnabledForReplies",
					this.settings.getOptionValue(
						this.settings.options.highlightEnabledForReplies
					)
				)
			);

			colorCell.append(colorInputContainer);

			const resetColorBtn = document.createElement("button");
			resetColorBtn.innerText = "🔄";
			resetColorBtn.addEventListener("click", () =>
				this.#handleUserColorReset(user.username)
			);

			colorCell.append(resetColorBtn);
			row.append(colorCell);

			const quickAccessCheckbox = this.#createUserCheckbox(
				user.quickAccessEnabled,
				user.username,
				"quickAccessEnabled",
				this.settings.getOptionValue(
					this.settings.options.quickAccessEnabled
				)
			);
			row.append(this.#createCell(quickAccessCheckbox));

			const deleteButton = document.createElement("button");
			deleteButton.innerText = "❌";
			deleteButton.addEventListener("click", () =>
				this.#removeUser(user.username)
			);
			row.append(this.#createCell(deleteButton));
			return row;
		}

		#getUserColorPickerColor(user) {
			if (user.colorOverride) {
				return user.colorOverride;
			}

			if (
				user.color &&
				(user.copyColorFromProfile ||
					this.settings.getOptionValue(
						this.settings.options.copyColorFromProfile
					))
			) {
				return ColorFunctions.rgbToHex(user.color);
			}

			if (
				this.settings.getOptionValue(
					this.settings.options.useDefaultHighlightColor
				)
			) {
				return this.settings.getOptionValue(
					this.settings.options.defaultHighlightColor
				);
			}

			return ColorFunctions.rgbToHex(this.AnilistBlue);
		}

		#createUserCheckbox(isChecked, username, settingKey, disabled) {
			const checkbox = document.createElement("input");
			if (disabled) {
				checkbox.setAttribute("disabled", "");
			}

			checkbox.setAttribute("type", "checkbox");
			checkbox.checked = isChecked;
			checkbox.addEventListener("change", (event) => {
				this.#updateUserOption(username, settingKey, event.target.checked);
				this.#refreshUserTable();
			});

			checkbox.style.marginLeft = "5px";

			checkbox.title = this.settings.options[settingKey].description;
			return checkbox;
		}

		#handleUserColorReset(username) {
			this.#updateUserOption(username, "colorOverride", undefined);
			this.#refreshUserTable();
		}

		#handleUserColorChange(event, username) {
			const color = event.target.value;
			this.#updateUserOption(username, "colorOverride", color);
		}

		#handleVerifyUserForm(event, settings) {
			event.preventDefault();

			const usernameInput = document.getElementById("voidverified-add-user");
			const username = usernameInput.value;
			settings.verifyUser(username);
			usernameInput.value = "";
			this.#refreshUserTable();
		}

		#refreshUserTable() {
			const container = document.querySelector(
				".settings.container > .content"
			);
			this.#renderUserTable(container);
		}

		#updateUserOption(username, key, value) {
			this.settings.updateUserOption(username, key, value);
			this.styleHandler.refreshStyles();
		}

		#removeUser(username) {
			this.settings.removeUser(username);
			this.#refreshUserTable();
			this.styleHandler.refreshStyles();
		}

		#createCell(content, elementType = "td") {
			const cell = document.createElement(elementType);
			cell.append(content);
			return cell;
		}

		#renderSetting(setting, settingsContainer, settingKey, disabled = false) {
			const value = this.settings.getOptionValue(setting);
			const type = typeof value;

			const container = document.createElement("div");
			const input = document.createElement("input");

			if (type === "boolean") {
				input.setAttribute("type", "checkbox");
			} else if (settingKey == "defaultHighlightColor") {
				input.setAttribute("type", "color");
				input.style.border = "0";
				input.style.height = "15px";
				input.style.width = "25px";
				input.style.padding = "0";
				input.style.backgroundColor = "unset";
			} else if (type === "string") {
				input.setAttribute("type", "text");
				input.style.width = "50px";
			}

			if (disabled) {
				input.setAttribute("disabled", "");
			}

			input.setAttribute("id", settingKey);
			input.addEventListener("change", (event) =>
				this.#handleOption(event, settingKey, type)
			);

			if (type === "boolean" && value) {
				input.setAttribute("checked", true);
			} else if (type === "string") {
				input.value = value;
			}

			container.append(input);

			const label = document.createElement("label");
			label.setAttribute("for", settingKey);
			label.innerText = setting.description;
			label.style.marginLeft = "5px";
			container.append(label);
			settingsContainer.append(container);
		}

		#handleOption(event, settingKey, type) {
			const value =
				type === "boolean" ? event.target.checked : event.target.value;
			this.settings.saveSettingToLocalStorage(settingKey, value);
			this.styleHandler.refreshStyles();
			this.#refreshUserTable();
		}

		#renderCustomCssEditor(settingsContainer) {
			const container = document.createElement("div");
			const label = document.createElement("label");
			label.innerText = "Custom Global CSS";
			label.setAttribute("for", "void-verified-global-css-editor");
			label.style.marginTop = "20px";
			label.style.fontSize = "2rem";
			label.style.display = "inline-block";
			container.append(label);

			const textarea = document.createElement("textarea");
			textarea.setAttribute("id", "void-verified-global-css-editor");

			textarea.value = this.globalCSS.css;
			textarea.style.width = "100%";
			textarea.style.height = "200px";
			textarea.style.resize = "vertical";
			textarea.style.background = "#14191f";
			textarea.style.color = "white";

			textarea.addEventListener("change", (event) => {
				this.#handleCustomCssEditor(event, this);
			});

			container.append(textarea);

			const notice = document.createElement("div");
			notice.innerText =
				"Please note that Custom CSS is disabled in the settings. \nIn the event that you accidentally disable rendering of critical parts of AniList, navigate to the settings by URL";
			notice.style.fontSize = "11px";
			container.append(notice);

			settingsContainer.append(container);
		}

		#handleCustomCssEditor(event, settingsUi) {
			const value = event.target.value;
			settingsUi.globalCSS.updateCss(value);
		}
	}

	class QuickAccess {
		settings;
		#quickAccessId = "void-verified-quick-access";
		constructor(settings) {
			this.settings = settings;
		}

		renderQuickAccess() {
			if (this.#quickAccessRendered()) {
				return;
			}

			if (
				!this.settings.getOptionValue(
					this.settings.options.quickAccessEnabled
				) &&
				!this.settings.verifiedUsers.some((user) => user.quickAccessEnabled)
			) {
				return;
			}

			const quickAccessContainer = document.createElement("div");
			quickAccessContainer.setAttribute("id", this.#quickAccessId);

			const sectionHeader = document.createElement("div");
			sectionHeader.setAttribute("class", "section-header");
			const title = document.createElement("h2");
			title.append("Quick Access");
			sectionHeader.append(title);

			quickAccessContainer.append(sectionHeader);

			const quickAccessBody = document.createElement("div");
			quickAccessBody.style = `
            background: rgb(var(--color-foreground));
            display: grid;
            grid-template-columns: repeat(auto-fill, 60px);
            grid-template-rows: repeat(auto-fill, 80px);
            gap: 15px;
            padding: 20px;
            margin-bottom: 25px;
        `;

			for (const user of this.#getQuickAccessUsers()) {
				quickAccessBody.append(this.#createQuickAccessLink(user));
			}

			quickAccessContainer.append(quickAccessBody);

			const section = document.querySelector(
				".container > .home > div:nth-child(2)"
			);
			section.insertBefore(quickAccessContainer, section.firstChild);
		}

		#createQuickAccessLink(user) {
			const container = document.createElement("a");
			container.style.display = "inline-block";
			const link = document.createElement("a");
			container.setAttribute(
				"href",
				`https://anilist.co/user/${user.username}/`
			);

			const image = document.createElement("div");
			image.style = `
            background-image: url(${user.avatar});
            display: flex;
            background-size: contain;
            background-repeat: no-repeat;
            height: 60px;
            width: 60px;
        `;

			container.append(image);

			const username = document.createElement("div");
			username.append(user.username);

			username.style = `
            display: inline-block;
            text-align: center;
            bottom: -20px;
            width: 100%;
            word-break: break-all;
            font-size: 1.2rem;
        `;

			container.append(username);

			container.append(link);
			return container;
		}

		#quickAccessRendered() {
			const quickAccess = document.getElementById(this.#quickAccessId);
			return quickAccess !== null;
		}

		#getQuickAccessUsers() {
			if (
				this.settings.getOptionValue(
					this.settings.options.quickAccessEnabled
				)
			) {
				return this.settings.verifiedUsers;
			}

			return this.settings.verifiedUsers.filter(
				(user) => user.quickAccessEnabled
			);
		}
	}

	class IntervalScriptHandler {
		styleHandler;
		settingsUi;
		activityHandler;
		settings;
		globalCSS;
		quickAccess;
		constructor(settings) {
			this.settings = settings;

			this.styleHandler = new StyleHandler(settings);
			this.globalCSS = new GlobalCSS(settings);
			this.settingsUi = new SettingsUserInterface(
				settings,
				this.styleHandler,
				this.globalCSS
			);
			this.activityHandler = new ActivityHandler(settings);
			this.quickAccess = new QuickAccess(settings);
		}

		currentPath = "";
		evaluationIntervalInSeconds = 1;
		hasPathChanged(path) {
			if (path === this.currentPath) {
				return false;
			}
			this.currentPath = path;
			return true;
		}

		handleIntervalScripts(intervalScriptHandler) {
			const path = window.location.pathname;

			intervalScriptHandler.activityHandler.moveAndDisplaySubscribeButton();
			intervalScriptHandler.globalCSS.clearCssForProfile();

			if (path === "/home") {
				intervalScriptHandler.styleHandler.refreshHomePage();
				intervalScriptHandler.quickAccess.renderQuickAccess();
			}

			if (!path.startsWith("/settings/developer")) {
				intervalScriptHandler.settingsUi.removeSettingsUi();
			}

			if (!intervalScriptHandler.hasPathChanged(path)) {
				return;
			}

			intervalScriptHandler.styleHandler.clearProfileVerify();
			intervalScriptHandler.globalCSS.createCss();

			if (path.startsWith("/user/")) {
				intervalScriptHandler.styleHandler.verifyProfile();
				intervalScriptHandler.styleHandler.copyUserColor();
				return;
			}

			if (path.startsWith("/settings/developer")) {
				intervalScriptHandler.settingsUi.renderSettingsUi();
				return;
			}
		}

		enableScriptIntervalHandling() {
			setInterval(() => {
				this.handleIntervalScripts(this);
			}, this.evaluationIntervalInSeconds * 1000);
		}
	}

	const settings = new Settings();
	const styleHandler = new StyleHandler(settings);
	const intervalScriptHandler = new IntervalScriptHandler(settings);

	styleHandler.refreshStyles();
	intervalScriptHandler.enableScriptIntervalHandling();

	const anilistAPI = new AnilistAPI(settings);

	anilistAPI.queryUserData();

	console.log(`VoidVerified ${settings.version} loaded.`);

})();