"use client";

import { useState, useEffect } from "react";
import { AnimatePresence, motion } from "motion/react";

function LoaderCore({ loadingStates, value }) {
  return (
    <div className="relative mx-auto mt-40 flex max-w-xl flex-col justify-start">
      {loadingStates.map((state, index) => {
        const distance = Math.abs(index - value);
        const opacity = Math.max(1 - distance * 0.2, 0);
        return (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: -(value * 40) }}
            animate={{ opacity, y: -(value * 40) }}
            transition={{ duration: 0.5 }}
            className="mb-4 flex gap-2 text-left"
          >
            <div>
              {index > value ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth={1.5}
                  stroke="currentColor"
                  className="h-6 w-6 text-gray-400"
                >
                  <path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              ) : (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className={`h-6 w-6 ${index === value ? "text-green-500" : "text-gray-500"}`}
                >
                  <path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              )}
            </div>
            <span className={index === value ? "text-green-500" : "text-gray-700 dark:text-gray-300"}>
              {state.text}
            </span>
          </motion.div>
        );
      })}
    </div>
  );
}

export function MultiStepLoader({
  loadingStates,
  loading = false,
  duration = 2000,
  loop = true,
}) {
  const [currentValue, setCurrentValue] = useState(0);

  useEffect(() => {
    if (!loading) {
      setCurrentValue(0);
      return;
    }
    const timer = setTimeout(() => {
      setCurrentValue((prev) =>
        loop
          ? prev === loadingStates.length - 1
            ? 0
            : prev + 1
          : Math.min(prev + 1, loadingStates.length - 1)
      );
    }, duration);

    return () => clearTimeout(timer);
  }, [currentValue, loading, loop, duration, loadingStates.length]);

  return (
    <AnimatePresence mode="wait">
      {loading && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-2xl bg-black/50"
        >
          <div className="relative h-96">
            <LoaderCore loadingStates={loadingStates} value={currentValue} />
          </div>
          <div className="absolute inset-x-0 bottom-0 h-full bg-black dark:bg-black bg-gradient-to-t
                          [mask-image:radial-gradient(900px_at_center,transparent_30%,black)] z-10" />
        </motion.div>
      )}
    </AnimatePresence>
  );
}
