import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

type PaginationType = "numeric" | "simple" | "summary"
type PaginationVariant = "soft" | "ghost"
type PaginationPage =
  | number
  | "ellipsis"
  | {
      type: "page"
      value: number
      label?: React.ReactNode
      ariaLabel?: string
    }
  | {
      type: "ellipsis"
      label?: React.ReactNode
      ariaLabel?: string
    }

type PaginationDirection = "ltr" | "rtl"

const defaultPaginationPages: PaginationPage[] = [1, 2, 3, 4, "ellipsis", 10]

const paginationVariants = cva(
  [
    "flex max-w-full items-center",
    "text-[length:var(--bh-pagination-font-size)]",
    "leading-[var(--bh-pagination-line-height)]",
    "tracking-[var(--bh-pagination-letter-spacing)]",
  ],
  {
    variants: {
      type: {
        numeric:
          "w-[var(--bh-pagination-numeric-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
        simple:
          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
        summary:
          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
      },
      showCaption: {
        true: "",
        false: "justify-center",
      },
    },
    compoundVariants: [
      {
        type: ["simple", "summary"],
        showCaption: false,
        class: "justify-between",
      },
    ],
    defaultVariants: {
      type: "numeric",
      showCaption: true,
    },
  }
)

const paginationControlVariants = cva(
  [
    "relative inline-flex h-[var(--bh-pagination-item-size)] shrink-0 items-center justify-center",
    "whitespace-nowrap rounded-[var(--bh-pagination-radius)]",
    "text-[color:var(--bh-pagination-control-content)]",
    "text-[length:var(--bh-pagination-font-size)] font-[var(--bh-pagination-label-font-weight)]",
    "leading-[var(--bh-pagination-line-height)] tracking-[var(--bh-pagination-letter-spacing)]",
    "outline-none transition-[background-color,border-color,color,box-shadow]",
    "focus-visible:shadow-[var(--shadow-pagination-focus)]",
    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
    "[&_svg]:pointer-events-none [&_svg]:size-[var(--bh-pagination-icon-size)] [&_svg]:shrink-0",
    "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
  ],
  {
    variants: {
      variant: {
        soft:
          "bg-[var(--bh-pagination-control-soft-bg)] shadow-[var(--shadow-pagination-control)] hover:bg-[var(--bh-pagination-control-soft-hover)] active:bg-[var(--bh-pagination-control-soft-pressed)]",
        ghost:
          "bg-[var(--bh-pagination-control-ghost-bg)] hover:bg-[var(--bh-pagination-control-ghost-hover)] active:bg-[var(--bh-pagination-control-ghost-pressed)]",
      },
      mode: {
        icon: "w-[var(--bh-pagination-item-size)] p-0",
        text:
          "gap-[var(--bh-pagination-control-text-gap)] px-[var(--bh-pagination-control-text-padding-x)] py-[var(--bh-space-md-8)] rtl:gap-[var(--bh-pagination-control-text-rtl-gap)] rtl:px-[var(--bh-pagination-control-text-rtl-padding-x)]",
      },
    },
    defaultVariants: {
      variant: "soft",
      mode: "text",
    },
  }
)

const paginationControlLabelVariants = cva(
  "min-w-0 whitespace-nowrap",
  {
    variants: {
      variant: {
        soft:
          "px-[var(--bh-pagination-control-label-padding-x)] rtl:px-[var(--bh-pagination-control-label-rtl-padding-x)]",
        ghost: "px-[var(--bh-pagination-control-label-rtl-padding-x)]",
      },
    },
    defaultVariants: {
      variant: "soft",
    },
  }
)

const paginationItemVariants = cva(
  [
    "relative inline-flex size-[var(--bh-pagination-item-size)] shrink-0 items-center justify-center",
    "rounded-[var(--bh-pagination-radius)] border border-transparent text-center",
    "text-[length:var(--bh-pagination-font-size)] font-[var(--bh-pagination-label-font-weight)]",
    "leading-[var(--bh-pagination-line-height)] tracking-[var(--bh-pagination-letter-spacing)]",
    "outline-none transition-[background-color,border-color,color,box-shadow]",
    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
  ],
  {
    variants: {
      active: {
        true:
          "border-[var(--bh-pagination-active-border)] bg-[var(--bh-pagination-active-bg)] text-[var(--bh-pagination-active-content)] shadow-[var(--shadow-pagination-active)]",
        false:
          "bg-[var(--bh-pagination-page-bg)] text-[var(--bh-pagination-page-content)] hover:bg-[var(--bh-pagination-page-hover)] active:bg-[var(--bh-pagination-page-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-pagination-focus)]",
      },
    },
    defaultVariants: {
      active: false,
    },
  }
)

type PaginationProps = Omit<React.ComponentProps<"nav">, "children"> &
  VariantProps<typeof paginationVariants> & {
    type?: PaginationType
    variant?: PaginationVariant
    page?: number
    pages?: PaginationPage[]
    showCaption?: boolean
    caption?: React.ReactNode
    summary?: React.ReactNode
    previousLabel?: React.ReactNode
    nextLabel?: React.ReactNode
    previousAriaLabel?: string
    nextAriaLabel?: string
    previousDisabled?: boolean
    nextDisabled?: boolean
    onPageChange?: (page: number) => void
  }

