import * as React from "react";

import { cva, VariantProps } from "class-variance-authority";

import { cn } from "../../lib/utils";
import { ChevronLeftIcon, ChevronRightIcon } from "@astraicons/react/linear";

const paginationVariants = cva(
  "inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      size: {
        sm: "text-xs leading-[1.125rem]",
        md: "text-sm leading-6",
        lg: "text-base leading-6",
      },
    },
    defaultVariants: {
      size: "md",
    },
  }
);

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
);
Pagination.displayName = "Pagination";

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul"> & VariantProps<typeof paginationVariants>
>(({ className, size, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn(paginationVariants({ size }), "", className)}
    {...props}
  />
));
PaginationContent.displayName = "PaginationContent";

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
));
PaginationItem.displayName = "PaginationItem";

const paginationLinkVariants = cva(
  "flex items-center justify-center w-full transition-colors aspect-square",
  {
    variants: {
      variant: {
        primary: "text-primary-500 hover:text-primary-600",
        outline: "text-primary-500 hover:text-primary-600",
      },
      size: {
        sm: "h-6 text-xs leading-[1.125rem] rounded-lg",
        md: " text-sm leading-6 h-8 rounded-xl",
        lg: "text-base leading-6 h-9 rounded-xl",
      },
      isActive: {
        true: "",
        false: "text-grayscale-textIcon-body hover:text-primary-500",
      },
    },
    compoundVariants: [
      {
        isActive: true,
        variant: "primary",
        className: "bg-primary-500 text-white hover:text-white",
      },
      {
        isActive: true,
        variant: "outline",
        className:
          "text-primary-500 hover:text-primary-500 bg-white dark:bg-grayscale-surface",
      },
    ],
    defaultVariants: {
      isActive: false,
      variant: "primary",
      size: "md",
    },
  }
);

type PaginationLinkProps = {
  isActive?: boolean;
  variant?: "primary" | "outline";
  size?: "sm" | "md" | "lg";
} & React.ComponentProps<"a"> & { children: React.ReactNode };

const PaginationLink = ({
  variant,
  className,
  isActive,
  size = "md",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      size === "sm"
        ? isActive
          ? "rounded-xl bg-gradient-to-br from-primary-500"
          : ""
        : size === "md"
          ? isActive
            ? "rounded-2xl bg-gradient-to-br from-primary-500"
            : ""
          : size === "lg"
            ? isActive
              ? "rounded-2xl bg-gradient-to-br from-primary-500"
              : ""
            : "",
      "flex justify-center items-center relative p-[0.1875rem]"
    )}
    {...props}
  >
    <div
      className={cn(
        paginationLinkVariants({ variant, size, isActive }),
        "",
        className
      )}
    >
      {props.children}
    </div>
  </a>
);
PaginationLink.displayName = "PaginationLink";

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<"a">) => (
  <a
    aria-label="Go to previous page"
    className={cn("flex gap-2 px-2.5 group", className)}
    {...props}
  >
    <span className="text-grayscale-textIcon-subtitle group-hover:text-primary-500 transition-colors">
      <ChevronLeftIcon className="size-6" />
    </span>
    <span className="text-grayscale-textIcon-body group-hover:text-primary-500 transition-colors my-auto">
      Previous
    </span>
  </a>
);
PaginationPrevious.displayName = "PaginationPrevious";

const PaginationNext = ({ className, ...props }: React.ComponentProps<"a">) => (
  <a
    aria-label="Go to next page"
    className={cn("flex gap-2 px-2.5 group", className)}
    {...props}
  >
    <span className="text-grayscale-textIcon-title my-auto group-hover:text-primary-500 transition-colors">
      Next
    </span>
    <span className="text-grayscale-textIcon-subtitle group-hover:text-primary-500 transition-colors">
      <ChevronRightIcon className="size-6" />
    </span>
  </a>
);
PaginationNext.displayName = "PaginationNext";

export {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
};
Components
