import { SvgLineArrowLeft1, SvgLineArrowRight1 } from '@chainlink/blocks-icons'
import { cn } from '../../utils/cn'
import { ButtonIcon } from '../Button'
import { inputVariants } from '../Input'
import { SimpleSelect } from '../Select/SimpleSelect'
import { typographyVariants } from '../Typography'
import {
  getPaginationControlsState,
  type PaginationPageControlMode,
} from './pagination.shared'

export interface PaginationControlsProps {
  /** Zero-based page index for prev/next navigation and the `Page N` label. */
  pageIndex: number
  /** Called when the user moves to a different page. */
  onPageChange: (pageIndex: number) => void
  /** Needed when totalCount is unknown so the next arrow can still be enabled. */
  canNextPage?: boolean
  /** Needed with totalCount to derive select options. */
  pageSize?: number
  /** Enables page Select when paired with pageSize. */
  totalCount?: number
  /** `select` shows a dropdown when possible; `display` keeps a static `Page N` label. */
  pageControlMode?: PaginationPageControlMode
  /** Temporarily disables interaction while data is loading. */
  isLoading?: boolean
  /** Permanently disables interaction. */
  disabled?: boolean
  className?: string
}

export function PaginationControls({
  pageIndex,
  onPageChange,
  canNextPage: canNextPageProp,
  pageSize,
  totalCount,
  pageControlMode = 'select',
  isLoading = false,
  disabled = false,
  className,
}: PaginationControlsProps) {
  const {
    currentPage,
    pageCount,
    effectivePageControlMode,
    canPreviousPage,
    canNextPage,
    canRenderControls,
  } = getPaginationControlsState({
    pageIndex,
    pageSize,
    totalCount,
    canNextPage: canNextPageProp,
    pageControlMode,
  })

  if (!canRenderControls) return null

  const isInteractionDisabled = isLoading || disabled
  const paginationDisabledButtonClassName =
    'disabled:!border-input-border disabled:!bg-input disabled:!text-input-muted-foreground'
  const paginationDisabledPageControlClassName =
    'data-[disabled]:!border-input-border data-[disabled]:!bg-input data-[disabled]:!text-input-muted-foreground data-[disabled]:!opacity-100 data-[disabled]:[&_[data-slot=select-value]]:!text-input-muted-foreground data-[disabled]:[&_[data-slot=select-caret]]:!text-input-muted-foreground'
  const paginationPageControlAnimationClassName =
    '[&_[data-slot=select-value]]:transition-colors [&_[data-slot=select-value]]:duration-100 [&_[data-slot=select-value]]:ease-linear [&_[data-slot=select-caret]]:transition-colors [&_[data-slot=select-caret]]:duration-100 [&_[data-slot=select-caret]]:ease-linear'
  const paginationPageControlContentClassName = isInteractionDisabled
    ? '!text-input-muted-foreground [&_[data-slot=select-value]]:!text-input-muted-foreground [&_[data-slot=select-caret]]:!text-input-muted-foreground'
    : 'text-foreground'
  const pageControlClassName =
    'relative z-10 -ml-px !w-[100px] !rounded-none md:!w-[120px]'
  const displayPageControlClassName = cn(
    inputVariants({ size: 'sm' }),
    typographyVariants({ variant: 'body-xs' }),
    pageControlClassName,
    'cursor-default items-center justify-start whitespace-nowrap border-input-border bg-input hover:border-input-border',
    isInteractionDisabled ? 'text-input-muted-foreground' : 'text-foreground',
  )
  const buttonClassName =
    'relative border-input-border bg-input hover:z-20 hover:border-input-border-active'

  return (
    <div className={cn('flex items-center', className)}>
      <ButtonIcon
        onClick={() => canPreviousPage && onPageChange(pageIndex - 1)}
        size="sm"
        disabled={isInteractionDisabled || !canPreviousPage}
        className={cn(
          buttonClassName,
          paginationDisabledButtonClassName,
          (effectivePageControlMode === 'select' ||
            effectivePageControlMode === 'display') &&
            '!rounded-r-none',
        )}
      >
        <SvgLineArrowLeft1 />
      </ButtonIcon>

      {effectivePageControlMode === 'display' && (
        <div className={displayPageControlClassName}>
          {`Page ${currentPage}`}
        </div>
      )}

      {effectivePageControlMode === 'select' && pageCount !== undefined && (
        <SimpleSelect
          options={Array.from({ length: pageCount }, (_, i) => ({
            label: `Page ${i + 1}`,
            value: i.toString(),
          }))}
          value={pageIndex.toString()}
          onValueChange={(value) => onPageChange(Number(value))}
          disabled={isInteractionDisabled}
          size="sm"
          className={cn(
            pageControlClassName,
            paginationDisabledPageControlClassName,
            paginationPageControlAnimationClassName,
            paginationPageControlContentClassName,
          )}
        />
      )}

      <ButtonIcon
        onClick={() => canNextPage && onPageChange(pageIndex + 1)}
        size="sm"
        disabled={isInteractionDisabled || !canNextPage}
        className={cn(
          buttonClassName,
          paginationDisabledButtonClassName,
          effectivePageControlMode === 'display' ||
            effectivePageControlMode === 'select'
            ? '-ml-px !rounded-l-none'
            : '-ml-px',
        )}
      >
        <SvgLineArrowRight1 />
      </ButtonIcon>
    </div>
  )
}