// ==UserScript==
// @name         ScoreSaber Utils
// @namespace    https://ssu.fascinated.cc
// @version      1.0.0
// @description  Useful additions to ScoreSaber!
// @author       Fascinated
// @match        https://scoresaber.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=scoresaber.com
// @license      MIT
// @updateURL    https://git.fascinated.cc/Fascinated/ScoreSaberUtils-Backend/raw/branch/master/scoresaber-utils.user.js
// @downloadURL  https://git.fascinated.cc/Fascinated/ScoreSaberUtils-Backend/raw/branch/master/scoresaber-utils.user.js
// @run-at       document-end
// ==/UserScript==

let loaded = false;

/**
 * Fetches the player from ScoreSaber Utils.
 *
 * @param {string} id the player's ID
 * @returns the player's data
 */
async function fetchPlayer(id) {
  const response = await fetch(`https://ssu.fascinated.cc/account/${id}`);
  return await response.json();
}

/**
 * Handles the player page logic.
 */
async function playerPage() {
  console.log("Player page loaded!");
  const id = window.location.pathname.split("/")[2];
  const player = await fetchPlayer(id);

  addStat(
    "+1 PP",
    player.rawPerGlobalPerformancePoints.toFixed(2) + "pp",
    "The amount of pp to increase the global pp by 1pp"
  );
}

/**
 * Inserts a stat into the player's stats.
 *
 * @param {string} stat The stat name
 * @param {string} value The stat value
 * @param {string} hoverText The hover text
 */
function addStat(stat, value, hoverText) {
  const statsElement = document.getElementsByClassName("stats-container")[0];
  const svelteClass = statsElement.getAttribute("class").split(" ")[1];

  const statElement = document.createElement("div");
  statElement.className = `stat-item ${svelteClass}`;
  statElement.innerHTML = `
  <span class="stat-title ${svelteClass}">${stat}</span>
  <span class="stat-spacer ${svelteClass}"></span>
  <span class="stat-content ${svelteClass} has-hover" title="${hoverText}">${value}</span>
  `;
  statsElement.appendChild(statElement);
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function load() {
  "use strict";
  if (loaded) return;

  const path = window.location.pathname;
  const isPlayerPage = path.startsWith("/u/");

  if (isPlayerPage) {
    // Wait for the stats container to load
    while (document.getElementsByClassName("stats-container").length === 0) {
      await sleep(250);
    }

    playerPage();
  }

  loaded = true;
}

load();