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

/** URL-driven pagination: keeps every other search param. Touch targets ≥ 44 px on mobile. */
export function Pagination({ page, pageSize, total, basePath, params, className }: { page: number; pageSize: number; total: number; basePath: string; params: Record<string, string | undefined>; className?: string }) {
  const pages = Math.max(1, Math.ceil(total / pageSize));
  if (pages <= 1) return null;
  const href = (p: number) => {
    const sp = new URLSearchParams();
    for (const [k, v] of Object.entries(params)) if (v) sp.set(k, v);
    if (p > 1) sp.set('page', String(p));
    else sp.delete('page');
    const qs = sp.toString();
    return qs ? `${basePath}?${qs}` : basePath;
  };
  const from = (page - 1) * pageSize + 1;
  const to = Math.min(total, page * pageSize);
  const btn = 'inline-flex h-10 min-w-[44px] items-center justify-center gap-1 rounded-md border border-border bg-elevated px-3 text-xs font-medium hover:bg-sunken aria-disabled:pointer-events-none aria-disabled:opacity-40 md:h-8 md:min-w-0';
  const around: number[] = [];
  for (let p = Math.max(1, page - 2); p <= Math.min(pages, page + 2); p++) around.push(p);
  return (
    <nav className={cn('mt-4 flex flex-wrap items-center justify-between gap-3 text-xs text-muted', className)} aria-label="Pagination">
      <span className="num">
        {from.toLocaleString('en-US')}–{to.toLocaleString('en-US')} of {total.toLocaleString('en-US')}
      </span>
      <div className="flex items-center gap-1">
        <Link href={href(Math.max(1, page - 1))} aria-disabled={page <= 1} className={btn} aria-label="Previous page">
          <ChevronLeft className="h-3.5 w-3.5" />
          <span className="hidden sm:inline">Prev</span>
        </Link>
        {around[0]! > 1 ? (
          <>
            <Link href={href(1)} className={cn(btn, 'num')}>
              1
            </Link>
            {around[0]! > 2 ? <span className="px-1 text-subtle">…</span> : null}
          </>
        ) : null}
        {around.map((p) => (
          <Link key={p} href={href(p)} aria-current={p === page ? 'page' : undefined} className={cn(btn, 'num', p === page && 'border-fg bg-accent text-accent-fg hover:bg-accent')}>
            {p}
          </Link>
        ))}
        {around[around.length - 1]! < pages ? (
          <>
            {around[around.length - 1]! < pages - 1 ? <span className="px-1 text-subtle">…</span> : null}
            <Link href={href(pages)} className={cn(btn, 'num')}>
              {pages.toLocaleString('en-US')}
            </Link>
          </>
        ) : null}
        <Link href={href(Math.min(pages, page + 1))} aria-disabled={page >= pages} className={btn} aria-label="Next page">
          <span className="hidden sm:inline">Next</span>
          <ChevronRight className="h-3.5 w-3.5" />
        </Link>
      </div>
    </nav>
  );
}