"use client";

import ShimmerButton from "@/components/ui/shimmer-button";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { ChevronRight, Play } from "lucide-react";
import { motion, useAnimationControls } from "motion/react";
import type React from "react";
import { useEffect, useRef, useState } from "react";
import ExportButtonWithAnimation from "./export-button";
import Header from "./header";
type TimelineStep = {
  label: string;
  date: string;
  active: boolean;
  completed: boolean;
};

interface SvgIconProps extends React.SVGProps<SVGSVGElement> {}

const LightingIcon: React.FC<SvgIconProps> = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      stroke="#fff"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.5"
      d="M15.5 2H8L5 13.5h4L7 22 20 8h-6z"
    />
    <path
      stroke="#fff"
      strokeLinecap="round"
      strokeWidth="1.5"
      d="m10.5 5.5-1 4"
    />
  </svg>
);

function index() {
  const firstDivControls = useAnimationControls();
  const secondDivControls = useAnimationControls();

  const [steps, setSteps] = useState<TimelineStep[]>([
    { label: "Created", date: "Jul 13", active: true, completed: true },
    { label: "Sent", date: "Jul 14", active: false, completed: false },
    { label: "Finalized", date: "Jul 15", active: false, completed: false },
    { label: "Onboarding", date: "Jul 16", active: false, completed: false },
  ]);

  const heroRef = useRef<HTMLElement | null>(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [animationState, setAnimationState] = useState("initial");

  useEffect(() => {
    // Simulate timeline progression
    const timer = setTimeout(() => {
      if (currentStep < steps.length - 1) {
        const newSteps = [...steps];

        // Complete current step
        newSteps[currentStep].completed = true;

        // Activate next step
        newSteps[currentStep + 1].active = true;

        setSteps(newSteps);
        setCurrentStep(currentStep + 1);
      } else {
        // Reset to start the loop over
        const resetSteps = steps.map((step, idx) => ({
          ...step,
          active: idx === 0,
          completed: idx === 0,
        }));

        setSteps(resetSteps);
        setCurrentStep(0);
      }
    }, 2000); // Progress every 2 seconds

    return () => clearTimeout(timer);
  }, [currentStep, steps]);

  // Animation sequence using useEffect to create the loop
  useEffect(() => {
    const animationSequence = async () => {
      // Step 1: Animate first div from left 0% to 100%
      await firstDivControls.start({
        left: "95%",
        transition: { duration: 5, ease: "easeInOut" },
      });

      // Step 2: Fade out first div
      await firstDivControls.start({
        opacity: 0,
        transition: { duration: 0.5, ease: "easeOut" },
      });

      // Step 3: Reset first div position (instantly)
      firstDivControls.set({ left: "0%" });

      // Step 4: Show second div
      await secondDivControls.start({
        opacity: 1,
        transition: { duration: 0.5, ease: "easeIn" },
      });

      // Step 5: Animate second div from left 0% to 100%
      await secondDivControls.start({
        left: "95%",
        transition: { duration: 5, ease: "easeInOut" },
      });

      // Step 6: Fade out second div
      await secondDivControls.start({
        opacity: 0,
        transition: { duration: 0.5, ease: "easeOut" },
      });

      // Step 7: Reset second div position (instantly)
      secondDivControls.set({ left: "0%" });

      // Step 8: Show first div again
      firstDivControls.start({
        opacity: 1,
        transition: { duration: 0.5, ease: "easeIn" },
      });

      // Small delay before restarting the sequence
      setTimeout(animationSequence, 500);
    };

    // Start the animation sequence
    animationSequence();
  }, [firstDivControls, secondDivControls]);
  return (
    <>
      <section
        className="min-h-screen relative overflow-x-hidden bg-neutral-100 "
        ref={heroRef}
      >
        <Header />
        <div className="w-full py-28  md:grid md:grid-cols-2 flex flex-col md:place-content-center max-w-(--breakpoint-xl) xl:px-0 md:px-10 px-4 mx-auto text-black">
          <article className="space-y-5 flex-col flex justify-center text-left pb-10">
            <a
              href="#"
              className="bg-white sm:text-sm text-xs w-fit p-1 flex gap-1.5 items-center shadow-[0px_1px_4px_rgba(0,0,0,0.1),0px_1px_1px_rgba(0,0,0,0.15)] rounded-full"
            >
              <span className="bg-[#FC1F5B] border-[#EA0040] border [box-shadow:inset_0px_-2px_6px_2px_#f92b63,inset_0px_4px_6px_2px_#ff7399] p-1 inline-block rounded-full px-2.5 text-white">
                New
              </span>{" "}
              <p>Recommended for Google Workspace</p> <ChevronRight />
            </a>
            <TimelineContent
              animationNum={0}
              timelineRef={heroRef}
              as="h1"
              className="xl:text-6xl md:text-5xl text-4xl font-bold"
            >
              Be there for your <br /> Clients, every
            </TimelineContent>
            <TimelineContent
              animationNum={0}
              timelineRef={heroRef}
              as="p"
              className="xl:text-5xl md:text-4xl text-3xl italic font-normal text-[#FC1F5B]"
            >
              Step of the way
            </TimelineContent>

            <TimelineContent
              animationNum={1}
              timelineRef={heroRef}
              as="p"
              className="text-sm text-zinc-500"
            >
              Build better relationships and win more customers with layopeer +
              Google.
            </TimelineContent>
            <div className="flex gap-5 items-center ">
              <TimelineContent as="div" animationNum={2} timelineRef={heroRef}>
                <ShimmerButton
                  className={"shadow-2xl  border-2 px-2 overflow-hidden h-14"}
                >
                  <span className="whitespace-pre-wrap flex gap-1 text-white items-center text-center sm:text-sm text-xs font-medium leading-none tracking-tight lg:text-lg">
                    <LightingIcon /> Try Copper Free
                  </span>
                </ShimmerButton>
              </TimelineContent>

              <TimelineContent
                as="button"
                type="button"
                animationNum={2}
                timelineRef={heroRef}
                className="p-3.5 font-semibold gap-2 sm:text-base text-sm flex rounded-xl backdrop-blur-md bg-white  items-center  shadow-[0px_1px_4px_rgba(0,0,0,0.1),0px_1px_1px_rgba(0,0,0,0.15)]"
              >
                <span className="w-8 h-8 bg-white text-black rounded-full grid place-content-center">
                  <Play fill="black" size={20} />
                </span>
                Watch Demo
              </TimelineContent>
            </div>
          </article>

          <div
            className={
              "p-5 pb-10 relative space-y-5  bg-linear-to-t from-white to-gray-50"
            }
          >
            {/* <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[16px_16px]"></div> */}
            <div className="absolute top-0 left-0 w-full h-full border-[1.4px] border-[#DDDFE1] ">
              <div className="absolute -top-2.5 left-0 w-full h-2  inline-block rounded-full">
                <motion.div
                  className="bg-neutral-100 rounded-full w-10 h-4 absolute left-[40%]  before:absolute before:left-2 before:top-1 before:content-[''] before:w-6 before:h-2 before:bg-white before:border-2 before:border-[#DDDFE1] before:rounded-full"
                  initial={{ left: "0%", opacity: 1 }}
                  animate={firstDivControls}
                />
              </div>
              <div className="absolute bottom-0.5 left-0 w-full h-2  inline-block rounded-full">
                <motion.div
                  className="bg-neutral-100 rounded-full w-10 h-4 absolute left-[40%] before:absolute before:left-2 before:top-1 before:content-[''] before:w-6 before:h-2 before:bg-white before:border-2 before:border-[#DDDFE1] before:rounded-full"
                  initial={{ left: "0%", opacity: 0 }}
                  animate={secondDivControls}
                />
              </div>
              <div className="absolute -top-3 -left-3 w-6 h-6 bg-neutral-100 inline-block rounded-full" />
              <div className="absolute -right-3 -top-3 w-6 h-6 bg-neutral-100 inline-block rounded-full" />
              <div className="absolute -bottom-3 -left-3 w-6 h-6 bg-neutral-100 inline-block rounded-full" />
              <div className="absolute -bottom-3 -right-3 w-6 h-6 bg-neutral-100 inline-block rounded-full" />
              <div
                className={`absolute w-full -top-2  h-2 left-0 before:absolute before:-left-2 before:top-0 before:content-[''] before:w-4 before:h-4 before:bg-white before:border-4 before:border-[#DDDFE1] before:rounded-full  after:absolute after:-right-2 after:top-0 after:content-[''] after:w-4 after:h-4  after:bg-white after:border-4 after:border-[#DDDFE1] after:rounded-full`}
              />
              <div
                className={`absolute w-full bottom-0  h-2 left-0 before:absolute before:-left-2 before:top-0 before:content-[''] before:w-4 before:h-4 before:bg-white before:border-4 before:border-[#DDDFE1] before:rounded-full  after:absolute after:-right-2 after:top-0 after:content-[''] after:w-4 after:h-4  after:bg-white after:border-4 after:border-[#DDDFE1] after:rounded-full`}
              />
            </div>

            <div className="w-full bg-[#F3F3F6] border-2 border-[#DDDFE1] rounded-lg p-3 ">
              <div className="bg-white  border-[1.2px] relative rounded-lg border-white shadow-[0px_1.20415px_16.8582px_rgba(0,0,0,0.1),0px_1.20415px_1.20415px_rgba(0,0,0,0.15)]">
                <div className="absolute left-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full before:bg-[#DDDFE1] after:content-[''] after:w-2 after:h-2 after:rounded-full after:bg-[#DDDFE1]" />

                <div className="absolute right-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full before:bg-[#DDDFE1] after:content-[''] after:w-2 after:h-2 after:rounded-full after:bg-[#DDDFE1]" />
                <div className="flex gap-2   text-sm relative   py-3 pl-8 pr-2 ">
                  <div className="flex gap-0 justify-end  overflow-hidden -space-x-5 ">
                    <figure className=" xl:w-14 xl:h-14 w-12 h-12 border-4  rounded-full shrink-0 border-white">
                      <img
                        src={`https://pro-section.ui-layouts.com/people/image1.png`}
                        alt="image-1"
                        className="w-full h-full object-cover "
                      />
                    </figure>
                    <figure className=" xl:w-14 xl:h-14 w-12 h-12 border-4  rounded-full shrink-0 border-white relative z-1">
                      <img
                        src={`https://pro-section.ui-layouts.com/people/image2.png`}
                        alt="image-2"
                        className="w-full h-full object-cover "
                      />
                    </figure>
                    <figure className=" xl:w-14 xl:h-14 w-12 h-12 border-4  rounded-full shrink-0 border-white relative z-2 ">
                      <img
                        src={`https://pro-section.ui-layouts.com/people/image4.png`}
                        alt="image"
                        className="w-full h-full object-cover "
                      />
                    </figure>
                  </div>
                  <span className="font-medium xl:text-lg sm:text-sm text-xs inline-block sm:pr-1 px-1 ">
                    All your customer info in one place <br />
                    <span className=" text-[#FC1F5B]">+12,500</span> Active
                    users
                  </span>
                </div>
              </div>
            </div>

            <div
              className={`w-full transition-colors duration-1000   border-2 rounded-lg p-3 ${steps[2].completed ? "bg-green-200 border-green-600" : "bg-[#F3F3F6] border-[#DDDFE1]"}`}
            >
              <div className="bg-white   relative rounded-lg  shadow-[0px_1.20415px_16.8582px_rgba(0,0,0,0.1),0px_1.20415px_1.20415px_rgba(0,0,0,0.15)]">
                <div
                  className={`absolute left-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full  ${steps[2].completed ? "before:bg-green-400 after:bg-green-400" : "before:bg-[#DDDFE1] after:bg-[#DDDFE1]"} after:content-[''] after:w-2 after:h-2 after:rounded-full `}
                />
                <div
                  className={`absolute right-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full  ${steps[2].completed ? "before:bg-green-400 after:bg-green-400" : "before:bg-[#DDDFE1] after:bg-[#DDDFE1]"} after:content-[''] after:w-2 after:h-2 after:rounded-full `}
                />

                <h1
                  className={`p-4 px-8 text-xl  border-b-2 ${steps[2].completed ? "border-green-600" : "border-[#DFDFE3]"}`}
                >
                  Contract
                </h1>
                <div className="p-4 px-8">
                  <figure className="  rounded-full flex gap-3 ">
                    <img
                      src={`https://pro-section.ui-layouts.com/people/image3.png`}
                      alt="image-1"
                      className=" xl:w-20 xl:h-20 w-16 h-16  object-cover shrink-0 "
                    />
                    <article>
                      <h1 className="font-semibold xl:text-lg text-sm">
                        John Adrian
                      </h1>
                      <p className="text-gray-900 xl:text-sm text-xs">
                        Product Designer
                      </p>
                      <span
                        className={`mt-2 inline-block xl:text-sm text-xs transition-all duration-1000  ${steps[2].completed ? "bg-green-100 text-green-600" : "bg-orange-100 text-orange-600"}  px-3 font-semibold  py-1 rounded-full`}
                      >
                        {steps[2].completed ? "Done" : "In Progress"}
                      </span>
                    </article>
                  </figure>
                </div>
                <div className="px-8 p-4">
                  <div className="relative">
                    {/* Timeline Bar */}
                    <div className="w-[85%] mx-auto h-2 bg-gray-200 rounded-full">
                      {/* Completed Progress */}
                      <div
                        className={`h-full  ${steps[2].completed ? "bg-green-500" : "bg-[#FC1F5B]"} rounded-full transition-all duration-1000 ease-in-out`}
                        style={{
                          width: `${(currentStep / (steps.length - 1)) * 100}%`,
                        }}
                      />
                    </div>

                    {/* Timeline Points */}
                    <div className="absolute w-[95%] xl:-top-3 -top-2 left-[2.5%] right-[2.5%] flex items-center justify-between ">
                      {steps.map((step, index) => (
                        <div key={index} className="flex flex-col items-center">
                          {/* Circle Point */}
                          <div
                            className={`xl:w-8 xl:h-8 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-1000  delay-300 ${
                              step.completed || step.active
                                ? steps[2].completed
                                  ? "bg-green-500 border-green-500"
                                  : "bg-[#FC1F5B] border-[#EA0040]"
                                : "bg-white border-gray-200"
                            }`}
                          >
                            <div
                              className={`xl:w-4 xl:h-4 w-3 h-3 rounded-full delay-500 ${step.active || step.completed ? "bg-white" : "bg-gray-200"}`}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="w-full flex items-center justify-between ">
                      {steps.map((step, index) => (
                        <div key={index} className="flex flex-col items-center">
                          {/* Label */}
                          <div className="mt-4 text-center">
                            <div className="xl:text-sm text-xs font-medium">
                              {step.label}
                            </div>
                            <div
                              className={`transition-opacity xl:text-base text-xs duration-1000 delay-500 ${step.active || step.completed ? "opacity-100" : "opacity-0"}`}
                            >
                              {step.date}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className={`w-full border-2 rounded-lg p-3 ${animationState === "complete" ? "bg-green-200 border-green-600" : "bg-[#F3F3F6] border-[#DDDFE1]"} `}
            >
              <div className="bg-white  border-[1.2px] relative rounded-lg border-white shadow-[0px_1.20415px_16.8582px_rgba(0,0,0,0.1),0px_1.20415px_1.20415px_rgba(0,0,0,0.15)]">
                <div
                  className={`absolute left-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full  ${animationState === "complete" ? "before:bg-green-400 after:bg-green-400" : "before:bg-[#DDDFE1] after:bg-[#DDDFE1]"} after:content-[''] after:w-2 after:h-2 after:rounded-full `}
                />
                <div
                  className={`absolute right-2 top-2 bottom-2 flex flex-col justify-between before:content-[''] before:w-2 before:h-2 before:rounded-full  ${animationState === "complete" ? "before:bg-green-400 after:bg-green-400" : "before:bg-[#DDDFE1] after:bg-[#DDDFE1]"} after:content-[''] after:w-2 after:h-2 after:rounded-full `}
                />
                <div className="sm:flex justify-between relative  px-7 p-4 ">
                  <article className="pb-2">
                    <h1 className="font-semibold xl:text-xl text-sm">
                      Project Proposal
                    </h1>
                    <p className="text-gray-800 xl:text-base text-xs">
                      Shared with 12 team members
                    </p>
                  </article>

                  <ExportButtonWithAnimation
                    setAnimationState={setAnimationState}
                    animationState={animationState}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default index;