"use client";

import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import ClassNames from "embla-carousel-class-names";
import useEmblaCarousel from "embla-carousel-react";
import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
// Define the testimonial data structure
interface Testimonial {
  id: number;
  quote: string;
  name: string;
  title: string;
  company: string;
  location: string;
  imgSrc?: string;
  videoSrc?: string;
  avatar: string;
  logo: string;
}

// Sample testimonial data
const testimonials: Testimonial[] = [
  {
    id: 1,
    quote:
      "“TechFlow's analytics platform has transformed how we understand our customers. The insights we've gained have directly influenced our product roadmap and go-to-market strategy.”",
    name: "Denis Slavska",
    title: "CTO, Ailitic",
    company: "Ailitic",
    location: "New York City, New York",
    imgSrc:
      "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2084&auto=format&fit=crop",
    avatar: "/people/image1.png",
    logo: "/logos/Logo-2.svg",
  },
  {
    id: 2,
    quote: "They organized their work and internal management was outstanding.",
    name: "Jahan Melad",
    title: "Project Manager, Buildwave",
    company: "Buildwave",
    location: "New York City, New York",
    videoSrc:
      "https://videos.pexels.com/video-files/3253111/3253111-uhd_2560_1440_25fps.mp4",
    avatar: "/people/image2.png",
    logo: "/logos/Logo-1.svg",
  },
  {
    id: 3,
    quote: "Working with them was a great experience.",
    name: "Jim Halpert",
    title: "Lead Engineering, InHive Space",
    company: "InHive Space",
    imgSrc:
      "https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    location: "New York City, New York",
    avatar: "/people/image3.png",
    logo: "/logos/Logo-3.svg",
  },
  {
    id: 4,
    quote:
      "“TechFlow's analytics platform has transformed how we understand our customers. The insights we've gained have directly influenced our product roadmap and go-to-market strategy.”",
    name: "Jahan Melad",
    title: "Project Manager, Buildwave",
    company: "Buildwave",
    imgSrc:
      "https://images.unsplash.com/photo-1535237815493-1b3a233003b1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    location: "New York City, New York",
    avatar: "/people/image4.png",
    logo: "/logos/Logo-2.svg",
  },
];

