"use client";

import { useMediaQuery } from "@/hooks/use-media-query";
import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import useEmblaCarousel from "embla-carousel-react";
import {
  ArrowRight,
  ChevronLeft,
  ChevronRight,
  Plus,
  XIcon,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useState } from "react";
// Define the testimonial data structure
interface Testimonial {
  id: number;
  quote: string;
  name: string;
  title: string;
  company: string;
  location: string;
  imgSrc?: string;
  avatar: string;
  logo: string;
  tags: string[];
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    quote:
      "The AI-powered analytics have revolutionized our decision-making process. We've seen a 40% improvement in customer engagement since implementation.",
    name: "Sarah Chen",
    title: "VP of Product, QuantumTech",
    company: "QuantumTech",
    location: "San Francisco, California",
    imgSrc:
      "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2070&auto=format&fit=crop",
    avatar: "/people/image4.png",
    logo: "/logos/Logo-2.svg",
    tags: ["Technology", "AI", "Enterprise"],
  },
  {
    id: 2,
    quote:
      "Their healthcare management platform streamlined our operations and improved patient care coordination by 60%.",
    name: "Dr. Michael Roberts",
    title: "Chief Medical Officer, HealthBridge",
    company: "HealthBridge",
    location: "Boston, Massachusetts",
    imgSrc:
      "https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=2091&auto=format&fit=crop",
    avatar: "/people/aam4.jpg",
    logo: "/logos/Logo-1.svg",
    tags: ["Healthcare", "Technology", "Enterprise"],
  },
  {
    id: 3,
    quote:
      "The sustainable packaging solutions reduced our environmental impact while maintaining product quality. A game-changer for our brand.",
    name: "Emma Garcia",
    title: "Sustainability Director, EcoPackage",
    company: "EcoPackage",
    location: "Portland, Oregon",
    imgSrc:
      "https://images.unsplash.com/photo-1536939459926-301728717817?q=80&w=2070&auto=format&fit=crop",
    avatar: "/people/aam3.jpg",
    logo: "/logos/Logo-3.svg",
    tags: ["Manufacturing", "Sustainability", "B2B"],
  },
  {
    id: 4,
    quote:
      "Their fintech solution revolutionized our payment processing. We've reduced transaction times by 75% and improved security.",
    name: "James Wilson",
    title: "CTO, PayFlex",
    company: "PayFlex",
    location: "London, UK",
    imgSrc:
      "https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=2073&auto=format&fit=crop",
    avatar: "/people/aam1.png",
    logo: "/logos/Logo-4.svg",
    tags: ["Fintech", "Technology", "Security"],
  },
  {
    id: 5,
    quote:
      "The e-learning platform transformed our corporate training programs. Employee engagement increased by 85%.",
    name: "Rachel Martinez",
    title: "Head of L&D, EduTech Global",
    company: "EduTech Global",
    location: "Toronto, Canada",
    imgSrc:
      "https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070&auto=format&fit=crop",
    avatar: "/people/image1.png",
    logo: "/logos/Logo-5.svg",
    tags: ["Education", "Technology", "B2B"],
  },
  {
    id: 6,
    quote:
      "Their logistics optimization software cut our delivery times in half and reduced operational costs by 30%.",
    name: "David Kim",
    title: "Operations Director, LogisticsPro",
    company: "LogisticsPro",
    location: "Singapore",
    imgSrc:
      "https://images.unsplash.com/photo-1553413077-190dd305871c?q=80&w=2070&auto=format&fit=crop",
    avatar: "/people/image2.png",
    logo: "/logos/Logo-6.svg",
    tags: ["Logistics", "Technology", "Enterprise"],
  },
  {
    id: 7,
    quote:
      "The cybersecurity platform detected and prevented multiple critical threats. It's been crucial for our data protection.",
    name: "Alexandra Peters",
    title: "CISO, SecureShield",
    company: "SecureShield",
    location: "Austin, Texas",
    imgSrc:
      "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop",
    avatar: "/people/image3.png",
    logo: "/logos/Logo-7.svg",
    tags: ["Cybersecurity", "Technology", "Enterprise"],
  },
  {
    id: 8,
    quote:
      "Their renewable energy solutions helped us achieve our sustainability goals five years ahead of schedule.",
    name: "Thomas Anderson",
    title: "Sustainability Manager, GreenPower",
    company: "GreenPower",
    location: "Copenhagen, Denmark",
    imgSrc:
      "https://images.unsplash.com/photo-1466611653911-95081537e5b7?q=80&w=2070&auto=format&fit=crop",
    avatar: "/people/image4.png",
    logo: "/logos/Logo-8.svg",
    tags: ["Energy", "Sustainability", "B2B"],
  },
];

