import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Pagination minimale — précédent / page courante / suivant. Pas de jump
 * direct vers une page (V1 : on n'en a pas besoin, les listes sont triées
 * par actionnabilité, l'user lit le top puis pagine séquentiellement).
 *
 * S'efface si une seule page (ou zéro) — pas la peine d'encombrer.
 */
type PaginationProps = {
  page: number;
  total: number;
  pageSize: number;
  onPageChange: (next: number) => void;
  className?: string;
  /** Label personnalisé (ex: "factures", "clients"). Utilisé pour le compteur. */
  itemLabel?: string;
};

export function Pagination({
  page,
  total,
  pageSize,
  onPageChange,
  className,
  itemLabel = "lignes",
}: PaginationProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  if (totalPages <= 1) return null;

  const start = (page - 1) * pageSize + 1;
  const end = Math.min(page * pageSize, total);

  return (
    <nav
      aria-label="Pagination"
      className={cn(
        "flex items-center justify-between gap-3 px-1 py-3",
        className,
      )}
    >
      <p className="text-[12.5px] text-ink-3 tabular-nums">
        <span className="font-medium text-ink-2">
          {start.toLocaleString("fr-FR")}–{end.toLocaleString("fr-FR")}
        </span>{" "}
        sur {total.toLocaleString("fr-FR")} {itemLabel}
      </p>
      <div className="flex items-center gap-1">
        <PageButton
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
          aria-label="Page précédente"
        >
          <ChevronLeft size={14} aria-hidden="true" />
        </PageButton>
        <span className="px-2 text-[12.5px] text-ink-2 tabular-nums">
          {page} / {totalPages}
        </span>
        <PageButton
          disabled={page >= totalPages}
          onClick={() => onPageChange(page + 1)}
          aria-label="Page suivante"
        >
          <ChevronRight size={14} aria-hidden="true" />
        </PageButton>
      </div>
    </nav>
  );
}

function PageButton({
  disabled,
  onClick,
  children,
  ...rest
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={cn(
        "size-8 inline-flex items-center justify-center rounded-sharp border border-line bg-white text-ink-2",
        "transition-[background-color,border-color,color] duration-100",
        "hover:border-rubis hover:text-rubis cursor-pointer",
        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-line disabled:hover:text-ink-2",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rubis-glow",
      )}
      {...rest}
    >
      {children}
    </button>
  );
}
