import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
} from "@/components/ui/pagination";
import { Button } from "@/components/ui/button";
import { formatNumber } from "@/lib/format";
import { ordersTexts } from "@/lib/i18n/orders";
import { cn } from "@/lib/utils";
import { pageWindow, withParams, type QueryParams } from "./query";

/** Server-side pagination: every control is a real link that changes `?page`. */
export function PaginationBar({
  pathname,
  params,
  page,
  perPage,
  total,
  className,
}: {
  pathname: string;
  params: QueryParams;
  page: number;
  perPage: number;
  total: number;
  className?: string;
}) {
  const pages = Math.max(1, Math.ceil(total / perPage));
  const current = Math.min(Math.max(1, page), pages);
  const from = total === 0 ? 0 : (current - 1) * perPage + 1;
  const to = Math.min(total, current * perPage);

  const range = ordersTexts.showingRange
    .replace("{from}", formatNumber(from, 0))
    .replace("{to}", formatNumber(to, 0))
    .replace("{total}", formatNumber(total, 0));

  const href = (target: number) =>
    withParams(pathname, params, { page: target <= 1 ? null : target });

  return (
    <div
      className={cn(
        "flex flex-col items-center justify-between gap-3 border-t px-4 py-3 sm:flex-row",
        className,
      )}
    >
      <p className="text-xs text-muted-foreground">{range}</p>

      {pages > 1 ? (
        <Pagination className="mx-0 w-auto justify-end">
          <PaginationContent>
            <PaginationItem>
              {current > 1 ? (
                <Button asChild variant="ghost" size="sm" className="gap-1 px-2">
                  <Link href={href(current - 1)} aria-label="Previous page">
                    <ChevronLeft className="size-4" />
                    <span className="hidden sm:inline">Prev</span>
                  </Link>
                </Button>
              ) : (
                <Button variant="ghost" size="sm" disabled className="gap-1 px-2">
                  <ChevronLeft className="size-4" />
                  <span className="hidden sm:inline">Prev</span>
                </Button>
              )}
            </PaginationItem>

            {pageWindow(current, pages).map((item, index) =>
              item === "gap" ? (
                <PaginationItem key={`gap-${index}`}>
                  <PaginationEllipsis />
                </PaginationItem>
              ) : (
                <PaginationItem key={item}>
                  <Button
                    asChild
                    variant={item === current ? "outline" : "ghost"}
                    size="icon"
                    className={cn(
                      "size-8 font-mono text-xs tabular-nums",
                      item === current && "border-primary/40 text-foreground",
                    )}
                  >
                    <Link
                      href={href(item)}
                      aria-current={item === current ? "page" : undefined}
                    >
                      {item}
                    </Link>
                  </Button>
                </PaginationItem>
              ),
            )}

            <PaginationItem>
              {current < pages ? (
                <Button asChild variant="ghost" size="sm" className="gap-1 px-2">
                  <Link href={href(current + 1)} aria-label="Next page">
                    <span className="hidden sm:inline">Next</span>
                    <ChevronRight className="size-4" />
                  </Link>
                </Button>
              ) : (
                <Button variant="ghost" size="sm" disabled className="gap-1 px-2">
                  <span className="hidden sm:inline">Next</span>
                  <ChevronRight className="size-4" />
                </Button>
              )}
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      ) : null}
    </div>
  );
}

export default PaginationBar;