"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import type { Points } from "three";
import { cn } from "@/lib/utils";

function Stars({ count, speedRef }: { count: number; speedRef: React.RefObject<number> }) {
  const ref = React.useRef<Points>(null);

  const positions = React.useMemo(() => {
    const array = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      array[i * 3] = (Math.random() - 0.5) * 12;
      array[i * 3 + 1] = (Math.random() - 0.5) * 12;
      array[i * 3 + 2] = Math.random() * -30;
    }
    return array;
  }, [count]);

  useFrame((_, delta) => {
    const geometry = ref.current?.geometry;
    if (!geometry) return;

    const attribute = geometry.attributes.position;
    const array = attribute.array as Float32Array;
    const speed = (speedRef.current ?? 1) * delta * 14;

    for (let i = 0; i < count; i++) {
      array[i * 3 + 2] += speed;
      if (array[i * 3 + 2] > 1) {
        array[i * 3] = (Math.random() - 0.5) * 12;
        array[i * 3 + 1] = (Math.random() - 0.5) * 12;
        array[i * 3 + 2] = -30;
      }
    }

    attribute.needsUpdate = true;
  });

  return (
    <points ref={ref}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
      </bufferGeometry>
      <pointsMaterial size={0.05} color="#ffffff" sizeAttenuation transparent opacity={0.9} />
    </points>
  );
}

export function StarfieldWarp3D({
  count = 2500,
  height = 360,
  className,
}: {
  count?: number;
  height?: number;
  className?: string;
}) {
  const speedRef = React.useRef(1);
  const [boosting, setBoosting] = React.useState(false);

  React.useEffect(() => {
    let frame = 0;
    const target = boosting ? 6 : 1;

    function step() {
      speedRef.current += (target - speedRef.current) * 0.06;
      frame = requestAnimationFrame(step);
    }

    frame = requestAnimationFrame(step);
    return () => cancelAnimationFrame(frame);
  }, [boosting]);

  return (
    <div
      className={cn("relative w-full cursor-pointer overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
      onPointerDown={() => setBoosting(true)}
      onPointerUp={() => setBoosting(false)}
      onPointerLeave={() => setBoosting(false)}
    >
      <Canvas camera={{ position: [0, 0, 1], fov: 75 }} dpr={[1, 2]}>
        <Stars count={count} speedRef={speedRef} />
      </Canvas>

      <span className="pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-white/50">
        hold to warp
      </span>
    </div>
  );
}
Related components
