import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { fmtInt } from "@/lib/format";
import { cn } from "./cn";

export interface PaginationProps {
  page: number;
  perPage: number;
  total: number;
  /** returns href for a page number */
  hrefFor: (page: number) => string;
  className?: string;
  label?: string;
}

/** Compact pager: "1–50 of 1,234" + prev/next + a few numbered links on ≥ sm. */
export function Pagination({ page, perPage, total, hrefFor, className, label = "results" }: PaginationProps) {
  const pages = Math.max(1, Math.ceil(total / Math.max(1, perPage)));
  if (total <= 0) return null;
  const from = (page - 1) * perPage + 1;
  const to = Math.min(total, page * perPage);
  const nums = new Set<number>([1, pages, page, page - 1, page + 1, page - 2, page + 2].filter((n) => n >= 1 && n <= pages));
  const list = Array.from(nums).sort((a, b) => a - b);
  return (
    <nav aria-label="Pagination" className={cn("flex items-center justify-between gap-3 border-t border-hair py-3 text-[12.5px]", className)}>
      <div className="figure text-ink-3">
        {fmtInt(from)}–{fmtInt(to)} of {fmtInt(total)} {label}
      </div>
      <div className="flex items-center gap-1">
        <PageLink href={page > 1 ? hrefFor(page - 1) : null} label="Previous page">
          <ChevronLeft className="size-4" />
        </PageLink>
        <div className="hidden items-center gap-1 sm:flex">
          {list.map((n, i) => {
            const prev = list[i - 1];
            const gap = prev !== undefined && n - prev > 1;
            return (
              <span key={n} className="flex items-center gap-1">
                {gap && <span className="px-1 text-ink-4">…</span>}
                <Link
                  href={hrefFor(n)}
                  aria-current={n === page ? "page" : undefined}
                  scroll={false}
                  className={cn("figure inline-flex h-8 min-w-8 items-center justify-center rounded-sm border px-2", n === page ? "border-ink bg-ink text-paper" : "border-hair text-ink-2 hover:bg-surface-2")}
                >
                  {n}
                </Link>
              </span>
            );
          })}
        </div>
        <span className="figure px-1 text-ink-3 sm:hidden">
          {page} / {pages}
        </span>
        <PageLink href={page < pages ? hrefFor(page + 1) : null} label="Next page">
          <ChevronRight className="size-4" />
        </PageLink>
      </div>
    </nav>
  );
}

function PageLink({ href, label, children }: { href: string | null; label: string; children: React.ReactNode }) {
  const cls = "inline-flex size-10 items-center justify-center rounded-sm border border-hair text-ink-2 sm:size-9";
  if (!href) return <span className={cn(cls, "opacity-40")}>{children}</span>;
  return (
    <Link href={href} aria-label={label} scroll={false} className={cn(cls, "hover:bg-surface-2")}>
      {children}
    </Link>
  );
}