import React from 'react';
import { styled, keyframes } from '@mui/system';

const colors = ['#51eaea', '#fffde1', '#ff9d76', '#FB3569'];

const scaleUp = keyframes`
  0%, 95.01%, 100% {
    transform: translateZ(0) rotate(0);
    opacity: 0;
  }
  10% { 
    opacity: 1; 
  }
  95% {
    transform: translateZ(35vmin) rotateZ(var(--deg));
  }
`;

const moveForever = keyframes`
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
`;

const WormholeWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  perspective: 30vmin;
  background-color: #270f34;
  overflow: hidden;
`;

const Doodle = styled('div')`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18vmin;
  height: 18vmin;
  box-shadow: 0 0 50px ${() => colors[Math.floor(Math.random() * colors.length)]};
  background: ${() => {
    return Array.from({ length: 100 })
      .map(() => {
        const color = colors[Math.floor(Math.random() * colors.length)];
        const x = Math.random() * 140 - 20;
        const y = Math.random() * 120 - 20;
        return `radial-gradient(${color} 50%, transparent 0) ${x}% ${y}% / 1px 1px no-repeat`;
      })
      .join(', ');
  }};
  will-change: transform, opacity;
  animation: ${scaleUp} 12s linear infinite;
  animation-delay: ${(props) => `calc(-12s / ${props.total} * ${props.index})`};

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: ${() => `${Math.random() * 100}%`};
    left: ${() => `${Math.random() * 100}%`};
    width: ${() => `${Math.random() * 6}px`};
    height: ${() => `${Math.random() * 6}px`};
    background: ${() => colors[Math.floor(Math.random() * colors.length)]};
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
  }
`;

const WormholeBackground = ({ children }) => {
  const doodles = Array.from({ length: 30 }).map((_, i) => (
    <Doodle key={i} index={i} total={30} />
  ));

  return (
    <WormholeWrapper>
      {doodles}
      {children}
    </WormholeWrapper>
  );
};

export default WormholeBackground;