"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, m } from "motion/react";
import { useRef, useState, useEffect, useCallback } from "react";

const generateOtp = () => {
  const timestamp = Math.floor(Date.now() / 1000);
  const seed = timestamp % 10000;
  const random = Math.floor(Math.random() * 10000);
  const combined = (seed + random) % 10000;
  return combined.toString().padStart(4, "0");
};

const Otp = () => {
  const [generatedOtp] = useState(() => generateOtp());
  const [otpValues, setOtpValues] = useState(["", "", "", ""]);
  const [shake, setShake] = useState(-1);
  const [isAnimating, setIsAnimating] = useState(false);
  const [animationPhase, setAnimationPhase] = useState(0); // 0: not started, 1: animating, 2: completed
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const inputRefsRef = useRef<(HTMLInputElement | null)[]>([null, null, null, null]);
  const inputRefs = inputRefsRef.current;

  const isDigitValid = (index: number) => {
    return otpValues[index] === "" || otpValues[index] === generatedOtp[index];
  };

  const isOtpCorrect = () => {
    return otpValues.join("") === generatedOtp;
  };

  // Trigger animation when all fields are filled
  useEffect(() => {
    if (otpValues.every((v) => v !== "") && !isAnimating && animationPhase === 0) {
      setIsAnimating(true);
      setAnimationPhase(1);

      // Complete animation after 2 seconds
      timerRef.current = setTimeout(() => {
        setIsAnimating(false);
        setAnimationPhase(2);
      }, 2000);
    }
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [otpValues, isAnimating, animationPhase]);

  // Reset animation phase when user starts typing again
  useEffect(() => {
    if (!otpValues.every((v) => v !== "") && animationPhase > 0) {
      setAnimationPhase(0);
      setIsAnimating(false);
    }
  }, [otpValues, animationPhase]);

  const handleChange = (index: number, value: string) => {
    // Only allow numbers
    if (!/^\d*$/.test(value)) return;

    const newOtpValues = [...otpValues];
    newOtpValues[index] = value;
    setOtpValues(newOtpValues);

    // If value is invalid, trigger shake animation
    if (value && value !== generatedOtp[index]) {
      setShake(index);
      setTimeout(() => setShake(-1), 500);
    }

    // Auto focus next input
    if (value !== "" && index < 3) {
      inputRefs[index + 1]?.focus();
    }
  };

  const handleKeyDown = (
    index: number,
    e: React.KeyboardEvent<HTMLInputElement>
  ) => {
    // Handle backspace
    if (e.key === "Backspace" && !otpValues[index] && index > 0) {
      inputRefs[index - 1]?.focus();
    }
  };

  const handlePaste = (e: React.ClipboardEvent) => {
    e.preventDefault();
    const pastedData = e.clipboardData.getData("text").slice(0, 4);
    if (!/^\d+$/.test(pastedData)) return;

    const newOtpValues = pastedData
      .split("")
      .concat(Array(4).fill(""))
      .slice(0, 4);
    setOtpValues(newOtpValues);

    // Focus last filled input or first empty input
    const lastIndex = Math.min(pastedData.length - 1, 3);
    inputRefs[lastIndex]?.focus();
  };

  const getInputClassName = (index: number) => {
    const baseClasses =
      "h-14 w-14 rounded-lg text-center text-2xl transition-all duration-200 focus:outline-none relative";

    if (animationPhase === 2) {
      // After animation is complete
      if (isOtpCorrect()) {
        return cn(
          baseClasses,
          "border-2 border-green-500 bg-green-100 text-green-600"
        );
      } else {
        return cn(
          baseClasses,
          "border-2 border-red-500 bg-red-100 text-red-500"
        );
      }
    } else if (otpValues[index] && !isDigitValid(index)) {
      // Invalid input during typing
      return cn(baseClasses, "border-2 border-red-500 bg-red-100 text-red-500");
    } else {
      // Default state
      return cn(
        baseClasses,
        "border-2 focus:border-blue-500 bg-white text-black border-gray-300"
      );
    }
  };

  return (
    <div className="full center flex-col gap-4">
      <m.div
        initial={{ scale: 0.5, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="text-4xl font-bold text-gray-700"
      >
        Generated OTP: {generatedOtp}
      </m.div>

      <div className="flex gap-4">
        <AnimatePresence mode="wait">
          {([0, 1, 2, 3] as const).map((slot) => (
            <m.div
              key={`otp-${slot}`}
              initial={{ opacity: 0, y: 20 }}
              animate={{
                opacity: 1,
                y: 0,
                x: shake === slot ? [-2, 2, -2, 2, 0] : 0,
              }}
              transition={{
                duration: 0.2,
                delay: slot * 0.1,
                x: { duration: 0.4 },
              }}
              className="relative"
            >
              {/* Progressive border animation */}
              {isAnimating && (
                <div className="absolute inset-0 rounded-lg overflow-hidden">
                  <m.div
                    className="absolute inset-0 rounded-lg"
                    style={{
                      background: `conic-gradient(from 0deg, transparent 0deg, #3b82f6 0deg, #3b82f6 90deg, transparent 90deg)`,
                      padding: "2px",
                    }}
                    animate={{
                      rotate: [0, 360],
                    }}
                    transition={{
                      duration: 2,
                      ease: "linear",
                      repeat: 0,
                    }}
                  >
                    <div className="w-full h-full rounded-lg bg-white" />
                  </m.div>
                </div>
              )}

              <m.input
                ref={(el) => { inputRefs[slot] = el; }}
                type="text"
                maxLength={1}
                className={getInputClassName(slot)}
                style={{
                  zIndex: isAnimating ? 10 : 1,
                  position: "relative",
                }}
                value={otpValues[slot]}
                onChange={(e) => handleChange(slot, e.target.value)}
                onKeyDown={(e) => handleKeyDown(slot, e)}
                onPaste={handlePaste}
                animate={{
                  scale: otpValues[slot] ? 1.05 : 1,
                }}
                transition={{
                  type: "spring",
                  stiffness: 300,
                  damping: 20,
                }}
              />
            </m.div>
          ))}
        </AnimatePresence>
      </div>

      {/* Status indicator */}
      {animationPhase === 2 && (
        <m.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          className={cn(
            "text-lg font-semibold px-4 py-2 rounded-lg",
            isOtpCorrect()
              ? "text-green-600 bg-green-100"
              : "text-red-600 bg-red-100"
          )}
        >
          {isOtpCorrect() ? "✓ OTP Verified Successfully!" : "✗ Incorrect OTP"}
        </m.div>
      )}
    </div>
  );
};

export default Otp;
OTP Input
