"use client";

import { useEffect, useRef, useState, type MutableRefObject } from "react";
import type * as ThreeNamespace from "three";

type ThreeRuntime = typeof ThreeNamespace;
type AcidUniforms = {
  uTime: { value: number };
  uScroll: { value: number };
  uPulse: { value: number };
  uPointer: { value: ThreeNamespace.Vector2 };
};
type SceneControls = {
  uniforms: AcidUniforms;
  setScrollProgress(progress: number): void;
  dispose(): void;
};

function shouldSkipWebgl() {
  if (typeof window === "undefined") {
    return true;
  }

  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
  const narrowScreen = window.matchMedia("(max-width: 720px)").matches;
  const memory = typeof navigator !== "undefined"
    ? (navigator as Navigator & { deviceMemory?: number }).deviceMemory
    : undefined;

  return reduceMotion || (coarsePointer && narrowScreen) || (typeof memory === "number" && memory <= 3);
}

export default function AcidExperience() {
  const rootRef = useRef<HTMLElement | null>(null);
  const mountRef = useRef<HTMLDivElement>(null);
  const controlsRef = useRef<SceneControls | null>(null);
  const [fallback, setFallback] = useState(false);

  useEffect(() => {
    const mount = mountRef.current;
    const root = mount?.closest<HTMLElement>(".new-acid-page") || null;
    if (!mount || !root) {
      return undefined;
    }
    rootRef.current = root;

    const reduceMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (shouldSkipWebgl()) {
      setFallback(true);
    }

    let disposed = false;
    let sceneCleanup: (() => void) | undefined;
    let motionCleanup: (() => void) | undefined;

    Promise.all([
      import("gsap"),
      import("gsap/ScrollTrigger"),
      import("lenis"),
      shouldSkipWebgl() ? Promise.resolve(null) : import("three"),
    ])
      .then(([gsapModule, scrollModule, lenisModule, THREE]) => {
        if (disposed) {
          return;
        }

        const gsap = gsapModule.gsap || gsapModule.default;
        const ScrollTrigger = scrollModule.ScrollTrigger;
        gsap.registerPlugin(ScrollTrigger);

        if (THREE && !reduceMotionQuery.matches && mountRef.current) {
          controlsRef.current = createScene(THREE, mountRef.current);
        }

        motionCleanup = setupMotion({
          root,
          gsap,
          ScrollTrigger,
          Lenis: lenisModule.default,
          controls: controlsRef,
          reduceMotionQuery,
        });
      })
      .catch(() => {
        if (!disposed) {
          setFallback(true);
        }
      });

    sceneCleanup = () => {
      controlsRef.current?.dispose();
      controlsRef.current = null;
    };

    return () => {
      disposed = true;
      motionCleanup?.();
      sceneCleanup?.();
      rootRef.current?.classList.remove("new-acid-motion-ready", "new-acid-lenis-active");
      rootRef.current = null;
    };
  }, []);

  return (
    <div
      ref={mountRef}
      className={fallback ? "new-acid-three is-fallback" : "new-acid-three"}
      aria-hidden="true"
    />
  );
}

