import Link from "next/link";

function ChevronIcon({ direction, className }: { direction: "next" | "prev"; className?: string }) {
  const d = direction === "next" ? "M19 12H5m0 0 6-6m-6 6 6 6" : "M5 12h14m0 0-6-6m6 6-6 6";
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
      <path d={d} stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

type PaginationProps = {
  page: number;
  totalPages: number;
} & (
  | { hrefFor: (page: number) => string; onPageChange?: never }
  | { onPageChange: (page: number) => void; hrefFor?: never }
);

/**
 * Numbered pagination, RTL-aware. Works two ways: give it `hrefFor` for a
 * plain server-rendered listing (real links, works without JS), or
 * `onPageChange` for a page that already manages its own list client-side
 * (e.g. alongside a category filter).
 *
 * Renders nothing when everything already fits on one page — there's no
 * reason to show page controls for content that doesn't need paging yet.
 */
export function Pagination({ page, totalPages, hrefFor, onPageChange }: PaginationProps) {
  if (totalPages <= 1) return null;

  const prevPage = Math.max(1, page - 1);
  const nextPage = Math.min(totalPages, page + 1);
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  const controlClass = (current: boolean, disabled = false) =>
    `flex h-11 min-w-11 items-center justify-center rounded-full px-3 text-sm transition-colors duration-300 ${
      current
        ? "bg-gold text-white"
        : disabled
          ? "pointer-events-none text-muted/30"
          : "text-ink hover:bg-sand"
    }`;

  const renderItem = (target: number, content: React.ReactNode, ariaLabel: string, current = false) => {
    if (hrefFor) {
      return (
        <Link
          key={ariaLabel}
          href={hrefFor(target)}
          aria-label={ariaLabel}
          aria-current={current}
          className={controlClass(current)}
        >
          {content}
        </Link>
      );
    }
    return (
      <button
        key={ariaLabel}
        type="button"
        onClick={() => onPageChange(target)}
        aria-label={ariaLabel}
        aria-current={current}
        className={controlClass(current)}
      >
        {content}
      </button>
    );
  };

  return (
    <nav aria-label="صفحه‌بندی" className="mt-14 flex items-center justify-center gap-2 lg:mt-20">
      {page === 1 ? (
        <span className={controlClass(false, true)}>
          <ChevronIcon direction="prev" className="h-4 w-4" />
        </span>
      ) : (
        renderItem(prevPage, <ChevronIcon direction="prev" className="h-4 w-4" />, "صفحه قبل")
      )}

      {pages.map((p) => renderItem(p, p, `صفحه ${p}`, p === page))}

      {page === totalPages ? (
        <span className={controlClass(false, true)}>
          <ChevronIcon direction="next" className="h-4 w-4" />
        </span>
      ) : (
        renderItem(nextPage, <ChevronIcon direction="next" className="h-4 w-4" />, "صفحه بعد")
      )}
    </nav>
  );
}
