import { Carousel as ArkCarousel } from '@ark-ui/solid/carousel'
import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-solid'
import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

export interface CarouselProps extends JSX.HTMLAttributes<HTMLDivElement> {
  slideCount: number
  autoplay?: boolean | { delay: number }
  loop?: boolean
  slidesPerPage?: number
  spacing?: string
}

export const Carousel = ArkCarousel

export const CarouselRoot = (props: CarouselProps) => {
  const [local, rest] = splitProps(props, [
    'class',
    'slideCount',
    'autoplay',
    'loop',
    'slidesPerPage',
    'spacing',
    'children',
  ])

  return (
    <ArkCarousel.Root
      class={cn('relative w-full', local.class)}
      slideCount={local.slideCount}
      autoplay={local.autoplay}
      loop={local.loop}
      slidesPerPage={local.slidesPerPage}
      spacing={local.spacing}
      {...rest}
    >
      {local.children}
    </ArkCarousel.Root>
  )
}

export const CarouselItemGroup = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <ArkCarousel.ItemGroup
      class={cn(
        'flex overflow-hidden rounded-xl',
        'scrollbar-hide',
        local.class,
      )}
      {...rest}
    >
      {local.children}
    </ArkCarousel.ItemGroup>
  )
}

export interface CarouselItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
  index: number
}

export const CarouselItem = (props: CarouselItemProps) => {
  const [local, rest] = splitProps(props, ['class', 'index', 'children'])
  return (
    <ArkCarousel.Item
      class={cn(
        'flex-shrink-0 flex-grow-0 basis-full',
        'focus:outline-none',
        local.class,
      )}
      index={local.index}
      {...rest}
    >
      {local.children}
    </ArkCarousel.Item>
  )
}

export const CarouselControl = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <ArkCarousel.Control
      class={cn('flex items-center justify-center gap-2 mt-4', local.class)}
      {...rest}
    >
      {local.children}
    </ArkCarousel.Control>
  )
}

export const CarouselPrevTrigger = (props: JSX.HTMLAttributes<HTMLButtonElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkCarousel.PrevTrigger
      class={cn(
        'flex h-9 w-9 items-center justify-center rounded-lg',
        'bg-surface-high text-muted-fg',
        'hover:bg-surface-highest hover:text-fg',
        'transition-all duration-200',
        'disabled:opacity-40 disabled:cursor-not-allowed',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
        local.class,
      )}
      {...rest}
    >
      <ChevronLeft class="h-4 w-4" />
    </ArkCarousel.PrevTrigger>
  )
}

export const CarouselNextTrigger = (props: JSX.HTMLAttributes<HTMLButtonElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkCarousel.NextTrigger
      class={cn(
        'flex h-9 w-9 items-center justify-center rounded-lg',
        'bg-surface-high text-muted-fg',
        'hover:bg-surface-highest hover:text-fg',
        'transition-all duration-200',
        'disabled:opacity-40 disabled:cursor-not-allowed',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
        local.class,
      )}
      {...rest}
    >
      <ChevronRight class="h-4 w-4" />
    </ArkCarousel.NextTrigger>
  )
}

export const CarouselAutoplayTrigger = (props: JSX.HTMLAttributes<HTMLButtonElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkCarousel.AutoplayTrigger
      class={cn(
        'flex h-9 w-9 items-center justify-center rounded-lg',
        'bg-surface-high text-muted-fg',
        'hover:bg-surface-highest hover:text-fg',
        'transition-all duration-200',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
        local.class,
      )}
      {...rest}
    >
      <ArkCarousel.AutoplayIndicator fallback={<Play class="h-4 w-4" />}>
        <Pause class="h-4 w-4" />
      </ArkCarousel.AutoplayIndicator>
    </ArkCarousel.AutoplayTrigger>
  )
}

export const CarouselIndicatorGroup = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <ArkCarousel.IndicatorGroup
      class={cn('flex items-center justify-center gap-1.5', local.class)}
      {...rest}
    >
      {local.children}
    </ArkCarousel.IndicatorGroup>
  )
}

export interface CarouselIndicatorProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  index: number
}

export const CarouselIndicator = (props: CarouselIndicatorProps) => {
  const [local, rest] = splitProps(props, ['class', 'index'])
  return (
    <ArkCarousel.Indicator
      class={cn(
        'h-1.5 w-1.5 rounded-full bg-muted-fg/40',
        'transition-all duration-200',
        'hover:bg-muted-fg/60',
        'data-[current]:bg-primary data-[current]:w-4',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
        local.class,
      )}
      index={local.index}
      {...rest}
    />
  )
}

export const CarouselProgressText = (props: JSX.HTMLAttributes<HTMLSpanElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkCarousel.ProgressText
      class={cn('text-xs font-medium text-muted-fg tabular-nums', local.class)}
      {...rest}
    />
  )
}
