"use client";
import React from "react";
import CustomButton from "@/components/common/CustomButton";
import tick from "@/public/icon/tick.svg";
import Image from "next/image";
import { motion } from "motion/react";
import { useRouter } from "next/navigation";

const CYCLE = 2.5;

const Ripple2 = ({ delay, color }: { delay: number; color: string }) => (
  <motion.div
    className={`absolute rounded-full ${color}`}
    style={{ width: 80, height: 80 }}
    initial={{ scale: 1, opacity: 0 }}
    animate={{
      scale: [1, 3.5],
      opacity: [0.5, 0.3, 0],
    }}
    transition={{
      duration: CYCLE,
      ease: "easeOut",
      repeat: Infinity,
      delay,
      times: [0, 0.6, 1], // fade stays visible longer, then quickly disappears
    }}
  />
);
const Ripple = ({ delay, color }: { delay: number; color: string }) => (
  <motion.div
    style={{
      position: "absolute",
      width: 80,
      height: 80,
      borderRadius: "50%",
      background: color,
    }}
    initial={{ scale: 0, opacity: 0 }}
    animate={{
      scale: [0, 2],
      opacity: [0.7, 0],
    }}
    transition={{
      duration: CYCLE,
      ease: "easeOut",
      repeat: Infinity,
      delay,
      repeatDelay: 0.3, // sits at opacity:0 for 0.3s → resets scale invisibly
    }}
  />
);

const FinishPage = () => {
  const router = useRouter();
  return (
    <div className="mx-6 flex flex-col items-center justify-center">
      <div className="border-border mt-18 flex min-h-[85vh] w-full flex-col items-center justify-center gap-5 rounded-2xl border py-20">
        {" "}
        <div className="relative flex items-center justify-center">
          {/* 3 staggered ripples — same color, different delays */}
          <Ripple delay={0} color="#0062ff" />
          <Ripple delay={CYCLE / 3} color="#0062ff" />
          <Ripple delay={(CYCLE / 3) * 2} color="#0062ff" />

          {/* Icon */}
          <motion.div
            animate={{ scale: [0.97, 1, 0.97] }}
            transition={{
              duration: CYCLE,
              ease: "easeInOut",
              repeat: Infinity,
            }}
            className="bg-background relative z-10 rounded-full px-6 py-7 shadow-lg"
          >
            <Image src={tick} alt="tick" />
          </motion.div>
        </div>
        <div className="text-background font-bricolage mt-5 text-4xl font-bold md:text-6xl">
          Congratulations
        </div>
        <div className="text-secondary-text font-bricolage text-sm font-normal">
          Your registration has been completed
        </div>
        <div className="w-80">
          <CustomButton
            btnText="Log in now"
            onClick={() => {
              router.push("/login");
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default FinishPage;