// Page slider/scrubber for quick navigation
// Feature Registration Pattern implementation

import type { ReaderContext } from "../core/reader-context";

export function init(context: ReaderContext): void {
  let state: PageScrubberState | null = null;
  let scrubberElement: HTMLElement | null = null;

  context.events.on("reader:loaded", (detail: { currentPage: number; totalPages: number; container: HTMLElement }) => {
    state = createPageScrubber(detail.container, detail.currentPage, detail.totalPages);
  });

  context.events.on("page-scrubber:show", () => {
    if (state) {
      showPageScrubber(state);
    }
  });

  context.events.on("page-scrubber:hide", () => {
    if (state) {
      hidePageScrubber(state);
    }
  });

  context.events.on("page-changed", (detail: { page: number }) => {
    if (state) {
      updatePageScrubber(state, detail.page);
    }
  });

  context.events.on("reader:unload", () => {
    scrubberElement?.remove();
    scrubberElement = null;
  });
}

interface PageScrubberState {
  currentPage: number;
  totalPages: number;
  container: HTMLElement;
}

function createPageScrubber(
  container: HTMLElement,
  currentPage: number,
  totalPages: number,
): PageScrubberState {
  const state: PageScrubberState = {
    currentPage,
    totalPages,
    container,
  };

  renderPageScrubber(state);
  return state;
}

function renderPageScrubber(state: PageScrubberState): void {
  const existing = state.container.querySelector(".page-scrubber");
  existing?.remove();

  const scrubber = document.createElement("div");
  scrubber.className =
    "page-scrubber fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-900 bg-opacity-90 rounded-full px-4 py-2 flex items-center gap-4 z-40";
  scrubber.innerHTML = `
    <span class="page-label">${state.currentPage}</span>
    <input
      type="range"
      class="page-slider w-64 h-2 bg-gray-700 rounded-full appearance-none cursor-pointer"
      min="1"
      max="${state.totalPages}"
      value="${state.currentPage}"
    />
    <span class="page-total">${state.totalPages}</span>
  `;

  const slider = scrubber.querySelector(".page-slider") as HTMLInputElement;
  slider.addEventListener("input", (e) => {
    const targetPage = parseInt((e.target as HTMLInputElement).value);
    updatePageScrubber(state, targetPage);
  });

  slider.addEventListener("change", () => {
    const targetPage = parseInt(slider.value);
    dispatchPageNavigationEvent(targetPage);
  });

  state.container.appendChild(scrubber);
}

function updatePageScrubber(
  state: PageScrubberState,
  currentPage: number,
): PageScrubberState {
  state.currentPage = currentPage;

  const label = state.container.querySelector(".page-label");
  if (label) {
    label.textContent = String(currentPage);
  }

  return state;
}

function showPageScrubber(state: PageScrubberState): void {
  const scrubber = state.container.querySelector(".page-scrubber");
  scrubber?.classList.remove("hidden");
}

function hidePageScrubber(state: PageScrubberState): void {
  const scrubber = state.container.querySelector(".page-scrubber");
  scrubber?.classList.add("hidden");
}

function dispatchPageNavigationEvent(page: number): void {
  window.dispatchEvent(
    new CustomEvent("navigate-to-page", { detail: { page } }),
  );
}