"use client";

export function pageNumbers(total: number, current: number) {
  const pages: number[] = [];
  const push = (n: number) => pages.push(n);
  push(1);
  for (let n = current - 2; n <= current + 2; n++) {
    if (n > 1 && n < total) push(n);
  }
  if (total > 1) push(total);
  return [...new Set(pages)];
}

export function TablePagination({
  total,
  page,
  pageSize,
  onChange,
  label,
}: {
  total: number;
  page: number;
  pageSize: number;
  onChange: (page: number) => void;
  label: string;
}) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const safePage = Math.min(page, totalPages);
  const start = (safePage - 1) * pageSize + 1;
  const end = Math.min(safePage * pageSize, total);

  if (total === 0) return null;

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--color-hairline)] bg-[var(--color-canvas-soft)] px-4 py-3">
      <p className="text-[11px] font-medium text-[var(--color-ink-mute)]">
        Showing <span className="font-medium text-[var(--color-ink)]">{start}–{end}</span> of <span className="font-medium text-[var(--color-ink)]">{total}</span> {label}
      </p>
      {totalPages > 1 ? (
        <div className="flex items-center gap-1">
          <button
            onClick={() => onChange(safePage - 1)}
            disabled={safePage <= 1}
            className="flex h-8 w-8 items-center justify-center rounded-[6px] border border-[var(--color-hairline)] bg-white text-[var(--color-ink-mute)] transition hover:border-[var(--color-ink)] hover:text-[var(--color-ink)] disabled:pointer-events-none disabled:opacity-40"
            aria-label="Previous page"
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
          </button>
          {pageNumbers(totalPages, safePage).map((n) => (
            <button
              key={n}
              onClick={() => onChange(n)}
              className={"h-8 min-w-8 rounded-[6px] px-2 text-[11.5px] font-medium transition " + (n === safePage ? "bg-[var(--color-canvas-night)] text-[var(--color-on-dark)]" : "border border-[var(--color-hairline)] bg-white text-[var(--color-ink-mute)] hover:border-[var(--color-ink)] hover:text-[var(--color-ink)]")}
            >
              {n}
            </button>
          ))}
          <button
            onClick={() => onChange(safePage + 1)}
            disabled={safePage >= totalPages}
            className="flex h-8 w-8 items-center justify-center rounded-[6px] border border-[var(--color-hairline)] bg-white text-[var(--color-ink-mute)] transition hover:border-[var(--color-ink)] hover:text-[var(--color-ink)] disabled:pointer-events-none disabled:opacity-40"
            aria-label="Next page"
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
          </button>
        </div>
      ) : null}
    </div>
  );
}