"use client";
import { TimelineContent } from "@/components/ui/timeline-animation";
import VerticalCutReveal from "@/components/ui/vertical-cut-reveal";
import { cn } from "@/lib/utils";
import { motion, useSpring } from "motion/react";
import { MouseEvent, useRef, useState } from "react";

interface ImageItem {
  img: string;
  label: string;
  location: string;
  price: string;
  id: string;
}

export default function Experience5() {
  const [img, setImg] = useState<{ src: string; alt: string; opacity: number }>(
    {
      src: "",
      alt: "",
      opacity: 0,
    },
  );
  const [activeItemId, setActiveItemId] = useState<string | null>(null);

  const imageRef = useRef<HTMLImageElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const list: ImageItem[] = [
    {
      img: "https://images.unsplash.com/photo-1682806816936-c3ac11f65112?q=80&w=674&auto=format&fit=crop",
      label: "Rick Jonas Live",
      location: "America",
      price: "$1000",
      id: "25th Jun 2020",
    },
    {
      img: "https://images.unsplash.com/photo-1681063762354-d542c03bbfc5?q=80&w=674&auto=format&fit=crop",
      label: "Foruma 1 Grand prix",
      location: "Dubai",
      price: "$1000",
      id: "15th Aug 2021",
    },
    {
      img: "https://images.unsplash.com/photo-1679640034489-a6db1f096b70?q=80&w=674&auto=format&fit=crop",
      label: "Chopard Classic Rally",
      location: "Egypt",
      price: "$1000",
      id: "5th Jan 2022",
    },
    {
      img: "https://images.unsplash.com/photo-1679482451632-b2e126da7142?q=80&w=674&auto=format&fit=crop",
      label: "Priston Cup",
      location: "Canada",
      price: "$1000",
      id: "10th Feb 2023",
    },
    {
      img: "https://images.unsplash.com/photo-1736253420091-e83e720cc03f?q=80&w=645&auto=format&fit=crop",
      label: "Bostor Beex",
      location: "Ireland",
      price: "$1000",
      id: "17th Dec 2024",
    },
    {
      img: "https://plus.unsplash.com/premium_photo-1753027328769-f381d0540d28?q=80&w=613&auto=format&fit=crop",
      label: "UAE Waterbike Series",
      location: "Africa",
      price: "$1000",
      id: "15th May 2025",
    },
    {
      img: "https://images.unsplash.com/photo-1751554933476-d029737d58b2?q=80&w=680&auto=format&fit=crop",
      label: "Sunburn Music Festival",
      location: "Goa, India",
      price: "$350",
      id: "12th Dec 2022",
    },
    {
      img: "https://images.unsplash.com/photo-1743404318518-32d963f26501?q=80&w=687&auto=format&fit=crop",
      label: "Le Mans 24H",
      location: "France",
      price: "$500",
      id: "18th Jun 2023",
    },
    {
      img: "https://plus.unsplash.com/premium_photo-1753401940479-6dbe150d40d1?q=80&w=664&auto=format&fit=crop",
      label: "Tokyo Game Show",
      location: "Japan",
      price: "$200",
      id: "21st Sep 2024",
    },
    {
      img: "https://images.unsplash.com/photo-1753952253400-da11f889ee3f?q=80&w=615&auto=format&fit=crop",
      label: "Monte Carlo Yacht Gala",
      location: "Monaco",
      price: "$1200",
      id: "30th Apr 2023",
    },
    {
      img: "https://plus.unsplash.com/premium_photo-1754158110442-ee79aef5b350?q=80&w=655&auto=format&fit=crop",
      label: "Berlin Auto Expo",
      location: "Germany",
      price: "$420",
      id: "8th Nov 2022",
    },
    {
      img: "https://images.unsplash.com/photo-1751097006268-ae4601fcb117?q=80&w=659&auto=format&fit=crop",
      label: "Cape Town Air Show",
      location: "South Africa",
      price: "$750",
      id: "27th Mar 2025",
    },
  ];

  const spring = {
    stiffness: 150,
    damping: 15,
    mass: 0.1,
  };

  const imagePos = {
    x: useSpring(0, spring),
    y: useSpring(0, spring),
  };

  const handleMove = (e: MouseEvent<HTMLDivElement>) => {
    if (!imageRef.current || !containerRef.current) return;

    const containerRect = containerRef.current.getBoundingClientRect();
    const { clientX, clientY } = e;
    const relativeX = clientX - containerRect.left;
    const relativeY = clientY - containerRect.top;

    imagePos.x.set(relativeX - imageRef.current.offsetWidth / 2);
    imagePos.y.set(relativeY - imageRef.current.offsetHeight / 2);
  };

  const handleImageInteraction = (item: ImageItem, opacity: number) => {
    setImg({ src: item.img, alt: item.label, opacity });
    setActiveItemId(opacity > 0 ? item.id : null);
  };

  const get3DTransform = (itemId: string, index: number) => {
    if (activeItemId === itemId) {
      // Active item - flat/normal
      return "perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px)";
    } else if (activeItemId !== null) {
      // Non-active items when there's an active one - 3D perspective
      const rotateX = Math.sin(index * 0.5) * 15; // Varied X rotation
      const rotateY = Math.cos(index * 0.7) * 20; // Varied Y rotation
      const translateZ = -50; // Push back in 3D space
      return `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(${translateZ}px)`;
    } else {
      // No active item - all flat
      return "perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px)";
    }
  };
  const revealVariants = {
    visible: (i: number) => ({
      y: 0,
      opacity: 1,
      filter: "blur(0px)",
      transition: {
        delay: i * 0.1,
        duration: 0.5,
      },
    }),
    hidden: {
      filter: "blur(20px)",
      y: 40,
      opacity: 0,
    },
  };
  return (
    <div className="relative xl:px-0 px-4 bg-gray-100 min-h-screen w-full shadow-sm py-10">
      {/* try this background snippets effect */}
      {/* <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#0000001a_1px,transparent_1px),linear-gradient(to_bottom,#0000001a_1px,transparent_1px)] bg-[size:45px_45px] [mask-image:radial-gradient(ellipse_40%_50%_at_50%_50%,#000_70%,transparent_110%)]"></div>
      <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,220,196,0.3)_40%,rgba(248,250,252,1)_100%)]"></div> */}

      <article className="max-w-7xl mx-auto sm:flex justify-between items-end sm:pb-16 pb-6">
        <h1 className="lg:text-8xl md:text-6xl text-6xl font-medium text-black/80 ">
          <VerticalCutReveal
            splitBy="characters"
            staggerDuration={0.025}
            staggerFrom="first"
            transition={{
              type: "spring",
              stiffness: 200,
              damping: 21,
            }}
          >
            {`Shipping*`}
          </VerticalCutReveal>
        </h1>
        <div className="sm:w-96 w-full space-y-1.5 sm:pt-0 pt-4">
          <motion.p
            initial="hidden"
            animate="visible"
            variants={revealVariants}
            className="text-sm font-semibold text-end"
          >
            Lorem ipsum dolor sit consectetur
          </motion.p>
          <motion.p
            initial="hidden"
            animate="visible"
            variants={revealVariants}
            className="text-justify text-sm"
          >
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat
            aperiam dolorem voluptates mollitia
          </motion.p>
        </div>
      </article>
      <div
        ref={containerRef}
        onMouseMove={handleMove}
        className="relative mx-auto p-4"
        style={{ perspective: "1000px", transformStyle: "preserve-3d" }}
      >
        {list.map((item, index) => (
          <TimelineContent
            key={index}
            animationNum={index}
            timelineRef={containerRef}
            customVariants={revealVariants}
            className=" max-w-7xl mx-auto origin-center group border-t-2 last:border-none border-black "
          >
            <motion.div
              key={item.label}
              onMouseEnter={() => handleImageInteraction(item, 1)}
              onMouseMove={() => handleImageInteraction(item, 1)}
              onMouseLeave={() => handleImageInteraction(item, 0)}
              className="w-full cursor-pointer text-center flex sm:flex-row sm:py-0 py-3 flex-col items-center sm:justify-between text-black"
              style={{
                transform: get3DTransform(item.id, index),
                transformStyle: "preserve-3d",
              }}
              animate={{
                opacity: activeItemId && activeItemId !== item.id ? 0.7 : 1,
                scale: activeItemId && activeItemId !== item.id ? 0.95 : 1,
              }}
              transition={{
                transform: { duration: 0.6, ease: "easeOut" },
                opacity: { duration: 0.4, ease: "easeOut" },
                scale: { duration: 0.4, ease: "easeOut" },
              }}
            >
              <div className="lg:gap-14 sm:gap-6 gap-4 flex items-center text-left w-full sm:justify-normal justify-between">
                <span
                  className={cn(
                    "lg:text-xl sm:text-sm text-xs rounded-xl uppercase md:w-40 sm:w-20 ",
                    activeItemId === item.id ? "text-red-500" : "text-black",
                  )}
                >
                  {item.id}
                </span>
                <p
                  className={cn(
                    "lg:text-2xl sm:text-base text-sm font-medium uppercase flex items-center gap-2 lg:w-[25rem] md:w-96 sm:w-60 justify-start",
                    activeItemId === item.id ? "text-red-500" : "text-black",
                  )}
                >
                  <span
                    className={cn(
                      "inline-block w-3 h-3 rounded-sm",
                      activeItemId === item.id ? "bg-red-500" : "bg-black",
                    )}
                  ></span>
                  {item.label}*
                </p>
              </div>
              <div className="lg:w-96 sm:w-60 w-full flex justify-between items-center gap-4">
                <span className="text-sm rounded-xl">{item.location}</span>
                <span className="text-sm rounded-xl">{item.price}</span>
              </div>
            </motion.div>
          </TimelineContent>
        ))}

        {img.src && (
          <motion.img
            ref={imageRef}
            src={img.src}
            alt={img.alt}
            className="w-60 h-64 grayscale rounded-lg object-cover absolute top-0 left-0 pointer-events-none z-50"
            style={{
              x: imagePos.x,
              y: imagePos.y,
              opacity: img.opacity,
            }}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{
              opacity: img.opacity,
              scale: img.opacity > 0 ? 1 : 0.8,
            }}
            transition={{
              opacity: { duration: 0.3, ease: "easeOut" },
              scale: { duration: 0.4, ease: "backOut" },
            }}
          />
        )}
      </div>
    </div>
  );
}
experience5
