"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Slider from "react-slick";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useHomeData } from "@/context/helpers/Home";
import { cn } from "@/lib/utils";
import { SectionTitle } from "@/layouts/layout-15/components/shared/SectionTitle";

function goToSlide(sliderRef, direction) {
  const slider = sliderRef.current;
  if (!slider) return;

  const method = direction === "next" ? "slickNext" : "slickPrev";
  if (typeof slider[method] === "function") {
    slider[method]();
    return;
  }

  if (typeof slider.innerSlider?.[method] === "function") {
    slider.innerSlider[method]();
  }
}
function CarouselArrow({
  direction,
  onClick,
  className,
  style,
  variant = "slick",
  translationPrefix = "layout19",
}) {
  const { t, i18n } = useTranslation("home");
  const isRtl = i18n.language?.startsWith("ar");
  const Icon = isRtl
    ? direction === "prev"
      ? ChevronRight
      : ChevronLeft
    : direction === "prev"
      ? ChevronLeft
      : ChevronRight;
  const label =
    direction === "prev"
      ? t(`${translationPrefix}.prevSlide`)
      : t(`${translationPrefix}.nextSlide`);

  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      style={variant === "slick" ? style : undefined}
      className={cn(
        variant === "external"
          ? "layout15-carousel-arrow-external flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full bg-mainColor text-white shadow-md transition-[filter] hover:brightness-110 md:size-10"
          : "layout15-carousel-arrow",
        className
      )}
    >
      <Icon className="w-5 h-5" strokeWidth={2} />
    </button>
  );
}

export function ProductsCarousel({
  title,
  label,
  products = [],
  ProductCard,
  className,
  sectionClassName,
  accentColor = "#2F9B8D",
  compact = false,
  translationPrefix = "layout19",
}) {
  const { i18n } = useTranslation("home");
  const [slidesToShow, setSlidesToShow] = useState(4);
  const sliderRef = useRef(null);
  const isRtl = i18n.language?.startsWith("ar");

  useEffect(() => {
    const update = () => {
      const width = window.innerWidth;
      if (width < 640) setSlidesToShow(1);
      else if (width < 768) setSlidesToShow(2);
      else if (width < 1024) setSlidesToShow(3);
      else setSlidesToShow(4);
    };
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  const items = useMemo(() => products.slice(0, 12), [products]);
  const itemCount = items.length;
  const effectiveSlides = Math.min(slidesToShow, itemCount);
  const showArrows = itemCount > effectiveSlides;

  const sliderSettings = useMemo(
    () => ({
      dots: false,
      infinite: showArrows,
      speed: 500,
      slidesToShow: effectiveSlides,
      slidesToScroll: 1,
      adaptiveHeight: !compact,
      rtl: isRtl,
      arrows: showArrows && !compact,
      nextArrow:
        showArrows && !compact ? (
          <CarouselArrow
            direction="next"
            translationPrefix={translationPrefix}
          />
        ) : undefined,
      prevArrow:
        showArrows && !compact ? (
          <CarouselArrow
            direction="prev"
            translationPrefix={translationPrefix}
          />
        ) : undefined,
    }),
    [effectiveSlides, showArrows, isRtl, compact, translationPrefix]
  );

  const gridClass =
    itemCount === 1
      ? "mx-auto max-w-[280px] grid-cols-1"
      : itemCount === 2
        ? "mx-auto max-w-2xl grid-cols-1 sm:grid-cols-2"
        : itemCount === 3
          ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
          : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";

  if (!itemCount || !ProductCard) return null;

  return (
    <section
      className={cn(
        "py-10 md:py-14 layout15-carousel-section",
        sectionClassName
      )}
    >
      <div
        className={cn(
          "mx-auto px-[clamp(1rem,4vw,5rem)] max-w-[1440px] container",
          className
        )}
      >
        <SectionTitle
          label={label}
          title={title}
          variant="squares"
          accentColor={accentColor}
        />

        {showArrows ? (
          compact ? (
            <div
              dir={isRtl ? "rtl" : "ltr"}
              className="flex items-center gap-2 sm:gap-3 layout15-slick layout15-slick--layout19"
            >
              <CarouselArrow
                direction="prev"
                variant="external"
                translationPrefix={translationPrefix}
                onClick={() => goToSlide(sliderRef, "prev")}
              />
              <div className="flex-1 min-w-0">
                <Slider ref={sliderRef} {...sliderSettings}>
                  {items.map((product) => (
                    <div
                      key={product.entityId || product.productId || product.id}
                      className="px-1 py-3"
                    >
                      <ProductCard product={product} />
                    </div>
                  ))}
                </Slider>
              </div>
              <CarouselArrow
                direction="next"
                variant="external"
                translationPrefix={translationPrefix}
                onClick={() => goToSlide(sliderRef, "next")}
              />
            </div>
          ) : (
            <div className="relative px-0 md:px-10 overflow-visible layout15-slick">
              <Slider {...sliderSettings}>
                {items.map((product) => (
                  <div
                    key={product.entityId || product.productId || product.id}
                    className="px-2 py-3"
                  >
                    <ProductCard product={product} />
                  </div>
                ))}
              </Slider>
            </div>
          )
        ) : (
          <div className={cn("gap-6 md:gap-8 grid", gridClass)}>
            {items.map((product) => (
              <ProductCard
                key={product.entityId || product.productId || product.id}
                product={product}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

export function TrendingProductsCarousel({
  ProductCard,
  accentColor,
  compact,
  translationPrefix = "layout19",
  sectionClassName,
}) {
  const { t } = useTranslation("home");
  const { bestSellers, newProducts } = useHomeData();

  const trending =
    bestSellers?.productList?.length > 0 ? bestSellers : newProducts;

  return (
    <ProductsCarousel
      title={trending?.label || t(`${translationPrefix}.trendingProducts`)}
      products={trending?.productList || []}
      ProductCard={ProductCard}
      accentColor={accentColor}
      compact={compact}
      translationPrefix={translationPrefix}
      sectionClassName={sectionClassName}
    />
  );
}

export function NewProductsCarousel({
  ProductCard,
  className,
  sectionClassName,
  accentColor,
  compact,
  translationPrefix = "layout19",
}) {
  const { t } = useTranslation("home");
  const { newProducts } = useHomeData();

  return (
    <ProductsCarousel
      title={newProducts?.label || t(`${translationPrefix}.newProducts`)}
      products={newProducts?.productList || []}
      ProductCard={ProductCard}
      className={className}
      sectionClassName={sectionClassName}
      accentColor={accentColor}
      compact={compact}
      translationPrefix={translationPrefix}
    />
  );
}