import { Carousel as ArkCarousel } from '@ark-ui/solid/carousel'
import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-solid'
import { Index, Show, splitProps, type JSX } from 'solid-js'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import type { MediaItem } from '@/types/domain'
import { cn } from '@/utils/cn'
import { formatRating, formatRuntime } from '@/utils/format'
import { mediaBadgeVariant, mediaMonogram, mediaTypeLabel, mediaYear } from '@/utils/media'

export interface HeroCarouselProps extends JSX.HTMLAttributes<HTMLDivElement> {
  items: MediaItem[]
  autoplay?: boolean
  loop?: boolean
}

export const HeroCarousel = (props: HeroCarouselProps) => {
  const [local, rest] = splitProps(props, ['class', 'items', 'autoplay', 'loop'])

  return (
    <ArkCarousel.Root
      class={cn('relative w-full', local.class)}
      slideCount={local.items.length}
      autoplay={local.autoplay ? { delay: 6000 } : false}
      loop={local.loop ?? true}
      {...rest}
    >
      <ArkCarousel.ItemGroup
        class={cn(
          'flex overflow-hidden rounded-2xl',
          'scrollbar-hide',
        )}
      >
        <Index each={local.items}>
          {(item, index) => (
            <ArkCarousel.Item
              class={cn(
                'flex-shrink-0 flex-grow-0 basis-full',
                'focus:outline-none',
              )}
              index={index}
            >
              <HeroSlide item={item()} />
            </ArkCarousel.Item>
          )}
        </Index>
      </ArkCarousel.ItemGroup>

      {/* Overlay Controls */}
      <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
        <ArkCarousel.Control class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <ArkCarousel.PrevTrigger
              class={cn(
                'flex h-9 w-9 items-center justify-center rounded-lg',
                'bg-white/10 text-white backdrop-blur-sm',
                'hover:bg-white/20',
                'transition-all duration-200',
                'disabled:opacity-40 disabled:cursor-not-allowed',
                'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
              )}
            >
              <ChevronLeft class="h-4 w-4" />
            </ArkCarousel.PrevTrigger>

            <Show when={local.autoplay}>
              <ArkCarousel.AutoplayTrigger
                class={cn(
                  'flex h-9 w-9 items-center justify-center rounded-lg',
                  'bg-white/10 text-white backdrop-blur-sm',
                  'hover:bg-white/20',
                  'transition-all duration-200',
                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
                )}
              >
                <ArkCarousel.AutoplayIndicator fallback={<Play class="h-4 w-4" />}>
                  <Pause class="h-4 w-4" />
                </ArkCarousel.AutoplayIndicator>
              </ArkCarousel.AutoplayTrigger>
            </Show>

            <ArkCarousel.NextTrigger
              class={cn(
                'flex h-9 w-9 items-center justify-center rounded-lg',
                'bg-white/10 text-white backdrop-blur-sm',
                'hover:bg-white/20',
                'transition-all duration-200',
                'disabled:opacity-40 disabled:cursor-not-allowed',
                'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
              )}
            >
              <ChevronRight class="h-4 w-4" />
            </ArkCarousel.NextTrigger>
          </div>

          <ArkCarousel.IndicatorGroup class="flex items-center gap-1.5">
            <Index each={local.items}>
              {(_, index) => (
                <ArkCarousel.Indicator
                  class={cn(
                    'h-1.5 w-1.5 rounded-full bg-white/40',
                    'transition-all duration-200',
                    'hover:bg-white/60',
                    'data-[current]:bg-primary data-[current]:w-4',
                    'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
                  )}
                  index={index}
                />
              )}
            </Index>
          </ArkCarousel.IndicatorGroup>
        </ArkCarousel.Control>
      </div>
    </ArkCarousel.Root>
  )
}

const HeroSlide = (props: { item: MediaItem }) => {
  const tone = () => mediaBadgeVariant(props.item.type)

  return (
    <div class="relative h-64 sm:h-80 lg:h-96 overflow-hidden">
      {/* Background Gradient */}
      <div class="absolute inset-0 bg-gradient-to-br from-primary/30 via-surface-container to-secondary/20" />
      
      {/* Decorative Elements */}
      <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-primary/10 to-transparent" />
      <div class="absolute bottom-0 left-0 w-1/3 h-1/2 bg-gradient-to-tr from-secondary/10 to-transparent" />
      
      {/* Monogram Background */}
      <div class="absolute inset-0 flex items-center justify-center opacity-10">
        <p class="font-display text-[12rem] font-bold text-fg/30">
          {mediaMonogram(props.item.title)}
        </p>
      </div>

      {/* Content */}
      <div class="absolute inset-0 flex flex-col justify-end p-6 sm:p-8">
        <div class="max-w-xl space-y-4">
          {/* Badges */}
          <div class="flex items-center gap-2">
            <Badge variant={tone()} class="flex items-center gap-1.5 bg-white/20 backdrop-blur-sm">
              {mediaTypeLabel(props.item.type)}
            </Badge>
            <span class="text-xs font-semibold uppercase tracking-widest text-white/70">
              {mediaYear(props.item.releaseDate)}
            </span>
            <span class="text-xs font-semibold text-tertiary">
              {formatRating(props.item.rating)} ★
            </span>
          </div>

          {/* Title */}
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-display font-bold text-white leading-tight">
            {props.item.title}
          </h3>

          {/* Overview */}
          <p class="text-sm sm:text-base text-white/80 line-clamp-2 max-w-lg leading-relaxed">
            {props.item.overview}
          </p>

          {/* Meta */}
          <div class="flex items-center gap-4 text-sm text-white/60">
            <Show when={props.item.type !== 'game'}>
              <span>{formatRuntime(props.item.runtimeMinutes, props.item.type)}</span>
            </Show>
            <Show when={props.item.genres.length > 0}>
              <span>{props.item.genres.slice(0, 3).join(' • ')}</span>
            </Show>
          </div>

          {/* Actions */}
          <div class="flex items-center gap-3 pt-2">
            <Button variant="primary" size="md" class="shadow-glow">
              View Details
            </Button>
            <Button variant="secondary" size="md" class="bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white border-white/20">
              + Watchlist
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
