"use client";

import { useRef, useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";

// Define TypeScript types
type Collection = {
  title: string;
  path: string;
  image: {
    url: string;
    alt: string;
  };
};

type Slider1Props = {
  title?: string;
  description?: string;
  collections?: Collection[];
};

const Slider1 = ({
  title = "Featured Collections",
  description = "Unmatched design—superior performance and customer satisfaction inone.",
  collections = [
    {
      title: "Summer Collection",
      path: "#",
      image: {
        url: "https://library.rapid-ui.com/images/blocks/slider1/bedroom.jpg",
        alt: "Summer Collection",
      },
    },
    {
      title: "Winter Essentials",
      path: "#",
      image: {
        url: "https://library.rapid-ui.com/images/blocks/slider1/concrete-planters.webp",
        alt: "Winter Collection",
      },
    },
    {
      title: "Casual Wear",
      path: "#",
      image: {
        url: "https://library.rapid-ui.com/images/blocks/slider1/glassware.jpg",
        alt: "Casual Wear Collection",
      },
    },
    {
      title: "Formal Attire",
      path: "#",
      image: {
        url: "https://library.rapid-ui.com/images/blocks/slider1/w&s.webp",
        alt: "Formal Attire Collection",
      },
    },
    {
      title: "Formal Attire",
      path: "#",
      image: {
        url: "https://library.rapid-ui.com/images/blocks/slider1/towels.webp",
        alt: "Formal Attire Collection",
      },
    },
  ],
}: Slider1Props) => {
  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const handleScroll = (direction: number) => {
    if (!scrollContainerRef.current) return;

    const scrollContainer = scrollContainerRef.current;
    const itemWidth =
      scrollContainer.firstChild instanceof HTMLElement
        ? scrollContainer.firstChild.offsetWidth + 20
        : 300; // Adjust for margins

    scrollContainer.scrollBy({
      left: direction * itemWidth,
      behavior: "smooth",
    });
  };

  // Update active dot based on scroll position
  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) return;

    const handleScroll = () => {
      const scrollLeft = scrollContainer.scrollLeft;
      const itemWidth =
        scrollContainer.firstChild instanceof HTMLElement
          ? scrollContainer.firstChild.offsetWidth + 20
          : 300;
      const newIndex = Math.round(scrollLeft / itemWidth);
      setActiveIndex(newIndex);
    };

    scrollContainer.addEventListener("scroll", handleScroll);
    return () => scrollContainer.removeEventListener("scroll", handleScroll);
  }, []);

  if (!collections.length) return null;

  return (
    <div className="py-40">
      <div className="px-5">
        <h2 className="text-center mb-5 text-4xl font-medium max-sm:text-2xl">
          {title}
        </h2>
        <p className="text-center text-gray-500">{description}</p>
      </div>
      <div className="px-5 mt-12 relative group/parent">
        <div className="overflow-hidden">
          <div
            ref={scrollContainerRef}
            className="flex overflow-x-scroll scroll-smooth no-scrollbar snap-x snap-mandatory"
          >
            {collections.map(
              (collection, i) =>
                collection?.image && (
                  <div
                    key={i}
                    className={`basis-3/4 md:basis-[calc(25%-15px)] aspect-[2/3] rounded-lg overflow-hidden shrink-0 relative group ${
                      i !== collections.length - 1 ? "mr-5" : ""
                    } snap-center`}
                  >
                    <Link href={collection.path}>
                      <Image
                        className="w-full h-full object-cover ease-[cubic-bezier(0.19,0.61,0.15,0.82)] duration-[0.8s] group-hover:scale-110"
                        src={collection.image.url}
                        alt={collection.image.alt || collection.title}
                        width={1920}
                        height={1080}
                      />
                      <div className="absolute left-0 top-0 h-full w-full bg-gradient-to-t from-[#12131652] to-transparent"></div>
                      <div className="absolute bottom-8 left-8">
                        <h3 className="text-white text-2xl font-medium">
                          {collection.title}
                        </h3>
                      </div>
                    </Link>
                  </div>
                )
            )}
          </div>
        </div>

        {/* Swiper Dots for Mobile */}
        <div className="md:hidden flex justify-center mt-8 space-x-2">
          {collections.map((_, i) => (
            <div
              key={i}
              className={`w-2 h-2 rounded-full bg-gray-200 transition-all duration-200 ${
                i === activeIndex ? "!bg-black" : "bg-border"
              }`}
            />
          ))}
        </div>

        {/* Navigation Arrows (Only Show If More Than 4 Items) */}
        {collections.length > 4 && (
          <>
            {/* Swiper Button Left (Hidden on Mobile) */}
            <button
              onClick={() => handleScroll(-1)}
              className="bg-white cursor-pointer p-3.5 rounded-full border border-gray-300 left-8 hidden md:flex absolute top-1/2 -translate-y-1/2 opacity-0 transition-all duration-300 ease-in-out group-hover/parent:left-10 group-hover/parent:opacity-100"
            >
              <ChevronLeft className="w-6 h-6 text-black" />
            </button>

            {/* Swiper Button Right (Hidden on Mobile) */}
            <button
              onClick={() => handleScroll(1)}
              className="bg-white cursor-pointer p-3.5 rounded-full border border-gray-300 right-8 hidden md:flex absolute top-1/2 -translate-y-1/2 opacity-0 transition-all duration-300 ease-in-out group-hover/parent:right-10 group-hover/parent:opacity-100"
            >
              <ChevronRight className="w-6 h-6 text-black" />
            </button>
          </>
        )}
      </div>
    </div>
  );
};

export { Slider1 };
slider-1
