"use client";

import React, { useEffect, useRef } from "react";

const Aurora = () => {
  const auroraRef = useRef<HTMLDivElement>(null);
  const sceneRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Add styles
    const style = document.createElement("style");
    style.innerHTML = `
      .aurora-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to top, #38578d 0%, #112247 80%, #0c0f1e 100%);
        overflow: hidden;
        z-index: 1;
      }

      .aurora {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: hidden;
      }

      .whisp {
        display: block;
        background-color: var(--bg-color);
        position: absolute;
        bottom: 0;
        left: var(--left-ini);
        height: var(--height);
        width: var(--width);
        opacity: var(--opacity);
        border-top-left-radius: 50% 100%;
        border-top-right-radius: 50% 100%;
        filter: blur(var(--blur));
        will-change: height, width, opacity, filter, transform;
        mix-blend-mode: color-dodge;
      }

      .scene {
        height: 100vh;
        width: 100vw;
        background-position: center bottom;
        background-size: cover;
        position: absolute;
        z-index: 200;
      }

      .snowflake {
        --size: calc(var(--z-index) * 0.2px);
        left: var(--left);
        filter: blur(calc(var(--inverse-z) * 0.7px));
        width: var(--size);
        height: var(--size);
        background: white;
        border-radius: 50%;
        position: absolute;
        top: -5vh;
        animation: snowfall var(--fall-duration) linear infinite;
        animation-delay: var(--fall-delay);
        z-index: var(--z-index);
        will-change: top, left, transform;
      }

      @keyframes snowfall {
        0% {
          transform: translate3d(var(--left-ini), -20vh, 0);
        }
        100% {
          transform: translate3d(var(--left-end), 110vh, 0);
        }
      }

      .trees {
        width: 100vw;
        height: 80vh;
        z-index: 150;
        position: absolute;
        left: 0;
        bottom: 0;
        mix-blend-mode: darken;
        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'><path d='M0 600 L120 400 L140 420 L180 380 L200 400 L240 360 L280 380 L320 340 L360 360 L400 320 L440 340 L480 300 L520 320 L560 280 L600 300 L640 260 L680 280 L720 240 L760 260 L800 220 L840 240 L880 200 L920 220 L960 180 L1000 200 L1040 160 L1080 180 L1120 140 L1200 160 L1200 600 Z' fill='%23000'/></svg>") center bottom/cover no-repeat;
      }
    `;

    document.head.appendChild(style);

    // Create aurora whisps
    const aurora = auroraRef.current;
    const palette = ["#14e81e", "#00ea8d", "#017ed5", "#b53dff", "#8d00c4"];

    function getRandomInt(minParam: number, maxParam: number) {
      const min = Math.ceil(minParam);
      const max = Math.floor(maxParam);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    if (aurora) {
      // Create whisps
      for (let i = 0; i < 12; i++) {
        const whisp = document.createElement("div");
        whisp.classList.add("whisp");
        whisp.setAttribute(
          "style",
          `
          --z-index: ${getRandomInt(1, 10)};
          --opacity: ${Math.random() * 0.3};
          --blur: ${getRandomInt(30, 60)}px;
          --width: ${getRandomInt(5, 20)}vw;
          --height: ${getRandomInt(50, 120)}vh;
          --left-ini: ${getRandomInt(-20, 100)}vw;
          --bg-color: ${palette[getRandomInt(0, 4)]};
          transform: skew(${getRandomInt(-30, -50)}deg);
        `
        );
        aurora.appendChild(whisp);
      }

      // Animate whisps
      const whisps = aurora.querySelectorAll(".whisp");
      for (const el of whisps) {
        const element = el as HTMLElement;

        element.animate(
          {
            opacity: [Math.random() * 0.3, Math.random() * 0.6],
          },
          {
            duration: getRandomInt(4, 10) * 1000,
            iterations: Number.POSITIVE_INFINITY,
            direction: "alternate",
            easing: "ease-in-out",
          }
        );

        element.animate(
          {
            translate: [
              `${getRandomInt(-20, 20)}vw 0`,
              `${getRandomInt(-20, 20)}vw 0`,
            ],
          },
          {
            duration: getRandomInt(20, 40) * 1000,
            iterations: Number.POSITIVE_INFINITY,
            direction: "alternate",
            easing: "ease-in-out",
          }
        );

        element.animate(
          {
            height: [
              `${getRandomInt(20, 120)}vh`,
              `${getRandomInt(20, 120)}vh`,
            ],
          },
          {
            duration: getRandomInt(10, 20) * 1000,
            iterations: Number.POSITIVE_INFINITY,
            direction: "alternate",
            easing: "ease-in-out",
          }
        );

        element.animate(
          {
            width: [`${getRandomInt(2, 20)}vw`, `${getRandomInt(2, 20)}vw`],
          },
          {
            duration: getRandomInt(5, 40) * 1000,
            iterations: Number.POSITIVE_INFINITY,
            direction: "alternate",
            easing: "ease-in-out",
          }
        );
      }
    }

    // Create snowflakes
    const sceneFrame = sceneRef.current;

    function getRandomInt2(max: number) {
      return Math.floor(Math.random() * max);
    }

    if (sceneFrame) {
      for (let i = 0; i < 100; i++) {
        const flake = document.createElement("div");
        flake.classList.add("snowflake");
        const zIndex = getRandomInt2(10) + 1;
        const zIndexInverse = (zIndex * -1 + 10) * 0.5;
        flake.setAttribute(
          "style",
          `
          --z-index: ${zIndex};
          --inverse-z: ${zIndexInverse};
          --fall-duration: ${getRandomInt2(10) + 7}s;
          --rotation-x: ${getRandomInt2(5)};
          --rotation-y: ${getRandomInt2(5)};
          --rotation-z: ${getRandomInt2(5)};
          --fall-delay: ${getRandomInt2(20) - 11}s;
          --left: ${getRandomInt2(100)}vw;
          --left-ini: ${getRandomInt2(20) - 10}vw;
          --left-end: ${getRandomInt2(20) - 10}vw;
        `
        );
        sceneFrame.appendChild(flake);
      }
    }

    // Cleanup
    return () => {
      if (style.parentNode) {
        document.head.removeChild(style);
      }
      if (aurora) {
        aurora.innerHTML = "";
      }
      if (sceneFrame) {
        sceneFrame.innerHTML = "";
      }
    };
  }, []);

  return (
    <div className="aurora-container">
      <div className="aurora" ref={auroraRef}>
        <div className="trees" />
        <div className="scene" ref={sceneRef} />
      </div>
    </div>
  );
};

export default Aurora;