function setupMotion({
  root,
  gsap,
  ScrollTrigger,
  Lenis,
  controls,
  reduceMotionQuery,
}: {
  root: HTMLElement;
  gsap: typeof import("gsap").gsap;
  ScrollTrigger: typeof import("gsap/ScrollTrigger").ScrollTrigger;
  Lenis: typeof import("lenis").default;
  controls: MutableRefObject<SceneControls | null>;
  reduceMotionQuery: MediaQueryList;
}) {
  const reduceMotion = reduceMotionQuery.matches;
  const mm = gsap.matchMedia();
  const ctx = gsap.context(() => {
    root.classList.add("new-acid-motion-ready");

    gsap.set(root, {
      "--acid-scroll": 0,
      "--acid-hue-shift": 0,
      "--acid-band-shift": "0px",
    });

    if (reduceMotion) {
      gsap.set(root.querySelectorAll("[data-new-motion]"), {
        autoAlpha: 1,
        clearProps: "transform,opacity,visibility",
      });
      return;
    }

    const heroTimeline = gsap.timeline({ defaults: { ease: "power3.out", overwrite: "auto" } });
    heroTimeline
      .from(root.querySelector(".new-acid-brand"), { y: -10, autoAlpha: 0, duration: 0.55 })
      .from(root.querySelectorAll(".new-acid-nav nav a, .new-acid-console-link"), {
        y: -8,
        autoAlpha: 0,
        duration: 0.44,
        stagger: 0.045,
      }, "-=0.32")
      .from(root.querySelector(".new-acid-kicker"), { y: 16, autoAlpha: 0, duration: 0.58 }, "-=0.22")
      .from(root.querySelectorAll(".new-acid-hero h1, .new-acid-hero p, .new-acid-actions"), {
        y: 24,
        autoAlpha: 0,
        duration: 0.72,
        stagger: 0.08,
      }, "-=0.38")
      .from(root.querySelector(".new-acid-router"), { y: 28, rotationX: 4, autoAlpha: 0, duration: 0.78 }, "-=0.62")
      .from(root.querySelectorAll(".new-acid-route-list > div, .new-acid-router-core > div"), {
        x: 18,
        autoAlpha: 0,
        duration: 0.48,
        stagger: 0.045,
      }, "-=0.52");

    gsap.to(root, {
      "--acid-scroll": 1,
      "--acid-hue-shift": 42,
      "--acid-band-shift": "86px",
      ease: "none",
      scrollTrigger: {
        trigger: root,
        start: "top top",
        end: "bottom bottom",
        scrub: 0.8,
        onUpdate: (self) => {
          controls.current?.setScrollProgress(self.progress);
        },
      },
    });

    gsap.to(root.querySelector(".new-acid-hero-copy"), {
      yPercent: -10,
      autoAlpha: 0.84,
      ease: "none",
      scrollTrigger: {
        trigger: root.querySelector(".new-acid-hero"),
        start: "top top",
        end: "bottom top",
        scrub: 0.9,
      },
    });

    gsap.to(root.querySelector(".new-acid-router"), {
      yPercent: -18,
      rotationY: -5,
      ease: "none",
      scrollTrigger: {
        trigger: root.querySelector(".new-acid-hero"),
        start: "top top",
        end: "bottom top",
        scrub: 0.85,
      },
    });

    gsap.utils.toArray<HTMLElement>("[data-new-motion='section']", root).forEach((section) => {
      gsap.from(section, {
        autoAlpha: 0,
        y: 46,
        scale: 0.985,
        duration: 0.8,
        ease: "power3.out",
        scrollTrigger: {
          trigger: section,
          start: "top 82%",
          once: true,
        },
      });
    });

    gsap.utils.toArray<HTMLElement>("[data-new-motion='card']", root).forEach((card, index) => {
      gsap.from(card, {
        autoAlpha: 0,
        y: 30,
        rotationX: index % 2 === 0 ? 2 : -2,
        duration: 0.62,
        ease: "power3.out",
        scrollTrigger: {
          trigger: card,
          start: "top 86%",
          once: true,
        },
      });
    });

    mm.add("(min-width: 981px)", () => {
      const band = root.querySelector(".new-acid-band");
      const stack = root.querySelector(".new-acid-stack");
      if (band && stack) {
        gsap.to(stack, {
          xPercent: -10,
          ease: "none",
          scrollTrigger: {
            trigger: band,
            start: "top bottom",
            end: "bottom top",
            scrub: 1,
          },
        });
      }

      return undefined;
    });
  }, root);

  let lenis: InstanceType<typeof Lenis> | null = null;
  const lenisTick = (time: number) => {
    lenis?.raf(time * 1000);
  };
  let rafId = 0;
  const canSmoothScroll = !reduceMotion && window.matchMedia("(min-width: 900px) and (pointer: fine)").matches;

  if (canSmoothScroll) {
    lenis = new Lenis({
      duration: 1.08,
      easing: (t: number) => 1 - Math.pow(1 - t, 3),
      smoothWheel: true,
      wheelMultiplier: 0.86,
      touchMultiplier: 1,
    });
    root.classList.add("new-acid-lenis-active");
    lenis.on("scroll", () => ScrollTrigger.update());
    gsap.ticker.add(lenisTick);
    gsap.ticker.lagSmoothing(0);
  }

  const onResize = () => ScrollTrigger.refresh();
  window.addEventListener("resize", onResize, { passive: true });
  rafId = window.requestAnimationFrame(() => ScrollTrigger.refresh());

  return () => {
    window.cancelAnimationFrame(rafId);
    window.removeEventListener("resize", onResize);
    if (lenis) {
      gsap.ticker.remove(lenisTick);
      lenis.destroy();
      lenis = null;
    }
    mm.revert();
    ctx.revert();
    ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
    root.classList.remove("new-acid-motion-ready", "new-acid-lenis-active");
  };
}

