import { _bestFriends, _favoritedPlaces, preferences } from "@/utils/storage";
import { pullCache } from "@/utils/utilities";
import * as api from "@/utils/api";
import * as apiTypes from "@/utils/api/types";
import errorIcon from "@/assets/error.svg";

export default defineContentScript({
  matches: ["https://polytoria.com/", "https://polytoria.com/home"],
  main() {
    preferences.getPreferences()
      .then((values) => {
        if (values.enabled.includes("favoritedPlaces")) favoritedPlaces();
        if (values.enabled.includes("bestFriends")) bestFriends();
        if (values.enabled.includes("irlBrickPrice")) irlBrickPrice();
      });
  },
});

function favoritedPlaces() {
  _favoritedPlaces.getValue()
    .then(async (places) => {
      const container = document.createElement("div");
      container.innerHTML = `
      <div class="row reqFadeAnim px-2 px-lg-0">
        <div class="col">
          <h6 class="dash-ctitle2">Jump right back into your favorite places</h6>
          <h5 class="dash-ctitle">Favorited Places</h5>
        </div>
      </div>
      <div class="card card-dash mcard mb-3">
        <div class="card-body p-0 m-1 scrollFadeContainer">
          <div class="text-center p-5">
            <div class="spinner-border text-muted" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
      </div>
      `;

      const card: HTMLElement = container.getElementsByClassName(
        "scrollFadeContainer",
      )[0] as HTMLElement;
      const column = document.getElementsByClassName("col-lg-8")[0];

      if (
        document.getElementsByClassName("home-event-container")[0] === undefined
      ) {
        column.insertBefore(container, column.children[0]);
      } else {
        column.insertBefore(container, column.children[1]);
      }

      const placeData: Array<apiTypes.placeApiSchema> | "disabled" =
        await pullCache(
          "favoritedPlaces",
          async () => await api.batch("public", "places/", places),
          300000, // 5 minutes
          false,
        );

      if (placeData == "disabled") {
        console.error(
          "[Poly+] API is disabled, cancelling favorited places loading..",
        );
        card.innerHTML = `
        <div class="text-center p-2">
          <img src="${errorIcon}" width="100" height="100">
          <p class="text-muted mb-0">Sorry! This feature is currently unavailable. Please check back later!</p>
        </div>
        `;

        return;
      }

      for (let i = 0; i < places.length; i++) {
        const id = places.toSorted((a, b) => parseInt(b) - parseInt(a))[i];
        const details = placeData[parseInt(id)];
        if (!details) {
          console.warn("[Poly+] Missing cached place data for ID " + id);
          continue;
        }

        const scrollCard = document.createElement("a");
        scrollCard.classList.value = "d-none";
        scrollCard.href = "/places/" + id;
        scrollCard.innerHTML = `
        <div class="scrollFade card me-2 place-card force-desktop text-center mb-2" style="opacity: 1;">
          <div class="card-body">
            <div class="ratings-header">
              <img src="${details.thumbnail}" class="place-card-image" style="position: relative;">
              <div class="p+pinned_games_playing" style="position: absolute;background: linear-gradient(to bottom, #000000f7, transparent, transparent, transparent);width: 100%;height: 100%;top: 0;left: 0;border-radius: 15px;padding-top: 12px;color: gray;font-size: 0.8rem;">
                <i class="fa-duotone fa-users"></i>
                <span>
                  ${details.playing}
                  Playing
                </span>
              </div>
            </div>
            <div>
              <div class="mt-2 mb-1 place-card-title">
                ${details.name}
              </div>
            </div>
          </div>
        </div>
        `;

        if (!details.isActive) {
          const PlayerCountText =
            scrollCard.getElementsByClassName("p+pinned_games_playing")[0];
          PlayerCountText.children[0].classList.value =
            "text-warning fa-duotone fa-lock";
          PlayerCountText.children[1].remove();
        }

        card.appendChild(scrollCard);
      }

      // Remove Loading Spinner
      card.children[0].remove();
      card.classList.add("d-flex");
      Array.from(card.children).forEach((place) => {
        place.classList.remove("d-none");
      });
    });
}

function bestFriends() {
  const friendsRow = document.querySelector(
    ".card:has(.friendsPopup) .d-flex",
  )!;

  const createHeadshot = async function (id: string) {
    const user: apiTypes.userApiSchema =
      await (await fetch("https://api.polytoria.com/v1/users/" + id)).json();
    const headshot = document.createElement("div");

    // ? surely a better way to do this but who cares
    headshot.classList.add("friend-circle");
    headshot.setAttribute("data-user-id", id.toString());
    headshot.setAttribute("data-username", user.username);
    headshot.setAttribute("data-is-online", "false");
    headshot.setAttribute("data-location", "offline");

    headshot.innerHTML = `
    <img width="90" height="auto" src="${user.thumbnail.icon}" alt="${user.username}" class="img-fluid rounded-circle border border-2 ">
    <div class="friend-name text-truncate mt-1">
      <div style="font-size: 0.5rem; line-height: 0.5rem; display: inline-block;">
        <span class="text-muted">
          <i class="fas fa-dot-circle"></i>
        </span>
      </div>
      ${user.username}
    </div>
    `;

    friendsRow.prepend(headshot);
    return headshot;
  };

  _bestFriends.getValue()
    .then(async (friends) => {
      const userData = await pullCache(
        "bestFriends",
        async () => await api.batch("public", "users/", friends),
        300000, // 5 minutes
        false,
      );

      if (userData == "disabled") {
        console.error(
          "[Poly+] API is disabled, cancelling best friends loading..",
        );
        return;
      }

      for (const id of friends) {
        if (!userData[id]) {
          console.warn("[Poly+] Missing cached user data for ID " + id);
          continue;
        }

        let headshot = document.getElementById("friend-" + id);
        if (!headshot) headshot = await createHeadshot(id);
        friendsRow.prepend(headshot, friendsRow.children[0]);
      }
    });
}

function irlBrickPrice() {
  const trendingItems = Array.from(
    document.querySelectorAll('a[href^="/store"]:has(.place-card)'),
  );

  for (const item of trendingItems) {
    const priceTag = item.getElementsByClassName("text-success")[0];
    const currency = bricksToCurrency(parseInt(priceTag.textContent!), "USD");

    if (currency) {
      const spanTag = document.createElement("span");
      spanTag.classList.add("text-muted");
      spanTag.style.fontSize = "0.7rem";
      spanTag.style.fontWeight = "lighter";
      spanTag.innerText = ` (${currency})`;
      priceTag.appendChild(spanTag);
    }
  }
}