"use client";

import useEmblaCarousel from "embla-carousel-react";
import { ChevronLeft, ChevronRight, Quote } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useState, useRef } from "react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";

// Define the testimonial data structure
interface Testimonial {
  id: number;
  quote: string;
  name: string;
  title: string;
  company: string;
  location: string;
  avatar: string;
  logo: string;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    quote: "They tailor their solutions to our specific needs and goals.",
    name: "Denis Slavska",
    title: "CTO, Ailitic",
    company: "Ailitic",
    location: "New York City, New York",
    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",
    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",
    location: "New York City, New York",
    avatar: "/people/image3.png",
    logo: "/logos/Logo-3.svg",
  },
  {
    id: 4,
    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",
    avatar: "/people/image4.png",
    logo: "/logos/Logo-2.svg",
  },
];

export default function TestimonialsSection() {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: false,
    align: "start",
    slidesToScroll: 2,
    skipSnaps: false,
  });

  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
  const [isShiftPressed, setIsShiftPressed] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
  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="flex max-w-screen-xl 2xl:px-0 px-2 mx-auto items-center justify-between py-5">
        <article>
          <p className="uppercase text-sm tracking-wider font-medium text-gray-400 mb-2">
            OUR REVIEWS
          </p>
          <h2 className="sm:text-5xl text-4xl font-medium">
            What Our <span className="text-gray-400">Clients</span> Say
          </h2>
        </article>
        <div className="flex sm:gap-4 gap-2 mt-8 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 transition-colors"
            aria-label="Previous slide"
          >
            <ChevronLeft className="sm:w-6 sm:h-6 w-4 h-4" />
          </button>
          <button
            onClick={scrollNext}
            disabled={!nextBtnEnabled}
            className="sm:w-14 sm:h-14 w-10 h-10 rounded-full bg-neutral-800 disabled:opacity-50 disabled:cursor-not-allowed text-white flex items-center justify-center hover:bg-gray-800 transition-colors"
            aria-label="Next slide"
          >
            <ChevronRight className="sm:w-6 sm:h-6 w-4 h-4" />
          </button>
        </div>
      </div>
      <div
        ref={containerRef}
        className={`relative ${isShiftPressed ? "cursor-grab" : ""} ${
          isDragging ? "cursor-grabbing" : ""
        }`}
        style={{
          userSelect: "auto",
          WebkitUserSelect: "auto",
        }}
      >
        <div
          className="overflow-hidden max-w-screen-xl 2xl:px-0 px-2 mx-auto"
          ref={emblaRef}
          style={{
            userSelect: "none",
            WebkitUserSelect: "none",
            WebkitTouchCallout: "none",
            WebkitTapHighlightColor: "transparent",
          }}
        >
          <div
            className="flex"
            onMouseDown={(e) => e.preventDefault()}
            onDragStart={(e) => e.preventDefault()}
          >
            {testimonials.map((testimonial) => (
              <div
                key={testimonial.id}
                onMouseEnter={() => setHoveredCardId(testimonial.id.toString())}
                onMouseLeave={() => setHoveredCardId(null)}
                className="flex-[0_0_100%] min-w-0 sm:flex-[0_0_85%] md:flex-[0_0_50%] lg:flex-[0_0_33.333%] sm:pl-4"
                style={{
                  userSelect: "none",
                  WebkitUserSelect: "none",
                }}
              >
                <div className="bg-neutral-950 rounded-2xl p-8 h-full relative shadow-sm flex flex-col justify-between">
                  {hoveredCardId === testimonial.id.toString() && (
                    <AnimatedBackground
                      circles={[
                        { fill: "#1640fb" },
                        { fill: "#08ff5a" },
                        { fill: "#fb5716" },
                      ]}
                    />
                  )}
                  <div className="flex justify-between items-center relative z-[1] sm:mb-8 mb-2">
                    <div className="bg-neutral-800 rounded-full px-4 py-1">
                      <Image
                        src={
                          `${process.env.NEXT_PUBLIC_ANIMATION_URL}${testimonial.logo}` ||
                          "/placeholder.svg"
                        }
                        alt={testimonial.company}
                        width={100}
                        height={40}
                        className="h-8 w-auto object-contain"
                        draggable={false}
                      />
                    </div>
                    <div className="w-16 h-16 rounded-full overflow-hidden">
                      <Image
                        src={
                          `${process.env.NEXT_PUBLIC_ANIMATION_URL}${testimonial.avatar}` ||
                          "/placeholder.svg"
                        }
                        alt={testimonial.name}
                        width={64}
                        height={64}
                        className="w-full h-full object-cover"
                        draggable={false}
                      />
                    </div>
                  </div>

                  <div className="sm:py-12 py-8 relative z-[1]">
                    <Quote className="text-5xl fill-neutral-200 stroke-none rotate-180" />
                    <p className="text-3xl leading-[100%] text-neutral-200 mt-2">
                      {testimonial.quote}
                    </p>
                  </div>

                  <div className="border-t border-gray-900 pt-4 mt-auto relative z-[1]">
                    <p className="font-semibold text-neutral-200">
                      {testimonial.name}
                    </p>
                    <p className="text-neutral-300">{testimonial.title}</p>
                    <p className="text-neutral-400 text-sm">
                      {testimonial.location}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
testimonials4