export default function TestimonialsSection() {
  const isMobile = useMediaQuery("(max-width: 768px)");

  const [modalId, setModalId] = useState<number | null>(null);
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: false,
    align: "center",
    slidesToScroll: isMobile ? 1 : 2,
    skipSnaps: false,
  });

  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);

  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]);

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

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (!emblaApi) return;

      if (event.key === "ArrowLeft") {
        emblaApi.scrollPrev();
      } else if (event.key === "ArrowRight") {
        emblaApi.scrollNext();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [emblaApi]);
  // console.log(nextBtnEnabled, prevBtnEnabled);
  const getModalData = testimonials.find(
    (testimonial) => testimonial.id === modalId,
  );
  console.log(getModalData);
  return (
    <section className="py-16 min-h-screen bg-white text-black overflow-x-hidden">
      <div className=" border-y border-dashed border-neutral-200 py-16">
        <div className="max-w-screen-xl 2xl:px-0 px-4 mx-auto  pb-5">
          <article className="text-center space-y-3 pb-10">
            <h1 className="sm:text-4xl text-2xl font-semibold">
              What would you do with more time?
            </h1>
            <p className="sm:text-lg text-sm text-neutral-600">
              Over 20 million hours saved for 30,000+ customers.
            </p>
          </article>
          <div className="relative">
            <div
              className="overflow-visible"
              ref={emblaRef}
              tabIndex={0}
              aria-label="Testimonial carousel, use arrow keys to navigate"
            >
              <div
                className="flex 2xl:gap-10 gap-5  w-full mx-auto "
                onMouseDown={(e) => e.preventDefault()}
                onDragStart={(e) => e.preventDefault()}
              >
                {testimonials.map((testimonial) => (
                  <div
                    key={testimonial.id}
                    className="flex-[0_0_100%]  group min-w-0 sm:flex-[0_0_85%] md:flex-[0_0_50%] lg:flex-[0_0_30.333%]"
                  >
                    <div className="relative bg-neutral-200 rounded-lg overflow-hidden shadow-sm">
                      <img
                        src={
                          `${process.env.NEXT_PUBLIC_ANIMATION_URL}${testimonial.logo}` ||
                          "/placeholder.svg"
                        }
                        alt={testimonial.company}
                        className="w-24 absolute top-2 left-2  object-contain  opacity-100"
                      />

                      <motion.img
                        src={`${testimonial.imgSrc}`}
                        alt={testimonial.company}
                        className="w-full aspect-[5/6] object-cover  transition-all duration-300 "
                      />

                      <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">
                        <div className="flex  gap-2 items-center justify-between mb-3">
                          <div className=" flex flex-wrap gap-2 items-center">
                            {testimonial.tags.map((tag, index) => (
                              <span
                                key={index}
                                className="px-2 py-1 text-xs font-medium bg-black/20 backdrop-blur-sm rounded-full text-white"
                              >
                                {tag}
                              </span>
                            ))}
                          </div>
                          <button
                            onClick={() => setModalId(testimonial.id)}
                            className="w-8 h-8 bg-neutral-500 grid place-content-center rounded-full text-white"
                          >
                            <Plus />
                          </button>
                        </div>
                      </article>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="flex gap-4  pt-4 justify-between items-center">
            <h1 className="flex sm:text-base text-xs items-center gap-2 text-neutral-600">
              View All Of Our Customer Stories <ArrowRight />
            </h1>
            <div className="flex items-center gap-2">
              <button
                onClick={scrollPrev}
                disabled={!prevBtnEnabled}
                className="sm:w-11 sm:h-11 w-8 h-8 rounded-full bg-neutral-500 text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center hover:bg-neutral-700 "
                aria-label="Previous slide"
              >
                <ChevronLeft className="sm:w-6 sm:h-6 w-5 h-5 inline-block" />
              </button>
              <button
                onClick={scrollNext}
                disabled={!nextBtnEnabled}
                className="sm:w-11 sm:h-11 w-8 h-8 relative group rounded-full bg-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed text-white flex items-center justify-center hover:bg-neutral-700 "
                aria-label="Next slide"
              >
                <ChevronRight className="sm:w-6 sm:h-6 w-5 h-5 inline-block" />
              </button>
            </div>
          </div>
        </div>
      </div>
      <AnimatePresence mode="wait">
        {modalId && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="overlay"
            className="bg-black/40 backdrop-blur-lg fixed inset-0 z-50 top-0 left-0 bottom-0 right-0 w-full h-full grid place-content-center"
            onClick={() => {
              setModalId(null);
            }}
          >
            <motion.div
              onClick={(e) => e.stopPropagation()}
              className="overflow-auto lg:w-[800px] w-[90%] bg-white text-black mx-auto rounded-2xl relative cursor-default p-6"
            >
              <div className="space-y-4">
                <div className="space-y-2">
                  <h2 className="sm:text-2xl text-xl font-semibold">
                    {getModalData?.company}
                  </h2>
                  <p className="text-gray-500 sm:text-base text-sm">
                    {getModalData?.title}
                  </p>
                  <div className="flex gap-2">
                    {getModalData?.tags.map((tag, index) => (
                      <span
                        key={index}
                        className="sm:px-2 px-1 py-1 text-xs font-medium bg-black/10 rounded-full"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="sm:flex gap-3 py-5 sm:space-y-0 space-y-2 ">
                  <img
                    src={getModalData?.imgSrc || "/placeholder.svg"}
                    alt={getModalData?.company}
                    className="w-[30%] object-cover rounded-lg  transition-all duration-300 "
                  />
                  <p className="sm:text-lg text-sm">{getModalData?.quote}</p>
                </div>
                <div className="flex items-center gap-4">
                  <img
                    src={
                      `${process.env.NEXT_PUBLIC_ANIMATION_URL}${getModalData?.avatar}` ||
                      "/placeholder.svg"
                    }
                    alt={getModalData?.name}
                    className="w-12 h-12 rounded-full object-cover"
                  />
                  <div>
                    <p className="font-medium">{getModalData?.name}</p>
                    <p className="text-sm text-gray-600">
                      {getModalData?.location}
                    </p>
                  </div>
                </div>
              </div>
              <button
                onClick={() => setModalId(null)}
                className="absolute right-6 top-6 sm:p-3 p-2 text-zinc-50 cursor-pointer bg-gray-900 rounded-xl hover:bg-gray-800"
                type="button"
                aria-label="Close dialog"
              >
                <XIcon size={24} />
              </button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}
carousel1
