"use client";

import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import useEmblaCarousel from "embla-carousel-react";
import {
  ArrowRight,
  ChevronLeft,
  ChevronRight,
  Plus,
  X as 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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image1.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam4.jpg`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam3.jpg`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam1.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image1.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image2.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image3.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/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: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/image4.png`,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/logos/Logo-8.svg`,
    tags: ["Energy", "Sustainability", "B2B"],
  },
];

export default function TestimonialsSection() {
  const [modalId, setModalId] = useState<number | null>(null);
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
  });

  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]);
  // console.log(nextBtnEnabled, prevBtnEnabled);
  const getModalData = testimonials.find(
    (testimonial) => testimonial.id === modalId,
  );
  return (
    <section className="py-16 min-h-screen bg-black text-white overflow-x-hidden">
      <div className=" border-y border-dashed border-neutral-800 py-16">
        <div className="max-w-screen-xl mx-auto relative  pb-5">
          <article className="text-center space-y-3 pb-10">
            <h1 className="sm:text-4xl text-3xl font-semibold">
              What would you do with more time?
            </h1>
            <p className="sm:text-lg  text-neutral-400">
              Over 20 million hours saved for 30,000+ customers.
            </p>
            <h1 className="flex w-fit mx-auto sm:text-base text-sm items-center gap-2 text-blue-500 pt-2">
              View All Of Our Customer Stories <ArrowRight />
            </h1>
          </article>
          <div className="relative">
            <div className="overflow-visible" ref={emblaRef}>
              <div className="flex 2xl:gap-10 gap-5 2xl:pl-10 pl-5  w-full mx-auto ">
                {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_70%]"
                  >
                    <div className="relative bg-neutral-200 rounded-lg overflow-hidden shadow-sm">
                      <img
                        src={testimonial.logo}
                        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-video 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 relative z-[5] hover:bg-black bg-black/20 backdrop-blur-sm grid place-content-center rounded-full text-white"
                          >
                            <Plus />
                          </button>
                        </div>
                      </article>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <button
              onClick={scrollPrev}
              disabled={!prevBtnEnabled}
              className="w-11 h-11 backdrop-blur-lg absolute top-[42%] sm:left-0 left-2 rounded-full bg-white/20 hover:text-black text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center hover:bg-white "
              aria-label="Previous slide"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>
            <button
              onClick={scrollNext}
              disabled={!nextBtnEnabled}
              className="w-11 h-11 backdrop-blur-lg absolute top-[42%] sm:right-0 right-2 rounded-full bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed hover:text-black text-white flex items-center justify-center hover:bg-white "
              aria-label="Next slide"
            >
              <ChevronRight className="w-6 h-6 inline-block" />
            </button>
          </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={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>
  );
}
carousel2
