"use client";

import { motion, AnimatePresence, type Variants } from "framer-motion";
import { ReactNode } from "react";

// ═══════════════════════════════════════════════════════════════════════════════
// 🎬 Reusable Animated Components for Annual Auctions
// ═══════════════════════════════════════════════════════════════════════════════

const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 40 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
};

const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.1 },
  },
};

const scaleIn: Variants = {
  hidden: { opacity: 0, scale: 0.9 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
  },
};

const slideInLeft: Variants = {
  hidden: { opacity: 0, x: -50 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
};

const slideInRight: Variants = {
  hidden: { opacity: 0, x: 50 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
};

// ─────────────────────────────────────────────────────────────────────────────
// Animated Section - Wrapper for any section
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedSectionProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  direction?: "up" | "down" | "left" | "right" | "scale";
}

export function AnimatedSection({
  children,
  className = "",
  delay = 0,
  direction = "up",
}: AnimatedSectionProps) {
  const variants: Variants = {
    hidden: {
      opacity: 0,
      y: direction === "up" ? 40 : direction === "down" ? -40 : 0,
      x: direction === "left" ? -40 : direction === "right" ? 40 : 0,
      scale: direction === "scale" ? 0.9 : 1,
    },
    visible: {
      opacity: 1,
      y: 0,
      x: 0,
      scale: 1,
      transition: {
        duration: 0.6,
        delay,
        ease: [0.22, 1, 0.36, 1],
      },
    },
  };

  return (
    <motion.div
      className={className}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-50px" }}
      variants={variants}
    >
      {children}
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Card - For auction cards with hover effects
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedCardProps {
  children: ReactNode;
  className?: string;
  index?: number;
}

export function AnimatedCard({
  children,
  className = "",
  index = 0,
}: AnimatedCardProps) {
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 30, scale: 0.95 }}
      whileInView={{ opacity: 1, y: 0, scale: 1 }}
      viewport={{ once: true, margin: "-30px" }}
      transition={{
        duration: 0.5,
        delay: index * 0.1,
        ease: [0.22, 1, 0.36, 1],
      }}
      whileHover={{
        y: -8,
        scale: 1.02,
        boxShadow: "0 20px 40px rgba(0, 0, 0, 0.15)",
      }}
      whileTap={{ scale: 0.98 }}
    >
      {children}
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Grid - Staggered children animation
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedGridProps {
  children: ReactNode;
  className?: string;
}

export function AnimatedGrid({ children, className = "" }: AnimatedGridProps) {
  return (
    <motion.div
      className={className}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-50px" }}
      variants={staggerContainer}
    >
      {children}
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Hero Title
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedTitleProps {
  children: ReactNode;
  className?: string;
  as?: "h1" | "h2" | "h3" | "h4";
}

export function AnimatedTitle({
  children,
  className = "",
  as: Tag = "h1",
}: AnimatedTitleProps) {
  const MotionTag = motion[Tag];
  return (
    <MotionTag
      className={className}
      initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
      transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </MotionTag>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Button
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedButtonProps {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
}

export function AnimatedButton({
  children,
  className = "",
  onClick,
}: AnimatedButtonProps) {
  return (
    <motion.button
      className={className}
      onClick={onClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ duration: 0.2 }}
    >
      {children}
    </motion.button>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Countdown Box
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedCountdownProps {
  label: string;
  value: string;
  index?: number;
}

export function AnimatedCountdown({
  label,
  value,
  index = 0,
}: AnimatedCountdownProps) {
  return (
    <motion.div
      className="flex flex-col items-center gap-1"
      initial={{ opacity: 0, scale: 0.5, rotateY: -90 }}
      animate={{ opacity: 1, scale: 1, rotateY: 0 }}
      transition={{
        duration: 0.6,
        delay: index * 0.1,
        ease: [0.22, 1, 0.36, 1],
      }}
    >
      <div className="text-xs text-gray-600 font-medium">{label}</div>
      <motion.div
        className="bg-white border rounded-2xl px-4 py-2 min-w-full"
        key={value}
        initial={{ scale: 1.2, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.3 }}
      >
        <div className="text-2xl font-extrabold text-primary">{value}</div>
      </motion.div>
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Badge (Live/Upcoming/Ended)
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedBadgeProps {
  children: ReactNode;
  className?: string;
  pulse?: boolean;
}

export function AnimatedBadge({
  children,
  className = "",
  pulse = false,
}: AnimatedBadgeProps) {
  return (
    <motion.span
      className={className}
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
      {...(pulse && {
        animate: {
          opacity: 1,
          scale: [1, 1.05, 1],
          boxShadow: [
            "0 0 0 0 rgba(231, 76, 60, 0.4)",
            "0 0 0 10px rgba(231, 76, 60, 0)",
          ],
        },
        transition: { duration: 1.5, repeat: Infinity },
      })}
    >
      {children}
    </motion.span>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Table Row
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedRowProps {
  children: ReactNode;
  className?: string;
  index?: number;
}

export function AnimatedRow({
  children,
  className = "",
  index = 0,
}: AnimatedRowProps) {
  return (
    <motion.tr
      className={className}
      initial={{ opacity: 0, x: -20 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{
        duration: 0.4,
        delay: index * 0.05,
        ease: [0.22, 1, 0.36, 1],
      }}
      whileHover={{ backgroundColor: "rgba(28, 140, 100, 0.05)" }}
    >
      {children}
    </motion.tr>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated Stat Box
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedStatProps {
  label: string;
  value: string | number;
  className?: string;
  index?: number;
}

export function AnimatedStat({
  label,
  value,
  className = "",
  index = 0,
}: AnimatedStatProps) {
  return (
    <motion.div
      className={`stat items-center text-center min-h-30 bg-white rounded-2xl p-3 ${className}`}
      initial={{ opacity: 0, scale: 0.8 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{
        duration: 0.5,
        delay: index * 0.1,
        ease: [0.22, 1, 0.36, 1],
      }}
      whileHover={{ scale: 1.05, y: -5 }}
    >
      <div className="text-xs text-slate-500">{label}</div>
      <div className="text-2xl font-extrabold mt-6 items-center text-primary">
        {value}
      </div>
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Page Transition Wrapper
// ─────────────────────────────────────────────────────────────────────────────
interface PageTransitionProps {
  children: ReactNode;
}

export function PageTransition({ children }: PageTransitionProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.4 }}
    >
      {children}
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Animated List Item (for staggered lists)
// ─────────────────────────────────────────────────────────────────────────────
interface AnimatedListItemProps {
  children: ReactNode;
  className?: string;
}

export function AnimatedListItem({
  children,
  className = "",
}: AnimatedListItemProps) {
  return (
    <motion.div className={className} variants={fadeInUp}>
      {children}
    </motion.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Export AnimatePresence for use in other components
// ─────────────────────────────────────────────────────────────────────────────
export { AnimatePresence, motion };