import { parseClassList } from "./utils";

const setActiveDiscoverTab = (clickedTab: Element): void => {
  const group = clickedTab.closest('[data-tab-group="discover"]');
  if (!group) {
    return;
  }

  // reset all tabs in group
  const triggers = group.querySelectorAll("[data-tab-trigger]");
  triggers.forEach((tab) => {
    const activeClasses = parseClassList(tab.getAttribute("data-tab-active-classes"));
    const inactiveClasses = parseClassList(tab.getAttribute("data-tab-inactive-classes"));
    tab.classList.remove(...activeClasses);
    tab.classList.add(...inactiveClasses);
  });

  // mark clicked tab as active
  const activeClasses = parseClassList(clickedTab.getAttribute("data-tab-active-classes"));
  const inactiveClasses = parseClassList(clickedTab.getAttribute("data-tab-inactive-classes"));
  clickedTab.classList.remove(...inactiveClasses);
  clickedTab.classList.add(...activeClasses);
};

const onDiscoverTabClick = (event: MouseEvent): void => {
  const target = event.target;
  if (!(target instanceof Element)) {
    return;
  }

  const trigger = target.closest("[data-tab-trigger]");
  if (!trigger) {
    return;
  }

  setActiveDiscoverTab(trigger);
};

const initDiscoverTabs = (): void => {
  document.addEventListener("click", onDiscoverTabClick);
};

initDiscoverTabs();

const initSurpriseMe = (): void => {
  let isFetchingRandom = false;

  const onClick = async (): Promise<void> => {
    if (isFetchingRandom) return;

    const btn = document.getElementById("surprise-btn") as HTMLButtonElement | null;
    if (!btn) return;
    isFetchingRandom = true;

    const spinner = document.getElementById("surprise-spinner");
    const text = document.getElementById("surprise-text");
    const icon = document.getElementById("surprise-icon");

    btn.disabled = true;
    spinner?.classList.remove("hidden");
    icon?.classList.add("hidden");
    if (text) text.textContent = "Picking…";

    try {
      const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: "no-store" });
      if (!res.ok) throw new Error("Failed to fetch random anime");
      const json = (await res.json()) as unknown;
      const data = (json as { data?: unknown }).data as { mal_id?: unknown } | undefined;
      const malId = typeof data?.mal_id === "number" ? data.mal_id : 0;
      if (malId > 0) {
        window.location.href = `/anime/${malId}`;
        return;
      }
      throw new Error("Random anime missing mal_id");
    } catch (error) {
      console.error(error);
      alert("Could not pick a random anime right now. Please try again.");
    } finally {
      isFetchingRandom = false;
      btn.disabled = false;
      spinner?.classList.add("hidden");
      icon?.classList.remove("hidden");
      if (text) text.textContent = "Surprise Me";
    }
  };

  document.addEventListener("click", (e) => {
    const target = e.target;
    if (!(target instanceof Element)) return;
    const surprise = target.closest("[data-surprise-me]");
    if (!surprise) return;
    void onClick();
  });
};

initSurpriseMe();