"use client";

import React, { useEffect, useState } from "react";
import {
  motion,
  useAnimation,
  useTransform,
  useSpring,
  useMotionValue,
  AnimatePresence,
} from "motion/react";
import { useInView } from "react-intersection-observer";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";

import { useIsMobile } from "../hooks/use-is-mobile";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const easing = [0.6, -0.05, 0.01, 0.99];
const springConfig = { stiffness: 300, damping: 30 };
const swingConfig = { stiffness: 80, damping: 4 };

const RoadmapEvent = ({
  label,
  position,
  status,
  animate,
  isAbove,
  index,
  expandedIndex,
  isMobile,
  setExpandedIndex,
  roadmapMilestone,
  inView,
}) => {
  console.log(
    `Rendering TimelineEvent: ${label}, isMobile: ${isMobile}, inView: ${inView}`
  );

  const x = useMotionValue(0);
  const rotate = useSpring(
    useTransform(x, [-100, 100], [-12, 12]),
    springConfig
  );
  const translateX = useSpring(
    useTransform(x, [-100, 100], [-1, 1]),
    springConfig
  );
  const swing = useSpring(0, swingConfig);
  const initialSwing = useSpring(0, swingConfig);

  const handleMouseMove = (event) => {
    if (!isMobile) {
      const halfWidth = event.target.offsetWidth / 2;
      const offset = event.nativeEvent.offsetX - halfWidth + 10;
      console.log(`Mouse move offset: ${offset}`);
      x.set(offset);
      swing.set(offset * 0.05);
    }
  };

  const handleClick = () => {
    console.log(`Clicked: ${label}`);
    setExpandedIndex(expandedIndex === index ? null : index);
  };

  const getOffsetStyle = () => {
    let offset = 0;
    if (isMobile) {
      offset = 100;
      const result = isAbove
        ? { top: `${offset}px` }
        : { bottom: `${offset}px` };
      console.log(`Offset style (mobile):`, result);
      return result;
    }

    if (roadmapMilestone.gif || roadmapMilestone.image) {
      offset = 120 - label.length * 1.5;
    }

    const result = isAbove ? { top: `${offset}px` } : { bottom: `${offset}px` };
    console.log(`Offset style:`, result);
    return result;
  };

  const offsetStyle = getOffsetStyle();
  const hangingTransform = { translateX, x: swing };

  useEffect(() => {
    if (inView) {
      const initialAngle = 12;
      initialSwing.set(initialAngle);

      const initialSwingTimeout = setTimeout(() => {
        initialSwing.set(-initialAngle / 2);
        swing.set(-20);
      }, 500);

      return () => clearTimeout(initialSwingTimeout);
    }
  }, [inView, swing, index]);

  return (
    <>
      <motion.div
        className="flex items-center relative py-16"
        custom={index}
        initial={{
          opacity: 0,
          x: -100,
          scale: 0.8,
          rotate: isAbove ? -10 : 10,
          filter: "blur(2px)",
        }}
        animate={animate}
        transition={{ duration: 0.8, delay: index * 0.2, ease: easing }}
        onAnimationComplete={() => {
          initialSwing.set(0);
          console.log(`Animation complete for: ${label}`);
        }}
      >
        <motion.div
          onMouseMove={handleMouseMove}
          onClick={handleClick}
          style={{ ...offsetStyle, ...hangingTransform, translateX, rotate }}
          className="absolute flex justify-center -ml-6 md:-ml-9 w-24 md:w-36 cursor-pointer"
        >
          <motion.div
            style={{ rotate: initialSwing }}
            className="dark"
            layoutId={`${label}-${status}`}
          >
            <RoadmapItemLabel
              status={status}
              label={roadmapMilestone.label}
              gif={roadmapMilestone.gif}
              image={roadmapMilestone.image}
              price={roadmapMilestone.price}
              date={roadmapMilestone.date}
            />
          </motion.div>
        </motion.div>
        <CheckIcon
          className={cn(
            "text-white rounded-full p-1.5 transition-transform duration-300",
            status === "active"
              ? "bg-black/90 transform scale-125 stroke-pink-300"
              : "bg-gray-300",
            status === "current" ? "bg-pink-300 stroke-black" : ""
          )}
        />
        {position !== "last" && (
          <div
            className={cn(
              "h-0.5 w-12 sm:hidden md:block md:w-24 lg:w-28 xl:w-36 -mr-1 transition-colors duration-300",
              status === "active" ? "bg-black/90" : "bg-gray-300"
            )}
          />
        )}
      </motion.div>
      <AnimatePresence>
        {expandedIndex === index &&
        (roadmapMilestone.image || roadmapMilestone.gif) ? (
          <motion.div
            layout
            key={`${label}-${status}`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="fixed top-0 left-0 w-full h-full flex items-center justify-center  z-50"
            onClick={() => setExpandedIndex(null)}
          >
            <motion.img
              layoutId={`${label}-${status}`}
              className=" max-w-[800px] rounded-md"
              src={roadmapMilestone.image || roadmapMilestone.gif}
              alt={label}
            />
          </motion.div>
        ) : null}
      </AnimatePresence>
    </>
  );
};

const Roadmap = ({ milestones, isMobile }) => {
  const controls = useAnimation();
  const [ref, inView] = useInView({ threshold: 0.1, triggerOnce: false });
  const [expandedIndex, setExpandedIndex] = useState(null);

  useEffect(() => {
    controls.start({
      opacity: inView ? 1 : 0,
      x: inView ? 0 : -100,
      scale: inView ? 1 : 0.8,
      rotate: inView ? 0 : -10,
      filter: inView ? "blur(0px)" : "blur(2px)",
    });
  }, [controls, inView]);

  return (
    <div className="flex flex-col items-center justify-center py-12" ref={ref}>
      <div className="flex items-center space-x-1">
        {milestones.map((roadmapMilestone, index) => (
          <RoadmapEvent
            inView={inView}
            key={`${roadmapMilestone.label}-${index}`}
            label={roadmapMilestone.label}
            roadmapMilestone={roadmapMilestone}
            position={
              index === 0
                ? "first"
                : index === milestones.length - 1
                ? "last"
                : "middle"
            }
            status={roadmapMilestone.status}
            index={index}
            animate={controls}
            isAbove={roadmapMilestone.isAbove}
            expandedIndex={expandedIndex}
            setExpandedIndex={setExpandedIndex}
            isMobile={isMobile}
          />
        ))}
      </div>
    </div>
  );
};

const milestones = [
  {
    label: "Manifest",
    status: "active",
    date: "Feb, 24",
    isAbove: false,
    gif: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaWVwNXVkdXM3aWM4NXM2a2s2czFhd283NHdrbWFsdm43bGdsMXp4MyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SM08k77xWhQtQDDluI/giphy.gif",
    price: "$45",
  },
  {
    label: "Landing Page",
    status: "active",
    date: "March, 24",
    isAbove: true,
    gif: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGV2MWMzY2I4eW45NThuMWJ0enpsY2tyenZkNTJtNjk4am5hb2FmMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lmXonZXi4HBJldN0rt/giphy-downsized-large.gif",
    price: "$75",
  },
  {
    label: "Cult SEO",
    status: "active",
    date: "May, 24",
    isAbove: false,
    price: "$95",
    gif: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMmthd283MHdqYTAzNjFzZXptbGg2MGIzY3RudzBsdDdveGsxdG9haCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/w1LYqDDIpDaLKj6N5t/giphy.gif",
  },

  {
    label: "Travel Stash",
    status: "active",
    date: "May, 24",
    isAbove: true,
    image: "/travel-stash1.png",
    price: "$99",
  },
  {
    label: "Directory",
    status: "active",
    date: "June, 24",
    isAbove: false,
    price: "$105",
    gif: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExam4xMmVqZGVuaG05cDhxaWM2bDlwaWJ2OXVrN3E2aG54bDdjam1hZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7bzrBMHEsgPb20T3C5/giphy.gif",
  },
  {
    label: "Logo GPT",
    date: "October, 24",
    status: "active",
    isAbove: true,
    price: "$119",
    gif: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExajljemljODZlencyYnUzZnlsc2FtZmprbmFvNnlueDhwenp1NXdxdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AdRaGoL5xT1SdI6J5v/giphy.gif",
  },
  {
    label: "Prompt Stash",
    date: "Jan, 9",
    // status: "active",
    isAbove: false,
    price: "$129",
    gif: "/cult-prompt-agent-timeline-2.png",
  },
];

export const RoadmapSection = () => {
  const isMobile = useIsMobile();
  const usedMilestones = isMobile
    ? milestones.slice(milestones.length - 5, milestones.length - 1)
    : milestones;

  return (
    <div className="py-8 md:pt-24 flex flex-col items-start  md:items-center justify-start md:justify-center overflow-hidden">
      <div className="md:flex flex-col items-center justify-center md:py-8 md:pt-20 w-full">
        <div className="md:py-8">
          <div className="h-full md:flex flex-col items-start justify-center w-full">
            <Roadmap milestones={usedMilestones} isMobile={isMobile} />
          </div>
        </div>
      </div>
    </div>
  );
};

const RoadmapItemLabel = ({ label, gif, image, price, status, date }) => {
  const isCurrent = status === "current";

  return (
    <Card
      className={cn(
        "p-0 shadow-xl rounded-[8px] dark:bg-neutral-800 bg-white no-underline  transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80"
      )}
    >
      <CardHeader className="tracking-tight p-0 space-y-0">
        <CardTitle className="px-2 pt-1 pb-0 leading-4 text-white">
          {label}
        </CardTitle>
        <div className=" px-2 text-semibold text-white flex justify-between items-start gap-0.5 w-full">
          <CardDescription
            className={cn(
              status === "active" ? "line-through" : "",
              "text-semibold text-white "
            )}
          >
            {isCurrent ? <span className="text-pink-400">{price}</span> : price}
          </CardDescription>
          <CardDescription>{date}</CardDescription>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        {gif || image ? (
          <img
            src={image || gif}
            className="hidden md:block h-24 rounded-b-[8px]"
          />
        ) : null}
      </CardContent>
    </Card>
  );
};
Marketing Roadmap BlocksClose line inspired animation for a release roadmap section.
