"use client";
import { motion } from "motion/react";
import Image, { StaticImageData } from "next/image";
import { AnimatedArrow, Isologo, NavigationLink } from "@/components/ui";
import { TargetAndTransition } from "motion";
import { useState } from "react";
import { cn, formatNumber, formatPlanWords, hasDiscount } from "@/lib/utils";

type OurPlansCardProps = {
  isInView?: boolean;
  animateValues?: (isInView: boolean) => TargetAndTransition;
  img: { src: StaticImageData; alt: string };
  price: string;
  priceDiscount?: string | null;
  titulo: string;
  featured?: boolean;
  delay?: number;
};

const OurPlansCard = ({
  isInView,
  animateValues,
  img,
  price,
  priceDiscount,
  titulo,
  featured,
  delay = 0,
}: OurPlansCardProps) => {
  const Wrapper = animateValues ? motion.div : "div";
  const [animationComplete, setAnimationComplete] = useState(false);
  const formattedTitle = formatPlanWords(titulo);
  return (
    <Wrapper
      className={cn("max-w-155 relative rounded-3xl", {
        "transform-3d perspective-[93.75rem] will-change-transform border": animateValues,
      })}
      {...(animateValues
        ? {
            animate: {
              borderColor: isInView ? "rgba(0,0,0,0)" : "var(--color-contigo-verde)",
              scale: isInView ? 1 : 0.8,
              rotateY: isInView ? 0 : 30,
              ...animateValues(isInView!),
            },
            transition: {
              duration: 1.25,
              delay,
              ease: [0.25, 0.1, 0.25, 1],
            },
            onAnimationComplete: () => isInView && setAnimationComplete(true),
          }
        : {})}
    >
      <div className="relative z-20 rounded-3xl overflow-hidden">
        <div className="w-full relative">
          <Image src={img.src} alt={img.alt} className="w-full" priority />
          {featured && (
            <div className="bg-contigo-verde text-white text-center p-2 absolute w-full bottom-0 left-0 text-[min(3vw,1.5rem)]">
              DESTACADO
            </div>
          )}
        </div>

        <div className="bg-white p-8 text-base font-semibold space-y-6">
          <div className="text-contigo-negro font-light text-[min(6vw,1.3125rem)] md:text-[min(3vw,1.5rem)] flex items-center gap-2">
            <Isologo className="w-4 fill-contigo-verde" />
            <h3>
              {formattedTitle[0]} <span className="font-bold">{formattedTitle[1]}</span>
            </h3>
          </div>

          {hasDiscount(priceDiscount) ? (
            <div className="border-y border-[#D9D9D9] py-4 flex flex-wrap items-center justify-between gap-3">
              <div className="border-l-4 border-contigo-verde pl-3">
                <p className="text-contigo-violeta font-bold text-[min(3vw,0.75rem)] leading-tight">
                  PRECIO EXCLUSIVO <span className="underline">ONLINE</span> DESDE
                </p>
                <span className="text-[min(8vw,1.75rem)] md:text-[2rem]">${formatNumber(priceDiscount!)}</span>
                <span className="font-light"> por mes</span>
              </div>
              <div className="text-right">
                <p className="text-contigo-violeta text-[min(3vw,0.75rem)]">Precio sin descuento online</p>
                <p className="text-contigo-violeta line-through">${formatNumber(price)}</p>
              </div>
            </div>
          ) : (
            <div className="flex justify-between items-center border-y border-[#D9D9D9] py-4 flex-wrap">
              <span className="font-light">Desde</span>
              <span className="text-[min(8vw,1.75rem)] md:text-[2rem]">${formatNumber(price)}</span>
            </div>
          )}

          <NavigationLink
            path="/planes"
            className="flex items-center gap-1.5 contigo-link-primary text-[min(4vw,1rem)]"
          >
            Ver detalles del plan
            <AnimatedArrow />
          </NavigationLink>
        </div>
      </div>

      {animateValues && !animationComplete && (
        <>
          {Array.from({ length: 9 }).map((_, i) => (
            <div
              key={i}
              className="absolute top-0 left-0 size-full bg-contigo-verde rounded-3xl"
              style={{
                transform: `translateZ(${-i * 2}px)`,
                pointerEvents: "none",
              }}
            />
          ))}
        </>
      )}
    </Wrapper>
  );
};

export default OurPlansCard;