function createScene(THREE: ThreeRuntime, target: HTMLDivElement): SceneControls {
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: false,
    preserveDrawingBuffer: true,
    powerPreference: "low-power",
  });
  renderer.setClearColor(0x000000, 0);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.35));
  renderer.setSize(target.clientWidth, target.clientHeight, false);
  target.appendChild(renderer.domElement);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 100);
  camera.position.set(0, 0, 9);

  const group = new THREE.Group();
  scene.add(group);

  const uniforms: AcidUniforms = {
    uTime: { value: 0 },
    uScroll: { value: 0 },
    uPulse: { value: 0.42 },
    uPointer: { value: new THREE.Vector2(0, 0) },
  };

  const shader = new THREE.Mesh(
    new THREE.PlaneGeometry(18, 12, 1, 1),
    new THREE.ShaderMaterial({
      transparent: true,
      depthWrite: false,
      blending: THREE.AdditiveBlending,
      uniforms,
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = vec4(position.xy, 0.0, 1.0);
        }
      `,
      fragmentShader: `
        precision highp float;
        uniform float uTime;
        uniform float uScroll;
        uniform float uPulse;
        uniform vec2 uPointer;
        varying vec2 vUv;

        float hash(vec2 p) {
          p = fract(p * vec2(123.34, 456.21));
          p += dot(p, p + 34.345);
          return fract(p.x * p.y);
        }

        float noise(vec2 p) {
          vec2 i = floor(p);
          vec2 f = fract(p);
          float a = hash(i);
          float b = hash(i + vec2(1.0, 0.0));
          float c = hash(i + vec2(0.0, 1.0));
          float d = hash(i + vec2(1.0, 1.0));
          vec2 u = f * f * (3.0 - 2.0 * f);
          return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
        }

        void main() {
          vec2 uv = vUv;
          vec2 p = (uv - 0.5) * vec2(1.55, 1.0);
          float t = uTime * 0.16;
          float n = noise(p * 5.2 + vec2(t * 1.6, -t + uScroll * 2.0));
          float n2 = noise(p * 12.0 - vec2(t, t * 1.4));
          float ring = sin((length(p - uPointer * 0.18) * 12.0) - t * 18.0 + uScroll * 6.0);
          float acid = smoothstep(0.18, 0.98, n * 0.72 + n2 * 0.28 + ring * 0.12);
          vec3 lime = vec3(0.84, 1.0, 0.13);
          vec3 mint = vec3(0.38, 1.0, 0.84);
          vec3 pink = vec3(1.0, 0.22, 0.95);
          vec3 blue = vec3(0.34, 0.66, 1.0);
          vec3 color = mix(mix(lime, mint, uv.x), mix(pink, blue, uv.y), acid);
          float vignette = smoothstep(0.86, 0.18, length(uv - 0.5));
          float alpha = (0.12 + acid * 0.26 + uPulse * 0.06) * vignette;
          gl_FragColor = vec4(color, alpha);
        }
      `,
    }),
  );
  shader.position.z = -4;
  scene.add(shader);

  const geometry = new THREE.BufferGeometry();
  const count = 420;
  const positions = new Float32Array(count * 3);
  const colors = new Float32Array(count * 3);
  const color = new THREE.Color();

  for (let index = 0; index < count; index += 1) {
    const radius = 1.3 + Math.random() * 4.2;
    const angle = index * 0.43;
    const spin = Math.sin(index * 1.17) * 0.8;
    positions[index * 3] = Math.cos(angle) * radius + spin;
    positions[index * 3 + 1] = Math.sin(angle * 1.14) * radius * 0.72;
    positions[index * 3 + 2] = (Math.random() - 0.5) * 4.4;

    const hue = (0.28 + (index % 96) / 180) % 1;
    color.setHSL(hue, 0.92, index % 3 === 0 ? 0.66 : 0.53);
    colors[index * 3] = color.r;
    colors[index * 3 + 1] = color.g;
    colors[index * 3 + 2] = color.b;
  }

  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

  const material = new THREE.PointsMaterial({
    size: 0.075,
    vertexColors: true,
    transparent: true,
    opacity: 0.76,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  });

  const particles = new THREE.Points(geometry, material);
  group.add(particles);

  const knot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1.24, 0.22, 96, 12, 2, 5),
    new THREE.MeshBasicMaterial({
      color: 0xd7ff2d,
      transparent: true,
      opacity: 0.24,
      wireframe: true,
    }),
  );
  knot.position.set(1.4, -0.2, -0.8);
  group.add(knot);

  const ring = new THREE.Mesh(
    new THREE.TorusGeometry(3.1, 0.018, 8, 120),
    new THREE.MeshBasicMaterial({
      color: 0x69ffe0,
      transparent: true,
      opacity: 0.34,
    }),
  );
  ring.rotation.set(1.12, 0.14, -0.24);
  group.add(ring);

  let frameId = 0;
  let scrollProgress = 0;
  const pointerTarget = new THREE.Vector2(0, 0);

  const syncSize = () => {
    const width = Math.max(target.clientWidth, 1);
    const height = Math.max(target.clientHeight, 1);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height, false);
  };

  const onPointerMove = (event: PointerEvent) => {
    const x = event.clientX / Math.max(window.innerWidth, 1) - 0.5;
    const y = event.clientY / Math.max(window.innerHeight, 1) - 0.5;
    pointerTarget.set(x, -y);
    group.rotation.y = x * 0.34;
    group.rotation.x = y * -0.18;
  };

  const animate = () => {
    const time = performance.now() * 0.001;
    uniforms.uTime.value = time;
    uniforms.uScroll.value += (scrollProgress - uniforms.uScroll.value) * 0.08;
    uniforms.uPulse.value = 0.42 + Math.sin(time * 0.9) * 0.16;
    uniforms.uPointer.value.lerp(pointerTarget, 0.08);
    particles.rotation.z = time * 0.055 + uniforms.uScroll.value * 0.28;
    particles.rotation.y = time * 0.04 + uniforms.uScroll.value * 0.42;
    knot.rotation.x = time * 0.21 + uniforms.uScroll.value * 0.8;
    knot.rotation.y = time * 0.28;
    ring.rotation.z = time * -0.08 - uniforms.uScroll.value * 0.5;
    group.position.y = uniforms.uScroll.value * -0.72;
    renderer.render(scene, camera);
    frameId = window.requestAnimationFrame(animate);
  };

  syncSize();
  window.addEventListener("resize", syncSize, { passive: true });
  window.addEventListener("pointermove", onPointerMove, { passive: true });
  frameId = window.requestAnimationFrame(animate);

  return {
    uniforms,
    setScrollProgress(progress: number) {
      scrollProgress = progress;
    },
    dispose() {
      window.cancelAnimationFrame(frameId);
      window.removeEventListener("resize", syncSize);
      window.removeEventListener("pointermove", onPointerMove);
      group.clear();
      scene.remove(shader);
      shader.geometry.dispose();
      if (Array.isArray(shader.material)) {
        shader.material.forEach((item) => item.dispose());
      } else {
        shader.material.dispose();
      }
      geometry.dispose();
      material.dispose();
      knot.geometry.dispose();
      if (Array.isArray(knot.material)) {
        knot.material.forEach((item) => item.dispose());
      } else {
        knot.material.dispose();
      }
      ring.geometry.dispose();
      if (Array.isArray(ring.material)) {
        ring.material.forEach((item) => item.dispose());
      } else {
        ring.material.dispose();
      }
      renderer.dispose();
      renderer.domElement.remove();
    },
  };
}