import React from "react";
import styles from "@app/components/onboarding/slides/AnimatedSlideBackground.module.css";
import { AnimatedSlideBackgroundProps } from "@app/types/types";

type CircleStyles = React.CSSProperties & {
  "--circle-move-x"?: string;
  "--circle-move-y"?: string;
  "--circle-duration"?: string;
  "--circle-delay"?: string;
};

interface AnimatedSlideBackgroundComponentProps extends AnimatedSlideBackgroundProps {
  isActive: boolean;
  slideKey: string;
}

export default function AnimatedSlideBackground({
  gradientStops,
  circles,
  isActive,
}: AnimatedSlideBackgroundComponentProps) {
  const [prevGradient, setPrevGradient] = React.useState<
    [string, string] | null
  >(null);
  const [currentGradient, setCurrentGradient] =
    React.useState<[string, string]>(gradientStops);
  const [isTransitioning, setIsTransitioning] = React.useState(false);
  const isFirstMount = React.useRef(true);

  React.useEffect(() => {
    // Skip transition on first mount
    if (isFirstMount.current) {
      isFirstMount.current = false;
      setCurrentGradient(gradientStops);
      return;
    }

    // Only transition if gradient actually changed
    if (
      currentGradient[0] !== gradientStops[0] ||
      currentGradient[1] !== gradientStops[1]
    ) {
      // Store previous gradient and start transition
      setPrevGradient(currentGradient);
      setIsTransitioning(true);

      // Update to new gradient (will fade in)
      setCurrentGradient(gradientStops);
    }
  }, [gradientStops]);

  const currentGradientStyle = React.useMemo(
    () => ({
      backgroundImage: `linear-gradient(135deg, ${currentGradient[0]}, ${currentGradient[1]})`,
    }),
    [currentGradient],
  );

  const prevGradientStyle = prevGradient
    ? {
        backgroundImage: `linear-gradient(135deg, ${prevGradient[0]}, ${prevGradient[1]})`,
      }
    : null;

  return (
    <div className={styles.hero} key="animated-background">
      {prevGradientStyle && isTransitioning && (
        <div
          className={`${styles.gradientLayer} ${styles.gradientLayerPrevFadeOut}`}
          style={prevGradientStyle}
          onTransitionEnd={() => {
            setPrevGradient(null);
            setIsTransitioning(false);
          }}
        />
      )}
      <div
        className={`${styles.gradientLayer} ${isActive ? styles.gradientLayerActive : ""}`.trim()}
        style={currentGradientStyle}
      />
      {circles.map((circle, index) => {
        const {
          position,
          size,
          color,
          opacity,
          blur,
          amplitude = 48,
          duration = 15,
          delay = 0,
        } = circle;

        const moveX = position === "bottom-left" ? amplitude : -amplitude;
        const moveY =
          position === "bottom-left" ? -amplitude * 0.6 : amplitude * 0.6;

        const circleStyle: CircleStyles = {
          width: size,
          height: size,
          background: color,
          opacity: opacity ?? 0.9,
          filter: blur ? `blur(${blur}px)` : undefined,
          "--circle-move-x": `${moveX}px`,
          "--circle-move-y": `${moveY}px`,
          "--circle-duration": `${duration}s`,
          "--circle-delay": `${delay}s`,
        };

        const defaultOffset = -size / 2;
        const offsetX = circle.offsetX ?? 0;
        const offsetY = circle.offsetY ?? 0;

        if (position === "bottom-left") {
          circleStyle.left = `${defaultOffset + offsetX}px`;
          circleStyle.bottom = `${defaultOffset + offsetY}px`;
        } else {
          circleStyle.right = `${defaultOffset + offsetX}px`;
          circleStyle.top = `${defaultOffset + offsetY}px`;
        }

        return (
          <div
            key={`circle-${index}-${position}`}
            className={styles.circle}
            style={circleStyle}
          />
        );
      })}
    </div>
  );
}