export default function TestimonialsSection() {
  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      loop: false,
      align: "center",
      slidesToScroll: 1,
      skipSnaps: false,
    },
    [ClassNames()],
  );
 
  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false)
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false)
  const [isShiftPressed, setIsShiftPressed] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev()
  }, [emblaApi])

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext()
  }, [emblaApi])

  const onSelect = useCallback(() => {
    if (!emblaApi) return
    setPrevBtnEnabled(emblaApi.canScrollPrev())
    setNextBtnEnabled(emblaApi.canScrollNext())
  }, [emblaApi])

  // Handle keyboard events for Shift key detection
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Shift") {
        setIsShiftPressed(true)
      }
    }

    const handleKeyUp = (e: KeyboardEvent) => {
      if (e.key === "Shift") {
        setIsShiftPressed(false)
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    window.addEventListener("keyup", handleKeyUp)

    return () => {
      window.removeEventListener("keydown", handleKeyDown)
      window.removeEventListener("keyup", handleKeyUp)
    }
  }, [])

  // Handle mouse wheel events
  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      if (isShiftPressed && containerRef.current?.contains(e.target as Node)) {
        e.preventDefault()

        if (e.deltaY > 0) {
          // Scroll down = next slide
          scrollNext()
        } else {
          // Scroll up = previous slide
          scrollPrev()
        }
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("wheel", handleWheel, { passive: false })
    }

    return () => {
      if (container) {
        container.removeEventListener("wheel", handleWheel)
      }
    }
  }, [isShiftPressed, scrollNext, scrollPrev])

  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    emblaApi.on("select", onSelect);
    emblaApi.on("reInit", onSelect);
  }, [emblaApi, onSelect]);

  return (
    <section className="py-16 min-h-screen bg-black text-white">
      <div className=" border-y border-dashed border-neutral-900 py-16">
        <div className="max-w-screen-xl xl:px-2 px-4 mx-auto flex items-center justify-between pb-5">
          <h1 className="sm:text-3xl text-xl">Don't just take our word for it.</h1>
          <div className="flex sm:gap-4 gap-2 justify-end">
            <button
              onClick={scrollPrev}
              disabled={!prevBtnEnabled}
              className="sm:w-14 sm:h-14 w-10 h-10 rounded-full bg-neutral-800 text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center hover:bg-gray-800 "
              aria-label="Previous slide"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>
            <button
              onClick={scrollNext}
              disabled={!nextBtnEnabled}
              className="sm:w-14 sm:h-14 w-10 h-10 relative group rounded-full bg-neutral-800 disabled:opacity-50 disabled:cursor-not-allowed text-white flex items-center justify-center hover:bg-gray-800 "
              aria-label="Next slide"
            >
              <ChevronRight className="w-6 h-6 inline-block" />
            </button>
          </div>
        </div>
        <div ref={containerRef}
         className={`relative ${isShiftPressed ? "cursor-grab" : ""} ${isDragging ? "cursor-grabbing" : ""}`}
         style={{
           userSelect: isDragging ? "none" : "auto",
           WebkitUserSelect: isDragging ? "none" : "auto",
         }}
        >
          <div className="overflow-x-hidden" ref={emblaRef}
            style={{
              userSelect: "none",
              WebkitUserSelect: "none",
              WebkitTouchCallout: "none",
              WebkitTapHighlightColor: "transparent",
            }}>
            <div className="flex 2xl:gap-10 gap-5  max-w-screen-xl 2xl:px-0 px-4 mx-auto"
              onMouseDown={(e) => e.preventDefault()}
              onDragStart={(e) => e.preventDefault()}
            >
              {testimonials.map((testimonial) => (
                <div
                  key={testimonial.id}
                  className="slider flex-[0_0_100%]  group min-w-0 sm:flex-[0_0_85%] md:flex-[0_0_50%] lg:flex-[0_0_100%]"
                >
                  <div className="relative bg-neutral-950 overflow-hidden rounded-[2rem] shadow-sm">
                    <img
                      src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/${testimonial.logo}`}
                      alt={testimonial.company}
                      className="w-full absolute top-2 left-2  object-contain  opacity-30"
                    />

                    {testimonial.imgSrc && (
                      <>
                        <img
                          src={`${testimonial.imgSrc}`}
                          alt={testimonial.company}
                          className="w-full aspect-video object-cover  transition-all duration-300"
                        />
                      </>
                    )}
                    {testimonial.videoSrc && (
                      <>
                        <video
                          autoPlay
                          muted
                          loop
                          controls
                          className="h-full w-full object-cover aspect-video "
                        >
                          <source src={testimonial.videoSrc} type="video/mp4" />
                        </video>
                      </>
                    )}
                    <ProgressiveBlur
                      className="pointer-events-none absolute  bottom-0 left-0 h-[30%] w-full "
                      blurIntensity={2}
                    />
                    <article className="p-4 absolute bottom-0 space-y-4 w-full left-0">
                      <p className="2xl:text-xl sm:text-lg leading-[100%] text-neutral-200 mt-2">
                        {testimonial.quote}
                      </p>
                      <div className="border-t border-gray-900/20 pt-2  mt-auto flex justify-between items-end">
                        <div>
                          <p className="font-semibold text-neutral-200">
                            {testimonial.name}
                          </p>
                          <p className="text-neutral-300 sm:text-base text-sm">
                            {testimonial.title}
                          </p>
                          <p className="text-neutral-400 text-sm">
                            {testimonial.location}
                          </p>
                        </div>

                        <div className="sm:w-16 sm:h-16 w-12 h-12 rounded-full relative bg-neutral-950 cursor-pointer">
                          <span className="absolute top-0 opacity-0 group-hover:opacity-100 -left-10 group-hover:left-0 transition-all duration-500 ease-in-out grid place-content-center h-full w-full ">
                            <ArrowRight />
                          </span>
                          <img
                            src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/${testimonial.avatar}`}
                            alt={testimonial.name}
                            className="w-full h-full object-cover translate-x-0 group-hover:translate-x-10 group-hover:opacity-0 opacity-100  transition-all duration-500 ease-in-out"
                          />
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
testimonials14
