"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { IconChevron, IconDownload, IconExpand } from "./Icons";

type PdfDoc = { numPages: number; getPage: (n: number) => Promise<PdfPage>; destroy?: () => Promise<void> };
type PdfPage = {
  getViewport: (o: { scale: number }) => { width: number; height: number };
  render: (o: { canvasContext: CanvasRenderingContext2D; viewport: { width: number; height: number } }) => {
    promise: Promise<void>;
    cancel: () => void;
  };
};

/**
 * PaperReader — pdf.js-based reader: page navigation, zoom-to-width, full-screen, download, keyboard support,
 * loading and error states, native/mobile fallback. The worker is loaded from this origin (CSP-safe).
 */
export function PaperReader({
  src,
  title,
  downloadHref,
  versionLabel,
}: {
  src: string;
  title: string;
  downloadHref: string;
  versionLabel: string;
}) {
  const [doc, setDoc] = useState<PdfDoc | null>(null);
  const [page, setPage] = useState(1);
  const [state, setState] = useState<"loading" | "ready" | "error">("loading");
  const [fs, setFs] = useState(false);
  const canvas = useRef<HTMLCanvasElement>(null);
  const wrap = useRef<HTMLDivElement>(null);
  const root = useRef<HTMLElement>(null);
  const renderTask = useRef<{ cancel: () => void } | null>(null);

  useEffect(() => {
    let cancelled = false;
    let loaded: PdfDoc | null = null;
    (async () => {
      try {
        const pdfjs = await import("pdfjs-dist");
        pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
        const task = pdfjs.getDocument({ url: src, disableAutoFetch: true });
        const d = (await task.promise) as unknown as PdfDoc;
        if (cancelled) return;
        loaded = d;
        setDoc(d);
        setState("ready");
      } catch {
        if (!cancelled) setState("error");
      }
    })();
    return () => {
      cancelled = true;
      loaded?.destroy?.().catch(() => {});
    };
  }, [src]);

  const render = useCallback(async () => {
    if (!doc || !canvas.current || !wrap.current) return;
    renderTask.current?.cancel();
    const p = await doc.getPage(page);
    const width = wrap.current.clientWidth;
    const base = p.getViewport({ scale: 1 });
    const scale = width / base.width;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const vp = p.getViewport({ scale: scale * dpr });
    const c = canvas.current;
    c.width = vp.width;
    c.height = vp.height;
    c.style.width = `${vp.width / dpr}px`;
    c.style.height = `${vp.height / dpr}px`;
    const ctx = c.getContext("2d");
    if (!ctx) return;
    const t = p.render({ canvasContext: ctx, viewport: vp });
    renderTask.current = t;
    await t.promise.catch(() => {});
  }, [doc, page]);

  useEffect(() => {
    render();
    const ro = new ResizeObserver(() => render());
    if (wrap.current) ro.observe(wrap.current);
    return () => ro.disconnect();
  }, [render]);

  useEffect(() => {
    const onFs = () => setFs(!!document.fullscreenElement);
    document.addEventListener("fullscreenchange", onFs);
    return () => document.removeEventListener("fullscreenchange", onFs);
  }, []);

  const n = doc?.numPages ?? 0;
  const go = (p: number) => setPage(Math.min(Math.max(1, p), Math.max(1, n)));
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowRight" || e.key === "PageDown") go(page + 1);
    if (e.key === "ArrowLeft" || e.key === "PageUp") go(page - 1);
  };
  const toggleFs = async () => {
    if (document.fullscreenElement) await document.exitFullscreen();
    else await root.current?.requestFullscreen?.().catch(() => {});
  };

  return (
    <figure
      ref={root}
      className={`surface overflow-hidden ${fs ? "bg-[var(--bg)]" : ""}`}
      aria-label={`PDF reader: ${title}`}
    >
      <div className="flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2 text-xs hairline">
        <div className="flex items-center gap-1">
          <button
            type="button"
            className="btn-icon h-9 w-9"
            aria-label="Previous page"
            onClick={() => go(page - 1)}
            disabled={page <= 1}
          >
            <IconChevron size={16} className="rotate-180" />
          </button>
          <span className="tabular-nums">
            <label htmlFor="pdf-page" className="sr-only">
              Page
            </label>
            <input
              id="pdf-page"
              type="number"
              min={1}
              max={Math.max(1, n)}
              value={page}
              onChange={(e) => go(Number(e.target.value) || 1)}
              className="input inline-block h-8 w-14 px-2 text-center"
              style={{ minHeight: "2rem", fontSize: "0.8rem" }}
            />{" "}
            <span className="muted">/ {n || "…"}</span>
          </span>
          <button
            type="button"
            className="btn-icon h-9 w-9"
            aria-label="Next page"
            onClick={() => go(page + 1)}
            disabled={!n || page >= n}
          >
            <IconChevron size={16} />
          </button>
        </div>
        <div className="flex items-center gap-1">
          <span className="badge hidden sm:inline-flex">{versionLabel}</span>
          <a className="btn-icon h-9 w-9" href={downloadHref} aria-label="Download PDF">
            <IconDownload size={16} />
          </a>
          <button
            type="button"
            className="btn-icon h-9 w-9"
            aria-label={fs ? "Exit full screen" : "Full screen"}
            onClick={toggleFs}
          >
            <IconExpand size={16} />
          </button>
        </div>
      </div>
      {/* biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard paging on the reader surface */}
      <div
        ref={wrap}
        className={`relative overflow-auto ${fs ? "h-[calc(100dvh-3rem)]" : "max-h-[78dvh]"}`}
        style={{ background: "var(--bg-sunken)" }}
        tabIndex={0}
        onKeyDown={onKey}
      >
        {state === "loading" && (
          <div className="p-6">
            <div className="skeleton mx-auto aspect-[1/1.3] w-full max-w-2xl" aria-label="Loading PDF" />
          </div>
        )}
        {state === "error" && (
          <div className="p-6 text-sm">
            <p className="muted">The PDF could not be rendered in this browser.</p>
            <a className="btn mt-3" href={downloadHref}>
              Download the PDF
            </a>
          </div>
        )}
        <canvas
          ref={canvas}
          className={`mx-auto block ${state === "ready" ? "" : "hidden"}`}
          aria-label={`Page ${page} of ${title}`}
        />
      </div>
      <figcaption className="subtle flex items-center justify-between gap-3 px-3 py-2 text-xs">
        <span className="truncate">{title}</span>
        <span className="hidden sm:inline">← → to turn pages</span>
      </figcaption>
    </figure>
  );
}