const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagination({
  className,
  type = "numeric",
  variant = "soft",
  page = 2,
  pages = defaultPaginationPages,
  showCaption = true,
  caption,
  summary,
  previousLabel,
  nextLabel,
  previousAriaLabel,
  nextAriaLabel,
  previousDisabled,
  nextDisabled,
  onPageChange,
  "aria-label": ariaLabel,
  dir,
  ...props
}, ref) {
  const selectedType = type || "numeric"
  const selectedVariant = variant || "soft"
  const selectedDirection = getPaginationDirection(dir)
  const labels = getDefaultPaginationLabels(selectedDirection)
  const captionContent = caption ?? labels.caption
  const summaryContent = summary ?? labels.summary
  const previousContent = previousLabel ?? labels.previous
  const nextContent = nextLabel ?? labels.next

  return (
    <nav
      aria-label={ariaLabel || labels.navigation}
      data-show-caption={showCaption ? "true" : "false"}
      data-slot="pagination"
      data-type={selectedType}
      data-variant={selectedVariant}
      dir={dir}
      ref={ref}
      className={cn(
        paginationVariants({
          type: selectedType,
          showCaption,
          className,
        })
      )}
      {...props}
    >
      {selectedType === "simple" ? (
        <>
          {showCaption ? (
            <PaginationCaption type="simple">{captionContent}</PaginationCaption>
          ) : null}
          <PaginationControls type="actions">
            <PaginationTextButton
              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
              disabled={previousDisabled}
              label={previousContent}
              onClick={() => onPageChange?.(Math.max(1, page - 1))}
              type="previous"
              variant={selectedVariant}
            />
            <PaginationTextButton
              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
              disabled={nextDisabled}
              label={nextContent}
              onClick={() => onPageChange?.(page + 1)}
              type="next"
              variant={selectedVariant}
            />
          </PaginationControls>
        </>
      ) : null}

      {selectedType === "summary" ? (
        <>
          <PaginationTextButton
            ariaLabel={previousAriaLabel || labels.previousAriaLabel}
            disabled={previousDisabled}
            label={previousContent}
            onClick={() => onPageChange?.(Math.max(1, page - 1))}
            type="previous"
            variant={selectedVariant}
          />
          <span
            data-slot="pagination-summary"
            dir="auto"
            className="shrink-0 whitespace-nowrap text-[color:var(--bh-pagination-caption-content)] font-[var(--bh-pagination-caption-font-weight)]"
          >
            {summaryContent}
          </span>
          <PaginationTextButton
            ariaLabel={nextAriaLabel || labels.nextAriaLabel}
            disabled={nextDisabled}
            label={nextContent}
            onClick={() => onPageChange?.(page + 1)}
            type="next"
            variant={selectedVariant}
          />
        </>
      ) : null}

      {selectedType === "numeric" ? (
        <>
          {showCaption ? (
            <PaginationCaption type="numeric">{captionContent}</PaginationCaption>
          ) : null}
          <PaginationControls type="numeric">
            <PaginationIconButton
              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
              disabled={previousDisabled}
              onClick={() => onPageChange?.(Math.max(1, page - 1))}
              type="previous"
              variant={selectedVariant}
            />
            <div
              data-slot="pagination-pages"
              className="flex shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
            >
              {pages.map((item, index) => (
                <PaginationPageItem
                  key={getPaginationPageKey(item, index)}
                  item={item}
                  page={page}
                  onPageChange={onPageChange}
                />
              ))}
            </div>
            <PaginationIconButton
              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
              disabled={nextDisabled}
              onClick={() => onPageChange?.(page + 1)}
              type="next"
              variant={selectedVariant}
            />
          </PaginationControls>
        </>
      ) : null}
    </nav>
  )
})

function PaginationCaption({
  children,
  type,
}: {
  children: React.ReactNode
  type: "numeric" | "simple"
}) {
  return (
    <span
      data-slot="pagination-caption"
      dir="auto"
      className={cn(
        "min-w-0 text-[color:var(--bh-pagination-caption-content)] font-[var(--bh-pagination-caption-font-weight)]",
        type === "numeric"
          ? "w-[var(--bh-pagination-caption-width)] shrink-0"
          : "flex-1"
      )}
    >
      {children}
    </span>
  )
}

function PaginationControls({
  children,
  type,
}: {
  children: React.ReactNode
  type: "actions" | "numeric"
}) {
  return (
    <div
      data-slot="pagination-controls"
      className={cn(
        "flex shrink-0 items-center",
        type === "numeric"
          ? "gap-[var(--bh-pagination-control-gap)]"
          : "gap-[var(--bh-pagination-action-gap)]"
      )}
    >
      {children}
    </div>
  )
}

