"use client";
import { useMemo, useState, useEffect } from 'react';
import { motion, useMotionValue, useTransform } from 'motion/react';
import { cn } from '@/lib/utils';
import { jsxs, jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion, "usePrefersReducedMotion");
function GradientBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const gradientColors = colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute inset-0",
      style: {
        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
        backgroundSize: "400% 400%"
      },
      animate: paused ? {} : {
        x: ["0%", "100%", "0%"]
      },
      transition: {
        duration: 10 / speed,
        repeat: Infinity,
        ease: "linear"
      }
    }
  );
}
__name(GradientBackground, "GradientBackground");
function BlobBackground({
  colors,
  speed,
  elementCount,
  intensity,
  paused
}) {
  const blobs = useMemo(
    () => Array.from({ length: elementCount }, (_, i) => ({
      id: i,
      color: colors[i % colors.length],
      size: Math.random() * 200 + 100,
      x: Math.random() * 100,
      y: Math.random() * 100,
      duration: (Math.random() * 10 + 10) / speed
    })),
    [elementCount, colors, speed]
  );
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        background: `radial-gradient(circle, ${blob.color}40, transparent)`,
        width: blob.size * intensity,
        height: blob.size * intensity,
        filter: "blur(40px)"
      },
      initial: {
        x: `${blob.x}%`,
        y: `${blob.y}%`
      },
      animate: paused ? {} : {
        x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
        y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
        scale: [1, 1.2, 1]
      },
      transition: {
        duration: blob.duration,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    blob.id
  )) });
}
__name(BlobBackground, "BlobBackground");
function WaveBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const waveColor = colors[0] || "#4ecdc4";
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute inset-0",
      style: {
        background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
          30 * intensity
        ).toString(16).padStart(2, "0")}, transparent)`
      },
      animate: paused ? {} : {
        y: [index * 10, index * 10 + 20 * intensity, index * 10]
      },
      transition: {
        duration: (3 + index) / speed,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    index
  )) });
}
__name(WaveBackground, "WaveBackground");
function MeshBackground({
  colors,
  speed,
  intensity,
  paused
}) {
  const meshColors = colors.length >= 4 ? colors.slice(0, 4) : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        background: `radial-gradient(circle, ${color}60, transparent)`,
        width: `${60 + index * 20}%`,
        height: `${60 + index * 20}%`,
        filter: "blur(60px)",
        mixBlendMode: "multiply"
      },
      initial: {
        x: `${25 + index * 15}%`,
        y: `${25 + index * 15}%`
      },
      animate: paused ? {} : {
        x: [
          `${25 + index * 15}%`,
          `${35 + index * 15}%`,
          `${25 + index * 15}%`
        ],
        y: [
          `${25 + index * 15}%`,
          `${15 + index * 15}%`,
          `${25 + index * 15}%`
        ],
        rotate: [0, 180, 360]
      },
      transition: {
        duration: (8 + index * 2) / speed,
        repeat: Infinity,
        ease: "easeInOut"
      }
    },
    index
  )) });
}
__name(MeshBackground, "MeshBackground");
function ParallaxBackground({
  layers,
  speed,
  paused
}) {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  useEffect(() => {
    const handleMouseMove = /* @__PURE__ */ __name((e) => {
      const { clientX, clientY } = e;
      const { innerWidth, innerHeight } = window;
      mouseX.set((clientX / innerWidth - 0.5) * 100);
      mouseY.set((clientY / innerHeight - 0.5) * 100);
    }, "handleMouseMove");
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, [mouseX, mouseY]);
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
    const x = useTransform(
      mouseX,
      [-50, 50],
      [-layer.speed * 10, layer.speed * 10]
    );
    const y = useTransform(
      mouseY,
      [-50, 50],
      [-layer.speed * 10, layer.speed * 10]
    );
    return /* @__PURE__ */ jsx(
      motion.div,
      {
        className: "absolute inset-0",
        style: {
          background: `radial-gradient(circle, ${layer.color}, transparent)`,
          opacity: layer.opacity,
          x: paused ? 0 : x,
          y: paused ? 0 : y
        }
      },
      index
    );
  }) });
}
__name(ParallaxBackground, "ParallaxBackground");
function ParticlesBackground({
  colors,
  speed,
  elementCount,
  intensity,
  paused
}) {
  const particles = useMemo(
    () => Array.from({ length: elementCount }, (_, i) => ({
      id: i,
      color: colors[i % colors.length],
      size: Math.random() * 4 + 2,
      x: Math.random() * 100,
      y: Math.random() * 100,
      duration: (Math.random() * 20 + 20) / speed,
      delay: Math.random() * 5
    })),
    [elementCount, colors, speed]
  );
  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "absolute rounded-full",
      style: {
        backgroundColor: particle.color,
        width: particle.size * intensity,
        height: particle.size * intensity,
        opacity: 0.6
      },
      initial: {
        x: `${particle.x}%`,
        y: `${particle.y}%`
      },
      animate: paused ? {} : {
        y: [`${particle.y}%`, `${particle.y - 100}%`],
        opacity: [0, 0.6, 0]
      },
      transition: {
        duration: particle.duration,
        repeat: Infinity,
        delay: particle.delay,
        ease: "linear"
      }
    },
    particle.id
  )) });
}
__name(ParticlesBackground, "ParticlesBackground");
function AnimatedBackground({
  animation = "gradient",
  speed = 1,
  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
  paused = false,
  className,
  style,
  children,
  intensity = 1,
  blur = false,
  blurAmount = 20,
  opacity = 1,
  elementCount = 5,
  width = "100%",
  height = "100%",
  fullscreen = false,
  parallaxLayers = [
    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
    { speed: 1.5, color: "#45b7d150", opacity: 0.3 }
  ]
}) {
  const prefersReducedMotion = usePrefersReducedMotion();
  const isAnimationPaused = paused || prefersReducedMotion;
  const containerStyle = useMemo(
    () => ({
      width: fullscreen ? "100vw" : width,
      height: fullscreen ? "100vh" : height,
      opacity,
      filter: blur ? `blur(${blurAmount}px)` : void 0,
      ...style
    }),
    [fullscreen, width, height, opacity, blur, blurAmount, style]
  );
  const renderAnimation = /* @__PURE__ */ __name(() => {
    const props = { colors, speed, intensity, paused: isAnimationPaused };
    switch (animation) {
      case "blob":
        return /* @__PURE__ */ jsx(BlobBackground, { ...props, elementCount });
      case "wave":
        return /* @__PURE__ */ jsx(WaveBackground, { ...props });
      case "mesh":
        return /* @__PURE__ */ jsx(MeshBackground, { ...props });
      case "parallax":
        return /* @__PURE__ */ jsx(
          ParallaxBackground,
          {
            layers: parallaxLayers,
            speed,
            paused: isAnimationPaused
          }
        );
      case "particles":
        return /* @__PURE__ */ jsx(ParticlesBackground, { ...props, elementCount });
      default:
        return /* @__PURE__ */ jsx(GradientBackground, { ...props });
    }
  }, "renderAnimation");
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative overflow-hidden",
        fullscreen && "fixed inset-0 z-0",
        className
      ),
      style: containerStyle,
      children: [
        renderAnimation(),
        children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
      ]
    }
  );
}
__name(AnimatedBackground, "AnimatedBackground");
var AnimatedBackgroundPresets = {
  /**
   * Calm gradient flow
   */
  CalmGradient: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "gradient",
      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
      speed: 0.5,
      ...props
    }
  ), "CalmGradient"),
  /**
   * Ocean waves
   */
  OceanWaves: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "wave",
      colors: ["#0093E9", "#80D0C7"],
      ...props
    }
  ), "OceanWaves"),
  /**
   * Floating bubbles
   */
  FloatingBubbles: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "blob",
      colors: ["#667eea", "#764ba2", "#f093fb"],
      elementCount: 8,
      ...props
    }
  ), "FloatingBubbles"),
  /**
   * Cosmic mesh
   */
  CosmicMesh: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "mesh",
      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
      ...props
    }
  ), "CosmicMesh"),
  /**
   * Starfield particles
   */
  Starfield: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "particles",
      colors: ["#ffffff", "#f0f0f0", "#e0e0e0"],
      elementCount: 50,
      intensity: 0.5,
      ...props
    }
  ), "Starfield"),
  /**
   * Aurora parallax
   */
  Aurora: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
    AnimatedBackground,
    {
      animation: "parallax",
      parallaxLayers: [
        { speed: 0.3, color: "#00ff8850", opacity: 0.4 },
        { speed: 0.6, color: "#0080ff50", opacity: 0.3 },
        { speed: 0.9, color: "#8000ff50", opacity: 0.3 },
        { speed: 1.2, color: "#ff008050", opacity: 0.2 }
      ],
      ...props
    }
  ), "Aurora")
};
var background_default = AnimatedBackground;

export { AnimatedBackground, AnimatedBackgroundPresets, background_default as default };
