"use client";
import React, { useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { IconArrowNarrowLeft, IconArrowNarrowRight } from "@tabler/icons-react";

interface ProductCardProps {
  src: string;
  title: string;
  category: string;
  href: string;
}

const ProductCard = ({ src, title, category, href }: ProductCardProps) => {
  return (
    <Link href={href}>
      <div className="rounded-2xl bg-gray-100 dark:bg-neutral-900 h-40 w-56 md:h-[20rem] md:w-96 overflow-hidden flex flex-col items-start justify-start relative group">
        <div className="absolute h-full top-0 inset-x-0 bg-gradient-to-b from-black/50 via-transparent to-transparent z-30" />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-200 z-20" />
        <div className="relative z-40 p-8">
          <p className="text-white text-sm md:text-base font-medium font-sans text-left">
            {category}
          </p>
          <p className="text-white text-lg md:text-2xl font-semibold mt-2">
            {title}
          </p>
        </div>
        <div className="absolute inset-0 z-10">
          <Image
            src={src}
            alt={title}
            fill
            className="object-cover"
            sizes="(max-width: 768px) 224px, 384px"
          />
        </div>
      </div>
    </Link>
  );
};

export function ProductsCarousel() {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
  const [canScrollRight, setCanScrollRight] = React.useState(true);

  const checkScrollability = () => {
    if (scrollContainerRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } =
        scrollContainerRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10); // -10 for a small buffer
    }
  };

  React.useEffect(() => {
    checkScrollability();
    window.addEventListener("resize", checkScrollability);
    return () => window.removeEventListener("resize", checkScrollability);
  }, []);

  const scroll = (direction: "left" | "right") => {
    if (scrollContainerRef.current) {
      const scrollAmount = direction === "left" ? -400 : 400;
      scrollContainerRef.current.scrollBy({
        left: scrollAmount,
        behavior: "smooth",
      });
      // Update buttons after scroll
      setTimeout(checkScrollability, 100);
    }
  };

  return (
    <div className="w-full h-full pt-20">
      <h2 className="max-w-7xl pl-4 mx-auto text-xl md:text-5xl font-bold text-red-600 dark:text-neutral-200 font-sans">
        Featured Products
      </h2>
      <div className="max-w-7xl mx-auto overflow-hidden py-10 md:py-20">
        <div
          ref={scrollContainerRef}
          onScroll={checkScrollability}
          className="flex gap-4 pl-4 pb-4 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']"
        >
          {data.map((product) => (
            <div key={product.src} className="snap-start shrink-0">
              <ProductCard {...product} />
            </div>
          ))}
        </div>
        <div className="flex justify-end gap-2 mr-10 mt-4">
          <button
            onClick={() => scroll("left")}
            disabled={!canScrollLeft}
            className="relative z-10 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-200 transition-colors"
          >
            <IconArrowNarrowLeft className="h-6 w-6 text-gray-500" />
          </button>
          <button
            onClick={() => scroll("right")}
            disabled={!canScrollRight}
            className="relative z-10 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-200 transition-colors"
          >
            <IconArrowNarrowRight className="h-6 w-6 text-gray-500" />
          </button>
        </div>
      </div>
    </div>
  );
}

const data = [
  {
    category: "Circuit Breakers",
    title: "CHS150 Circuit Breaker",
    src: "/images/CHS150.png",
    href: "/products/circuit-breakers/chs150",
  },
  {
    category: "Circuit Breakers",
    title: "NA8 Air Circuit Breaker",
    src: "/images/NA8-ACB-1.png",
    href: "/products/circuit-breakers/na8-acb",
  },
  {
    category: "Switchgear",
    title: "Advanced Switchgear Solutions",
    src: "/images/1.webp",
    href: "/products/switchgear",
  },
  {
    category: "Power Distribution",
    title: "Power Distribution Systems",
    src: "/images/2.webp",
    href: "/products/power-distribution",
  },
  {
    category: "Control Systems",
    title: "Industrial Automation Controls",
    src: "/images/3.webp",
    href: "/products/control-systems",
  },
];