import { state } from "./state";
import { displayTimeFromAbsolute } from "./timeline";
import { showControls } from "./controls";
import { updateSubtitleOptions } from "./subtitles";
import { updateQualityOptions } from "./quality";
import { safeLocalStorage } from "./storage";

// builds stream URL with mode, token, and optional quality param
const streamUrlForMode = (mode: string, quality?: string): string => {
  const src = state.modeSources[mode];
  if (!src?.token) return "";
  let url = `${state.streamURL}?mode=${encodeURIComponent(mode)}&token=${encodeURIComponent(src.token)}`;
  if (quality && quality !== "best") url += `&quality=${encodeURIComponent(quality)}`;
  return url;
};

// switches video src while preserving playback position
const loadVideo = (url: string): void => {
  if (!url) return;
  const wasPlaying = !state.video.paused;
  const prevTime = displayTimeFromAbsolute(state.video.currentTime);
  state.video.src = url;
  state.video.load();
  state.pendingSeekTime = prevTime; // restored in loadedmetadata handler
  if (wasPlaying) {
    state.video.play().catch(() => undefined);
  }
};

/**
 * Switches between sub/dub mode.
 * Saves preference to localStorage, reloads video src.
 */
export const switchMode = (mode: string): void => {
  if (!state.availableModes.includes(mode) || mode === state.currentMode) return;
  state.currentMode = mode;
  safeLocalStorage.setItem("player-audio-mode", mode);
  const qualitySelect = state.container.querySelector(
    "[data-quality-select]",
  ) as HTMLSelectElement | null;
  loadVideo(streamUrlForMode(mode, qualitySelect?.value));
  updateSubtitleOptions();
  updateQualityOptions();
  updateModeButtons();
};

/**
 * Updates dub/sub button styling based on current mode.
 * Disables unavailable modes.
 */
export const updateModeButtons = (): void => {
  const dub = state.container.querySelector("[data-mode-dub]") as HTMLButtonElement | null;
  const sub = state.container.querySelector("[data-mode-sub]") as HTMLButtonElement | null;
  const m = state.currentMode;

  dub?.classList.toggle("text-accent", m === "dub");
  dub?.classList.toggle("text-foreground", m !== "dub");
  dub?.classList.toggle("opacity-50", !state.availableModes.includes("dub"));
  dub?.classList.toggle("cursor-not-allowed", !state.availableModes.includes("dub"));
  if (dub) {
    dub.disabled = !state.availableModes.includes("dub");
  }

  sub?.classList.toggle("text-accent", m === "sub");
  sub?.classList.toggle("text-foreground", m !== "sub");
  sub?.classList.toggle("opacity-50", !state.availableModes.includes("sub"));
  sub?.classList.toggle("cursor-not-allowed", !state.availableModes.includes("sub"));
  if (sub) {
    sub.disabled = !state.availableModes.includes("sub");
  }
};

/**
 * Binds click handlers for mode buttons and autoplay toggle.
 */
export const setupMode = (): void => {
  const dub = state.container.querySelector("[data-mode-dub]") as HTMLButtonElement | null;
  const sub = state.container.querySelector("[data-mode-sub]") as HTMLButtonElement | null;

  dub?.addEventListener("click", () => {
    if (state.availableModes.includes("dub")) {
      switchMode("dub");
      showControls();
    }
  });
  sub?.addEventListener("click", () => {
    if (state.availableModes.includes("sub")) {
      switchMode("sub");
      showControls();
    }
  });

  const autoplayBtn = document.querySelector("[data-autoplay]") as HTMLInputElement | null;
  autoplayBtn?.addEventListener("change", (e) => {
    safeLocalStorage.setItem(
      "mal:autoplay-enabled",
      (e.target as HTMLInputElement).checked ? "true" : "false",
    );
    showControls();
  });
};