"use client";

import { useMemo } from "react";

const BUBBLE_COUNT = 28;

export default function AnimatedBackground() {
  const bubbles = useMemo(() => {
    return Array.from({ length: BUBBLE_COUNT }).map((_, i) => {
      const size = 8 + Math.random() * 36;
      const left = Math.random() * 100;
      const duration = 14 + Math.random() * 22;
      const delay = -Math.random() * duration;
      const opacity = 0.35 + Math.random() * 0.55;
      return { i, size, left, duration, delay, opacity };
    });
  }, []);

  return (
    <div
      aria-hidden="true"
      data-bg="v4"
      className="fixed inset-0 overflow-hidden pointer-events-none"
      style={{ zIndex: 0 }}
    >
      {/* Base radial gradient */}
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse at top, #1a2538 0%, #0c121e 45%, #060a13 100%)",
        }}
      />

      {/* Ambient floating glows (yavasca yuzen renkli isiltilar) */}
      <div
        className="absolute w-[680px] h-[680px] rounded-full ambient-glow ambient-glow-1"
        style={{
          filter: "blur(110px)",
          background:
            "radial-gradient(circle, rgba(124,146,174,0.55) 0%, rgba(124,146,174,0.18) 40%, transparent 70%)",
        }}
      />
      <div
        className="absolute w-[800px] h-[800px] rounded-full ambient-glow ambient-glow-2"
        style={{
          filter: "blur(120px)",
          background:
            "radial-gradient(circle, rgba(88,101,242,0.45) 0%, rgba(88,101,242,0.12) 45%, transparent 75%)",
        }}
      />
      <div
        className="absolute w-[600px] h-[600px] rounded-full ambient-glow ambient-glow-3"
        style={{
          filter: "blur(100px)",
          background:
            "radial-gradient(circle, rgba(99,140,200,0.5) 0%, rgba(66,83,105,0.18) 40%, transparent 70%)",
        }}
      />

      {/* Wave layers */}
      <div className="absolute inset-x-0 bottom-0 h-[55vh] pointer-events-none opacity-90">
        <WaveLayer
          fill="rgba(20, 28, 44, 0.85)"
          duration="22s"
          y={40}
          height="55vh"
        />
        <WaveLayer
          fill="rgba(30, 42, 62, 0.7)"
          duration="16s"
          reverse
          y={60}
          height="55vh"
        />
        <WaveLayer
          fill="rgba(45, 60, 85, 0.55)"
          duration="11s"
          y={80}
          height="55vh"
        />
      </div>

      {/* Bubbles */}
      <div className="bubbles">
        {bubbles.map((b) => (
          <span
            key={b.i}
            className="bubble"
            style={{
              width: `${b.size}px`,
              height: `${b.size}px`,
              left: `${b.left}%`,
              animationDuration: `${b.duration}s`,
              animationDelay: `${b.delay}s`,
              opacity: b.opacity,
            }}
          />
        ))}
      </div>
    </div>
  );
}

function WaveLayer({
  fill,
  duration,
  reverse,
  y = 50,
  height = "50vh",
}: {
  fill: string;
  duration: string;
  reverse?: boolean;
  y?: number;
  height?: string;
}) {
  return (
    <div
      className="absolute inset-x-0 bottom-0 overflow-hidden"
      style={{ height }}
    >
      <div
        className="absolute bottom-0 left-0"
        style={{
          width: "200%",
          height: "100%",
          animation: `waveSlow ${duration} linear infinite`,
          animationDirection: reverse ? "reverse" : "normal",
        }}
      >
        <svg
          viewBox="0 0 2880 320"
          preserveAspectRatio="none"
          className="absolute bottom-0 left-0 w-full h-full"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill={fill}
            d={`M0,${y + 40}
               C240,${y - 40} 480,${y + 80} 720,${y + 30}
               C960,${y - 30} 1200,${y + 80} 1440,${y + 40}
               C1680,${y} 1920,${y + 90} 2160,${y + 30}
               C2400,${y - 30} 2640,${y + 70} 2880,${y + 40}
               L2880,320 L0,320 Z`}
          />
        </svg>
      </div>
    </div>
  );
}