'use client';

import React from 'react';

import { useTranslations } from 'next-intl';

import type { SectionHeaderProps } from '@/components/home/components/SectionHeader';
import SectionHeader from '@/components/home/components/SectionHeader';
import AppSwiper, { AppSwiperSlide } from '@/components/swiper/AppSwiper';
import CarouselControls from '@/components/swiper/CarouselControls';
import { type AppSwiperController, useAppSwiper } from '@/components/swiper/useAppSwiper';
import { cn } from '@/lib/utils';

import type { CreationListItem } from '@/types/Creation';

import CreationCarouselCard, {
  type CreationCarouselItem,
  mapCreationToCarouselItem,
} from './CreationCarouselCard';

export { mapCreationToCarouselItem };
export type { CreationCarouselItem };

interface CreationCarouselProps {
  items: CreationCarouselItem[];
  sectionHeader?: SectionHeaderProps;
  className?: string;
  showControls?: boolean;
  /** show a thin draggable progress scrollbar below the carousel. */
  showScrollbar?: boolean;
  /** Drive the swiper from a controller owned by the parent — lets the caller
   *  render the nav arrows elsewhere (e.g. next to its own tab bar). Falls back
   *  to an internally-created controller when omitted. */
  controller?: AppSwiperController;
}

export const mapCreationsToCarouselItems = (creations: CreationListItem[]) =>
  creations.map(mapCreationToCarouselItem);

const CreationCarousel: React.FC<CreationCarouselProps> = ({
  items,
  sectionHeader,
  className,
  showControls = true,
  showScrollbar = false,
  controller: externalController,
}) => {
  const tCommon = useTranslations('common');
  const slideCount = items.length;
  const internalController = useAppSwiper({
    slideCount,
    autoplay: false,
    loop: false,
  });
  const controller = externalController ?? internalController;

  if (slideCount === 0) {
    return null;
  }

  const showHeaderControls = showControls && slideCount > 1;

  return (
    <section
      className={cn(
        'w-full [--creation-carousel-image-height:220px] sm:[--creation-carousel-image-height:260px] lg:[--creation-carousel-image-height:220px]',
        className
      )}
    >
      <div className="flex flex-col gap-6">
        {(sectionHeader || showHeaderControls) && (
          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            {sectionHeader ? <SectionHeader {...sectionHeader} /> : <div />}
            {showHeaderControls && (
              <CarouselControls
                total={slideCount}
                activeIndex={controller.activeIndex}
                onPrev={controller.prev}
                onNext={controller.next}
                onSelect={controller.goTo}
                prevLabel={tCommon('previous')}
                nextLabel={tCommon('next')}
                showDots={false}
                className="hidden sm:flex sm:justify-end"
              />
            )}
          </div>
        )}

        <div className="overflow-hidden">
          <AppSwiper
            slideCount={slideCount}
            controller={controller}
            autoplay={false}
            loop={false}
            swiperOptions={{
              slidesPerView: 'auto',
              spaceBetween: 16,
              speed: 500,
              grabCursor: slideCount > 1,
              watchOverflow: true,
              scrollbar: showScrollbar ? { draggable: true } : undefined,
              className: showScrollbar
                ? cn(
                    '!pb-8',
                    '[&_.swiper-scrollbar]:!left-0 [&_.swiper-scrollbar]:!bottom-0 [&_.swiper-scrollbar]:!h-1 [&_.swiper-scrollbar]:!w-full [&_.swiper-scrollbar]:!rounded-full [&_.swiper-scrollbar]:!bg-[#151720]/10',
                    '[&_.swiper-scrollbar-drag]:!rounded-full [&_.swiper-scrollbar-drag]:!bg-[#151720]/40'
                  )
                : undefined,
              breakpoints: {
                640: {
                  spaceBetween: 20,
                },
                1024: {
                  spaceBetween: 24,
                },
              },
            }}
          >
            {items.map((item) => (
              <AppSwiperSlide key={item.id} className="!w-auto">
                <CreationCarouselCard item={item} />
              </AppSwiperSlide>
            ))}
          </AppSwiper>
        </div>
      </div>
    </section>
  );
};

export default CreationCarousel;