"use client";
import * as React from "react";
import { motion } from "motion/react";
import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const Ctx = React.createContext("");

export function Pagination({ className, ...p }: React.ComponentProps<"nav">) {
  const id = React.useId();
  return (
    <Ctx.Provider value={id}>
      <nav role="navigation" aria-label="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...p} />
    </Ctx.Provider>
  );
}
export function PaginationContent({ className, ...p }: React.ComponentProps<"ul">) {
  return (
    <ul className={cn("flex flex-row flex-wrap items-center justify-center gap-0.5 rounded-[1.4rem] bg-surface-sunken p-1 shadow-well sm:gap-1.5 sm:rounded-full sm:p-1.5", className)} {...p} />
  );
}
export function PaginationItem(p: React.ComponentProps<"li">) {
  return <li {...p} />;
}

type PaginationLinkProps = {
  isActive?: boolean;
  size?: "icon" | "default";
  disabled?: boolean;
  /** Separate sliding-pill group, e.g. when rendering a compact and a full page list side by side. */
  group?: string;
} & React.ComponentProps<"a">;

export function PaginationLink({ className, isActive, size = "icon", disabled, group = "", children, ...p }: PaginationLinkProps) {
  const id = React.useContext(Ctx);
  return (
    <motion.a
      aria-current={isActive ? "page" : undefined}
      aria-disabled={disabled || undefined}
      tabIndex={disabled ? -1 : undefined}
      data-active={isActive || undefined}
      whileTap={disabled ? undefined : { scale: 0.92 }}
      transition={springs.squish}
      className={cn(
        "relative inline-flex h-10 cursor-pointer items-center justify-center gap-1 rounded-full text-sm font-bold text-on-surface-muted transition-colors hover:bg-surface hover:text-on-surface hover:shadow-clay-sm focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 data-[active]:text-on-primary data-[active]:hover:bg-transparent data-[active]:hover:shadow-none aria-disabled:pointer-events-none aria-disabled:opacity-40 [&_svg]:size-4 tabular-nums",
        size === "icon" ? "min-w-9 px-1.5 sm:min-w-10 sm:px-2" : "px-3 sm:px-4",
        className
      )}
      {...(p as React.ComponentProps<typeof motion.a>)}
    >
      {isActive && (
        <motion.span layoutId={`${id}-page${group}`} className="absolute inset-0 rounded-full bg-primary shadow-clay-sm" transition={springs.snappy} />
      )}
      <span className="relative inline-flex items-center gap-1">{children}</span>
    </motion.a>
  );
}
export function PaginationPrevious({ className, ...p }: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink aria-label="Go to previous page" size="default" className={cn("pl-3", className)} {...p}>
      <CaretLeftIcon weight="bold" />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  );
}
export function PaginationNext({ className, ...p }: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink aria-label="Go to next page" size="default" className={cn("pr-3", className)} {...p}>
      <span className="hidden sm:block">Next</span>
      <CaretRightIcon weight="bold" />
    </PaginationLink>
  );
}
export function PaginationEllipsis({ className, ...p }: React.ComponentProps<"span">) {
  return (
    <span aria-hidden className={cn("grid h-10 w-6 place-items-center text-on-surface-muted sm:w-10", className)} {...p}>
      <DotsThreeIcon weight="bold" className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  );
}

/**
 * Which page numbers to show. Always the first and last page, `siblings` pages either side of the
 * current one, and "ellipsis" where pages are skipped. The length stays constant so the bar doesn't jump.
 *   getPageRange(10, 20) -> [1, "ellipsis", 9, 10, 11, "ellipsis", 20]
 */
export function getPageRange(current: number, total: number, siblings = 1): (number | "ellipsis")[] {
  const slots = siblings * 2 + 5; // first, last, current, 2 ellipses, siblings
  if (total <= slots) return Array.from({ length: total }, (_, i) => i + 1);
  const left = Math.max(current - siblings, 1);
  const right = Math.min(current + siblings, total);
  const showLeftDots = left > 3;
  const showRightDots = right < total - 2;
  const edge = siblings * 2 + 3;
  if (!showLeftDots) return [...Array.from({ length: edge }, (_, i) => i + 1), "ellipsis", total];
  if (!showRightDots) return [1, "ellipsis", ...Array.from({ length: edge }, (_, i) => total - edge + 1 + i)];
  return [1, "ellipsis", ...Array.from({ length: right - left + 1 }, (_, i) => left + i), "ellipsis", total];
}

/**
 * "Go to page" field: a small sunken input that jumps on Enter or blur, clamped to 1..total.
 * Invalid entries shake and reset.
 */
export function PaginationJump({
  page,
  total,
  onPageChange,
  label = "Go to",
  className,
}: {
  page: number;
  total: number;
  onPageChange: (page: number) => void;
  label?: string;
  className?: string;
}) {
  const [value, setValue] = React.useState(String(page));
  const [lastPage, setLastPage] = React.useState(page);
  const [shake, setShake] = React.useState(0);
  const id = React.useId();
  // Keep the field in sync when the page changes elsewhere.
  if (page !== lastPage) {
    setLastPage(page);
    setValue(String(page));
  }
  const commit = () => {
    const n = Number(value);
    if (!Number.isInteger(n) || n < 1 || n > total) {
      setShake((s) => s + 1);
      setValue(String(page));
      return;
    }
    if (n !== page) onPageChange(n);
  };
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        commit();
      }}
      className={cn("inline-flex items-center gap-2 text-sm font-semibold text-on-surface-muted", className)}
    >
      <label htmlFor={id} className="whitespace-nowrap">{label}</label>
      <motion.input
        key={shake}
        id={id}
        inputMode="numeric"
        aria-label={`Page number, 1 to ${total}`}
        value={value}
        onFocus={(e) => e.currentTarget.select()}
        onChange={(e) => setValue(e.target.value.replace(/[^0-9]/g, "").slice(0, String(total).length))}
        onBlur={commit}
        animate={shake ? { x: [0, -6, 6, -4, 4, 0] } : undefined}
        transition={{ duration: 0.35 }}
        className="h-10 w-14 rounded-full bg-surface-sunken text-center font-mono font-bold text-on-surface shadow-well outline-none focus-visible:ring-4 focus-visible:ring-ring/40"
      />
      <span className="whitespace-nowrap">of {total}</span>
    </form>
  );
}
Installation
