import { motion } from "motion/react";
import { useEffect, useState } from "react";
import { useTheme } from "../context/ThemeContext";

export default function GeometricBackground() {
  const [mounted, setMounted] = useState(false);
  const { config, theme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none bg-[#05070a] transition-colors duration-700">
      {/* Soft overlay gradient according to atmosphere theme */}
      <div 
        className="absolute inset-0 transition-opacity duration-700 pointer-events-none"
        style={{
          background: `radial-gradient(ellipse at top right, ${config.bgGradientFrom}, transparent 65%), radial-gradient(ellipse at bottom left, ${config.bgGradientTo}, transparent 70%)`
        }}
      />
      
      {/* Floating geometric elements */}
      <motion.div
        className="absolute top-[8%] left-[12%] w-[450px] h-[450px] rounded-full blur-[140px] transition-colors duration-700"
        style={{ backgroundColor: config.bgGradientFrom }}
        animate={{
          y: [0, -35, 0],
          x: [0, 25, 0],
          scale: [1, 1.05, 1],
        }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "linear",
        }}
      />
      <motion.div
        className="absolute bottom-[15%] right-[8%] w-[550px] h-[550px] rounded-full blur-[160px] transition-colors duration-700"
        style={{ backgroundColor: config.bgGradientTo }}
        animate={{
          y: [0, 45, 0],
          x: [0, -35, 0],
          scale: [1, 1.08, 1],
        }}
        transition={{
          duration: 26,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />

      {/* Grid pattern overlay */}
      <div 
        className="absolute inset-0 bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_65%_65%_at_50%_50%,#000_25%,transparent_100%)] opacity-40 transition-all duration-700"
        style={{
          backgroundImage: `linear-gradient(${config.accentGlow.replace("0.4", "0.04")} 1px, transparent 1px), linear-gradient(90deg, ${config.accentGlow.replace("0.4", "0.04")} 1px, transparent 1px)`
        }}
      />
    </div>
  );
}