"use client";

import { cn } from "@/lib/utils";
import {
  AnimatePresence,
  m,
  type Transition,
  type Variants,
} from "motion/react";
import {
  ShieldCheck,
  ShieldWarning,
  SpinnerGap,
} from "@phosphor-icons/react";
import { useCallback, useEffect, useRef, useState } from "react";

type Status = "Loading" | "Success" | "Error";

const sequences: Status[] = ["Loading", "Success", "Loading", "Error"];
const SEQUENCE_DURATION = 2500;

const contentVariants: Variants = {
  hidden: { opacity: 0, scale: 0.85, filter: "blur(4px)" },
  visible: { opacity: 1, scale: 1, filter: "blur(0px)" },
};

const contentTransition: Transition = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.8,
};

const layoutTransition: Transition = {
  type: "spring",
  stiffness: 400,
  damping: 30,
  mass: 0.6,
};

const statusConfig = {
  Loading: {
    bg: "bg-sky-500/15 dark:bg-sky-500/15",
    text: "text-sky-600 dark:text-sky-400",
    shadow: "shadow-[0_0_0_1px_rgba(14,165,233,0.15)]",
    label: "Analyzing",
    Icon: SpinnerGap,
    spin: true,
  },
  Success: {
    bg: "bg-emerald-500/15 dark:bg-emerald-500/15",
    text: "text-emerald-600 dark:text-emerald-400",
    shadow: "shadow-[0_0_0_1px_rgba(16,185,129,0.15)]",
    label: "Transaction Safe",
    Icon: ShieldCheck,
    spin: false,
  },
  Error: {
    bg: "bg-red-500/15 dark:bg-red-500/15",
    text: "text-red-600 dark:text-red-400",
    shadow: "shadow-[0_0_0_1px_rgba(239,68,68,0.15)]",
    label: "Warning",
    Icon: ShieldWarning,
    spin: false,
  },
} as const;

export default function StatusButton() {
  const [status, setStatus] = useState<Status>("Loading");
  const buttonRef = useRef<HTMLButtonElement>(null);

  const shake = useCallback(() => {
    const el = buttonRef.current;
    if (!el) return;
    el.animate(
      [
        { transform: "translateX(0)" },
        { transform: "translateX(3px)" },
        { transform: "translateX(-3px)" },
        { transform: "translateX(2px)" },
        { transform: "translateX(-2px)" },
        { transform: "translateX(0)" },
      ],
      { duration: 300, easing: "cubic-bezier(0.36, 0.07, 0.19, 0.97)" },
    );
  }, []);

  useEffect(() => {
    if (status === "Error") {
      const id = setTimeout(shake, 400);
      return () => clearTimeout(id);
    }
  }, [status, shake]);

  useEffect(() => {
    let i = 0;
    const interval = setInterval(() => {
      i = (i + 1) % sequences.length;
      setStatus(sequences[i]);
    }, SEQUENCE_DURATION);
    return () => clearInterval(interval);
  }, []);

  const { bg, text, shadow, label, Icon, spin } = statusConfig[status];

  return (
    <div className="full center">
      <m.button
        ref={buttonRef}
        className={cn(
          "flex cursor-pointer items-center gap-2.5 overflow-hidden rounded-full px-5 py-2.5",
          bg,
          text,
          shadow,
        )}
        layout
        transition={layoutTransition}
      >
        <AnimatePresence mode="wait" initial={false}>
          <m.span
            key={status}
            variants={contentVariants}
            initial="hidden"
            animate="visible"
            exit="hidden"
            transition={contentTransition}
            className="flex items-center gap-2"
          >
            {spin ? (
              <Icon
                weight="bold"
                className="sb-spin size-4"
                aria-hidden="true"
              />
            ) : (
              <Icon weight="fill" className="size-4" aria-hidden="true" />
            )}
            <span className="text-sm font-medium whitespace-nowrap">{label}</span>
          </m.span>
        </AnimatePresence>
      </m.button>
    </div>
  );
}
Status Button
