// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/Pager.tsx : pagination éditoriale (12 annonces/page)
//   Précédent / numéros avec ellipses / Suivant + rappel « X–Y sur N ».
// -----------------------------------------------------------------------------
import { IcoChevronLeft, IcoChevronRight } from "./Icons";

/** 1 … 4 [5] 6 … 12 — fenêtre autour de la page courante, bornes toujours visibles */
function pageItems(page: number, pages: number): (number | "…")[] {
  if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
  const win = new Set<number>([1, 2, page - 1, page, page + 1, pages - 1, pages]);
  const items: (number | "…")[] = [];
  let prev = 0;
  for (let n = 1; n <= pages; n++) {
    if (!win.has(n)) continue;
    if (prev && n - prev > 1) items.push("…");
    items.push(n);
    prev = n;
  }
  return items;
}

export default function Pager({ page, pageSize, total, onPage }: {
  page: number;
  pageSize: number;
  total: number;
  onPage: (p: number) => void;
}) {
  const pages = Math.max(1, Math.ceil(total / pageSize));
  if (pages <= 1) return null;
  const from = (page - 1) * pageSize + 1;
  const to = Math.min(page * pageSize, total);
  return (
    <nav className="pager" aria-label="Pagination des résultats">
      <span className="pager-info">
        {from}–{to} <em>sur</em> {total.toLocaleString("fr-CA")}
      </span>
      <div className="pager-nav">
        <button
          className="pager-btn pager-arrow"
          disabled={page <= 1}
          onClick={() => onPage(page - 1)}
          aria-label="Page précédente"
        >
          <IcoChevronLeft size={14} />
        </button>
        {pageItems(page, pages).map((it, i) =>
          it === "…" ? (
            <span key={`e${i}`} className="pager-ellipsis" aria-hidden="true">…</span>
          ) : (
            <button
              key={it}
              className={`pager-btn ${it === page ? "on" : ""}`}
              aria-current={it === page ? "page" : undefined}
              onClick={() => it !== page && onPage(it)}
            >
              {it}
            </button>
          ),
        )}
        <button
          className="pager-btn pager-arrow"
          disabled={page >= pages}
          onClick={() => onPage(page + 1)}
          aria-label="Page suivante"
        >
          <IcoChevronRight size={14} />
        </button>
      </div>
    </nav>
  );
}