import Link from "next/link";
import { pageHref, pageSizeOptions, type PaginationState } from "@/lib/pagination";

export function PaginationControls({
  pagination,
  pathname,
  params
}: {
  pagination: PaginationState;
  pathname: string;
  params: Record<string, string | string[] | undefined>;
}) {
  const pages = Array.from({ length: pagination.totalPages }, (_, index) => index + 1)
    .filter((page) => page === 1 || page === pagination.totalPages || Math.abs(page - pagination.page) <= 2);

  return (
    <div className="flex flex-col gap-3 border-t border-line px-4 py-3 text-sm text-slate-600 md:flex-row md:items-center md:justify-between">
      <p>
        Showing {pagination.start}-{pagination.end} of {pagination.total} records
      </p>
      <div className="flex flex-wrap items-center gap-2">
        <span className="label">Rows</span>
        {pageSizeOptions.map((size) => (
          <Link key={size} className={`btn-secondary px-2 py-1 text-xs ${pagination.pageSize === size ? "border-blue-400 bg-blue-50 text-blue-700" : ""}`} href={pageHref(pathname, params, { page: 1, pageSize: size })}>
            {size}
          </Link>
        ))}
        <Link className="btn-secondary px-2 py-1 text-xs" href={pageHref(pathname, params, { page: 1, pageSize: "all" })}>
          All
        </Link>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Link className={`btn-secondary px-2 py-1 text-xs ${pagination.page <= 1 ? "pointer-events-none opacity-50" : ""}`} href={pageHref(pathname, params, { page: pagination.page - 1, pageSize: pagination.pageSize })}>
          Previous
        </Link>
        {pages.map((page, index) => (
          <span key={page} className="flex items-center gap-2">
            {index > 0 && page - pages[index - 1] > 1 ? <span className="text-slate-400">...</span> : null}
            <Link className={`btn-secondary px-2 py-1 text-xs ${pagination.page === page ? "border-blue-400 bg-blue-50 text-blue-700" : ""}`} href={pageHref(pathname, params, { page, pageSize: pagination.pageSize })}>
              {page}
            </Link>
          </span>
        ))}
        <Link className={`btn-secondary px-2 py-1 text-xs ${pagination.page >= pagination.totalPages ? "pointer-events-none opacity-50" : ""}`} href={pageHref(pathname, params, { page: pagination.page + 1, pageSize: pagination.pageSize })}>
          Next
        </Link>
      </div>
    </div>
  );
}