import { FC } from "react";
import ReactPaginate, { ReactPaginateProps } from "react-paginate";

type PaginationVariant = "default" | "tenders";

interface IProps {
  currentPage: number;
  totalPages: number;
  onPageChange: ReactPaginateProps["onPageChange"];
  pageRangeDisplayed?: number;
  marginPagesDisplayed?: number;
  pageLabelBuilder?: ReactPaginateProps["pageLabelBuilder"];
  variant?: PaginationVariant;
}

const activeClassNames: Record<PaginationVariant, string> = {
  default:
    "flex h-9 min-w-9 items-center justify-center rounded-xl border border-white/35 bg-gradient-to-br from-primary/85 via-primary/75 to-primary/65 px-3 text-sm font-semibold !text-white shadow-theme-xs shadow-primary/20 backdrop-blur-md transition-all duration-300 before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-1/2 before:rounded-t-xl before:bg-gradient-to-b before:from-white/30 before:to-transparent dark:border-white/20 dark:before:from-white/20",
  tenders:
    "pagination-tenders-active relative flex h-9 min-w-9 items-center justify-center rounded-xl border border-white/35 !bg-gradient-to-br !from-primary/85 !via-primary/75 !to-primary/65 px-3 text-sm font-semibold !text-white shadow-theme-xs shadow-primary/20 backdrop-blur-md transition-all duration-300 before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-1/2 before:rounded-t-xl before:bg-gradient-to-b before:from-white/30 before:to-transparent hover:!border-white/35 hover:!text-white dark:!from-primary/85 dark:!via-primary/75 dark:!to-primary/65 dark:border-white/20 dark:before:from-white/20",
};

const activeLinkClassNames: Record<PaginationVariant, string | undefined> = {
  default: undefined,
  tenders: "!text-white",
};

/** Full-cell hit target: styles live on <li>, but react-paginate puts clicks on the inner <a>. */
const pageLinkClassName =
  "absolute inset-0 z-[1] flex cursor-pointer items-center justify-center select-none";

const Pagination: FC<IProps> = ({
  totalPages,
  currentPage,
  onPageChange,
  pageRangeDisplayed = 5,
  marginPagesDisplayed = 3,
  pageLabelBuilder,
  variant = "default",
}) => {
  return (
    <nav data-pagination-variant={variant} aria-label="Pagination">
      <ReactPaginate
        key={currentPage}
        pageCount={totalPages}
        forcePage={currentPage}
        nextLabel="›"
        previousLabel="‹"
        pageRangeDisplayed={pageRangeDisplayed}
        marginPagesDisplayed={marginPagesDisplayed}
        pageLabelBuilder={pageLabelBuilder}
        activeClassName={activeClassNames[variant]}
        activeLinkClassName={activeLinkClassNames[variant]}
        onPageChange={(e) => {
          if (!onPageChange) return;
          window.scrollTo({ top: 0, behavior: "smooth" });
          onPageChange(e);
        }}
        className="mt-2 flex w-full items-center justify-center gap-2 text-sm text-gray-dark dark:text-white"
        nextClassName="relative flex h-9 min-w-9 items-center justify-center rounded-xl border border-stroke/80 bg-white/70 px-2 text-sm font-semibold text-dark shadow-theme-xs backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/35 hover:text-primary dark:border-dark-3 dark:bg-dark-2/70 dark:text-white dark:hover:bg-white/[0.1]"
        previousClassName="relative flex h-9 min-w-9 items-center justify-center rounded-xl border border-stroke/80 bg-white/70 px-2 text-sm font-semibold text-dark shadow-theme-xs backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/35 hover:text-primary dark:border-dark-3 dark:bg-dark-2/70 dark:text-white dark:hover:bg-white/[0.1]"
        pageClassName="relative flex h-9 min-w-9 items-center justify-center rounded-xl border border-stroke/80 bg-white/70 px-3 text-sm font-semibold text-dark shadow-theme-xs backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/35 hover:text-primary dark:border-dark-3 dark:bg-dark-2/70 dark:text-white dark:hover:bg-white/[0.1]"
        pageLinkClassName={pageLinkClassName}
        previousLinkClassName={pageLinkClassName}
        nextLinkClassName={pageLinkClassName}
      />
    </nav>
  );
};

export default Pagination;
