"use client";

import * as React from "react";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { Button } from "./button";

/** Page through results; shows the visible range and previous/next. */
export function Pagination({
  page,
  pageSize,
  total,
  onPageChange,
  hasNext = false,
  className,
}: {
  /** Zero-based page index. */
  page: number;
  pageSize: number;
  /** Total rows when known; null for cursor-based paging. */
  total: number | null;
  onPageChange: (page: number) => void;
  /** For cursor paging: whether another page exists. */
  hasNext?: boolean;
  className?: string;
}) {
  const from = page * pageSize + 1;
  const to = total === null ? (page + 1) * pageSize : Math.min(total, (page + 1) * pageSize);
  const last = total === null ? !hasNext : to >= total;
  return (
    <nav aria-label="Pagination" className={cn("flex items-center justify-between gap-3 text-sm", className)}>
      <p className="text-muted-foreground tabular-nums">
        {total === 0 ? "No results" : `${from.toLocaleString()}–${to.toLocaleString()}${total === null ? "" : ` of ${total.toLocaleString()}`}`}
      </p>
      <div className="flex items-center gap-1">
        <Button variant="ghost" size="icon-sm" aria-label="Previous page" disabled={page === 0} onClick={() => onPageChange(page - 1)}>
          <IconChevronLeft />
        </Button>
        <Button variant="ghost" size="icon-sm" aria-label="Next page" disabled={last} onClick={() => onPageChange(page + 1)}>
          <IconChevronRight />
        </Button>
      </div>
    </nav>
  );
}

/** Where you are: a trail of links ending in the current page. */
export function Breadcrumbs({
  items,
  className,
}: {
  items: Array<{ label: React.ReactNode; onSelect?: () => void }>;
  className?: string;
}) {
  return (
    <nav aria-label="Breadcrumb" className={className}>
      <ol className="flex flex-wrap items-center gap-1 text-sm">
        {items.map((item, index) => {
          const last = index === items.length - 1;
          return (
            <li key={index} className="flex min-w-0 items-center gap-1">
              {last || !item.onSelect ? (
                <span aria-current={last ? "page" : undefined} className={cn("truncate", last ? "font-medium text-foreground" : "text-muted-foreground")}>
                  {item.label}
                </span>
              ) : (
                <button
                  type="button"
                  onClick={item.onSelect}
                  className="truncate rounded-md px-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                >
                  {item.label}
                </button>
              )}
              {!last ? <IconChevronRight aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground/60" /> : null}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}