'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import Autoplay from 'embla-carousel-autoplay';
import { Play } from 'lucide-react';
import * as React from 'react';

import type { Series } from '@/lib/types';
import { i18n } from '@/i18n-config';
import { useSettings } from '@/lib/settings-provider';
import { cn } from '@/lib/utils';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  type CarouselApi,
} from '@/components/ui/carousel';

interface HeroSectionProps {
  series: Series[];
}

export function HeroSection({ series }: HeroSectionProps) {
  const [api, setApi] = React.useState<CarouselApi>();
  const [current, setCurrent] = React.useState(0);
  const settings = useSettings();
  const params = useParams();
  const lang = (params?.lang as string) || i18n.defaultLocale;
  const langPrefix = lang === i18n.defaultLocale ? '' : `/${lang}`;
  const autoplay = React.useRef(
    Autoplay({
      delay: 5000,
      stopOnInteraction: false,
      stopOnMouseEnter: true,
    })
  );

  React.useEffect(() => {
    if (!api) return;

    const updateCurrent = () => setCurrent(api.selectedScrollSnap());
    updateCurrent();
    api.on('select', updateCurrent);
    api.on('reInit', updateCurrent);

    return () => {
      api.off('select', updateCurrent);
      api.off('reInit', updateCurrent);
    };
  }, [api]);

  const getSeriesUrl = (item: Series) => {
    const path = settings?.seriesUrlFormat === 'slug' && item.slug
      ? `/series/${item.slug}`
      : `/series/${item.id}`;
    return `${langPrefix}${path}`;
  };

  if (!series?.length) {
    return (
      <section className="flex min-h-[440px] items-center justify-center bg-gradient-to-b from-slate-900 via-slate-950 to-background pt-20">
        <p className="text-sm font-medium text-muted-foreground">No featured series available.</p>
      </section>
    );
  }

  return (
    <section
      className="relative overflow-hidden bg-slate-950 pb-5 pt-20 sm:pt-24 md:pb-8 md:pt-28"
      aria-label="Featured series"
    >
      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
        {series.map((item, index) => (
          <Image
            key={item.id}
            src={item.coverUrl || '/img/no-cover.svg'}
            alt=""
            fill
            priority={index === 0}
            sizes="100vw"
            className={cn(
              'scale-125 object-cover blur-3xl transition-opacity duration-700',
              current === index ? 'opacity-55' : 'opacity-0'
            )}
          />
        ))}
        <div className="absolute inset-0 bg-gradient-to-b from-slate-950/40 via-slate-950/75 to-background" />
        <div className="absolute inset-0 bg-black/20" />
      </div>

      <Carousel
        setApi={setApi}
        className="relative z-10 w-full"
        plugins={[autoplay.current]}
        opts={{
          align: 'center',
          loop: series.length > 1,
          skipSnaps: false,
        }}
      >
        <CarouselContent className="-ml-3 items-center sm:-ml-4 md:-ml-5">
          {series.map((item, index) => {
            const isActive = current === index;

            return (
              <CarouselItem
                key={item.id}
                className="flex basis-[76%] justify-center pl-3 sm:basis-[54%] sm:pl-4 md:basis-[40%] md:pl-5 lg:basis-[31%] xl:basis-[25%] 2xl:basis-[22%]"
              >
                <Link
                  href={getSeriesUrl(item)}
                  aria-label={`Watch ${item.title}`}
                  className={cn(
                    'group relative block w-full overflow-hidden rounded-[1.75rem] border bg-zinc-950 shadow-2xl transition-all duration-500 ease-out sm:rounded-[2rem]',
                    isActive
                      ? 'scale-100 border-white/20 opacity-100 shadow-black/60'
                      : 'scale-[0.94] border-white/5 opacity-55'
                  )}
                >
                  <div className="relative aspect-[2/3] w-full">
                    <Image
                      src={item.coverUrl || '/img/no-cover.svg'}
                      alt={item.title}
                      fill
                      priority={index === 0}
                      sizes="(max-width: 640px) 76vw, (max-width: 768px) 54vw, (max-width: 1024px) 40vw, (max-width: 1280px) 31vw, 25vw"
                      className="object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                    />

                    <div className="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-black/5" />
                    <div className="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                      <span className="flex h-14 w-14 items-center justify-center rounded-full border border-white/25 bg-black/45 text-white shadow-2xl backdrop-blur-md">
                        <Play className="ml-1 h-6 w-6 fill-current" />
                      </span>
                    </div>
                  </div>
                </Link>
              </CarouselItem>
            );
          })}
        </CarouselContent>
      </Carousel>

      {series.length > 1 && (
        <div className="relative z-20 mt-5 flex items-center justify-center gap-2" role="tablist" aria-label="Featured slides">
          {series.map((item, index) => (
            <button
              key={item.id}
              type="button"
              role="tab"
              aria-label={`Show ${item.title}`}
              aria-selected={current === index}
              onClick={() => api?.scrollTo(index)}
              className={cn(
                'h-2 rounded-full transition-all duration-300',
                current === index
                  ? 'w-7 bg-primary shadow-[0_0_14px_hsl(var(--primary)/0.55)]'
                  : 'w-2 bg-white/35 hover:bg-white/60'
              )}
            />
          ))}
        </div>
      )}
    </section>
  );
}