function PaginationIconButton({
  ariaLabel,
  disabled,
  onClick,
  type,
  variant,
}: {
  ariaLabel: string
  disabled?: boolean
  onClick?: () => void
  type: "previous" | "next"
  variant: PaginationVariant
}) {
  return (
    <button
      aria-label={ariaLabel}
      data-slot="pagination-control"
      disabled={disabled}
      type="button"
      className={cn(paginationControlVariants({ variant, mode: "icon" }))}
      onClick={onClick}
    >
      <PaginationArrowIcon type={type} />
    </button>
  )
}

function PaginationTextButton({
  ariaLabel,
  disabled,
  label,
  onClick,
  type,
  variant,
}: {
  ariaLabel: string
  disabled?: boolean
  label: React.ReactNode
  onClick?: () => void
  type: "previous" | "next"
  variant: PaginationVariant
}) {
  return (
    <button
      aria-label={ariaLabel}
      data-slot="pagination-control"
      disabled={disabled}
      type="button"
      className={cn(paginationControlVariants({ variant, mode: "text" }))}
      onClick={onClick}
    >
      {type === "previous" ? <PaginationArrowIcon type="previous" /> : null}
      <span
        data-slot="pagination-control-label"
        dir="auto"
        className={cn(paginationControlLabelVariants({ variant }))}
      >
        {label}
      </span>
      {type === "next" ? <PaginationArrowIcon type="next" /> : null}
    </button>
  )
}

function PaginationPageItem({
  item,
  page,
  onPageChange,
}: {
  item: PaginationPage
  page: number
  onPageChange?: (page: number) => void
}) {
  const normalizedItem = normalizePaginationPage(item)

  if (normalizedItem.type === "ellipsis") {
    return (
      <span
        aria-label={normalizedItem.ariaLabel || "More pages"}
        data-slot="pagination-ellipsis"
        role="separator"
        className={cn(paginationItemVariants({ active: false }))}
      >
        {normalizedItem.label || "..."}
      </span>
    )
  }

  const isActive = normalizedItem.value === page

  return (
    <button
      aria-current={isActive ? "page" : undefined}
      aria-label={normalizedItem.ariaLabel || `Page ${normalizedItem.value}`}
      data-page={normalizedItem.value}
      data-slot="pagination-page"
      type="button"
      className={cn(paginationItemVariants({ active: isActive }))}
      onClick={() => onPageChange?.(normalizedItem.value)}
    >
      {normalizedItem.label || normalizedItem.value}
    </button>
  )
}

function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
  return (
    <svg
      aria-hidden="true"
      data-rtl-flip="true"
      data-slot="pagination-icon"
      fill="none"
      focusable="false"
      viewBox="0 0 20 20"
    >
      {type === "previous" ? (
        <path
          d="M2.357 5.30332L6.48183 9.42807L5.30333 10.6066L0 5.30332L5.30333 0L6.48183 1.17851L2.357 5.30332Z"
          fill="currentColor"
          transform="translate(6.666 4.697)"
        />
      ) : (
        <path
          d="M4.12482 5.30332L0 1.17851L1.17852 0L6.48182 5.30332L1.17852 10.6066L0 9.42807L4.12482 5.30332Z"
          fill="currentColor"
          transform="translate(6.852 4.697)"
        />
      )}
    </svg>
  )
}

function normalizePaginationPage(item: PaginationPage) {
  if (item === "ellipsis") {
    return { type: "ellipsis" as const }
  }

  if (typeof item === "number") {
    return { type: "page" as const, value: item }
  }

  return item
}

function getPaginationPageKey(item: PaginationPage, index: number) {
  const normalizedItem = normalizePaginationPage(item)

  if (normalizedItem.type === "page") {
    return `page-${normalizedItem.value}`
  }

  return `ellipsis-${index}`
}

function getPaginationDirection(
  dir: React.HTMLAttributes<HTMLElement>["dir"]
): PaginationDirection {
  if (dir === "rtl" || dir === "ltr") {
    return dir
  }

  return "ltr"
}

function getDefaultPaginationLabels(direction: PaginationDirection) {
  if (direction === "rtl") {
    return {
      navigation: "\u0627\u0644\u062a\u0631\u0642\u064a\u0645",
      caption:
        "\u0639\u0631\u0636 1 \u0625\u0644\u0649 10 \u0645\u0646 20 \u0646\u062a\u064a\u062c\u0629",
      summary: "\u0627\u0644\u0635\u0641\u062d\u0629 1 \u0645\u0646 10",
      previous: "\u0645\u0639\u0627\u064a\u0646\u0629",
      next: "\u0627\u0644\u062a\u0627\u0644\u064a",
      previousAriaLabel:
        "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
      nextAriaLabel:
        "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
    }
  }

  return {
    navigation: "Pagination",
    caption: "Showing 1 to 10 of 20 results",
    summary: "Page 1 of 10",
    previous: "Previous",
    next: "Next",
    previousAriaLabel: "Previous page",
    nextAriaLabel: "Next page",
  }
}

export {
  Pagination,
  paginationControlVariants,
  paginationItemVariants,
  paginationVariants,
}
export type {
  PaginationPage,
  PaginationProps,
  PaginationType,
  PaginationVariant,
}
