"use client"

import type { ReactNode } from "react"
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { cn } from "@/lib/utils"

type PageSizeSelectProps = {
  value: number
  options: readonly number[]
  onValueChange: (pageSize: number) => void
  /** Ties the label to the trigger; give it a unique value when several tables share a page. */
  id?: string
  disabled?: boolean
  label?: string
  labelClassName?: string
  triggerClassName?: string
  triggerSize?: "sm" | "default"
  contentSide?: "top" | "bottom"
  /** Wrap the items in a SelectGroup (the dashboard tables do). */
  grouped?: boolean
  /** Shown when the current value is not among the options. */
  placeholder?: string
}

/**
 * "Rows per page" label + select shared by every table pager. Each pager passes the class
 * names it always used, so swapping to this component does not change its layout.
 */
export function PageSizeSelect({
  value,
  options,
  onValueChange,
  id,
  disabled,
  label = "Rows per page",
  labelClassName = "text-sm",
  triggerClassName = "h-8 w-[72px]",
  triggerSize,
  contentSide,
  grouped = false,
  placeholder,
}: PageSizeSelectProps) {
  const items = options.map((size) => (
    <SelectItem key={size} value={String(size)}>
      {size}
    </SelectItem>
  ))

  return (
    <div className="flex items-center gap-2">
      <Label htmlFor={id} className={labelClassName}>
        {label}
      </Label>
      <Select
        value={String(value)}
        onValueChange={(next) => onValueChange(Number(next))}
        disabled={disabled}
      >
        <SelectTrigger id={id} size={triggerSize} className={triggerClassName}>
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent side={contentSide}>
          {grouped ? <SelectGroup>{items}</SelectGroup> : items}
        </SelectContent>
      </Select>
    </div>
  )
}

type PageStepButtonsProps = {
  canPrevious: boolean
  canNext: boolean
  onPrevious: () => void
  onNext: () => void
  /** Provide both to show the jump-to-first / jump-to-last buttons. */
  onFirst?: () => void
  onLast?: () => void
  /** Rendered between the previous and next buttons (e.g. "Page 2 of 5"). */
  children?: ReactNode
  className?: string
}

const stepButtonClass = "size-8"

/** First / previous / next / last icon buttons shared by every table pager. */
export function PageStepButtons({
  canPrevious,
  canNext,
  onPrevious,
  onNext,
  onFirst,
  onLast,
  children,
  className,
}: PageStepButtonsProps) {
  return (
    <div className={cn("flex items-center gap-1", className)}>
      {onFirst ? (
        <Button
          variant="outline"
          size="icon"
          className={stepButtonClass}
          onClick={onFirst}
          disabled={!canPrevious}
        >
          <ChevronsLeft className="size-4" />
        </Button>
      ) : null}
      <Button
        variant="outline"
        size="icon"
        className={stepButtonClass}
        onClick={onPrevious}
        disabled={!canPrevious}
      >
        <ChevronLeft className="size-4" />
      </Button>
      {children}
      <Button
        variant="outline"
        size="icon"
        className={stepButtonClass}
        onClick={onNext}
        disabled={!canNext}
      >
        <ChevronRight className="size-4" />
      </Button>
      {onLast ? (
        <Button
          variant="outline"
          size="icon"
          className={stepButtonClass}
          onClick={onLast}
          disabled={!canNext}
        >
          <ChevronsRight className="size-4" />
        </Button>
      ) : null}
    </div>
  )
}