"use client";

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

function Scene({ progressRef }: { progressRef: React.RefObject<number> }) {
  const group = React.useRef<Group>(null);
  const { camera } = useThree();

  useFrame(() => {
    const progress = progressRef.current ?? 0;

    // Camera arcs around the object as the container scrolls past.
    const angle = progress * Math.PI * 1.4;
    const radius = 5 - progress * 1.6;
    camera.position.set(Math.sin(angle) * radius, 1 + progress * 1.2, Math.cos(angle) * radius);
    camera.lookAt(0, 0, 0);

    if (group.current) {
      group.current.rotation.y = progress * Math.PI * 2;
      group.current.scale.setScalar(0.8 + progress * 0.45);
    }
  });

  return (
    <group ref={group}>
      <RoundedBox args={[1.6, 1.6, 1.6]} radius={0.16} smoothness={5}>
        <meshStandardMaterial color="#8b5cf6" roughness={0.2} metalness={0.75} />
      </RoundedBox>

      {[0, 1, 2, 3].map((index) => (
        <mesh
          key={index}
          position={[
            Math.cos((index / 4) * Math.PI * 2) * 2.4,
            0,
            Math.sin((index / 4) * Math.PI * 2) * 2.4,
          ]}
        >
          <sphereGeometry args={[0.2, 20, 20]} />
          <meshStandardMaterial color="#38bdf8" emissive="#38bdf8" emissiveIntensity={0.8} />
        </mesh>
      ))}
    </group>
  );
}

export function ScrollScene3D({
  height = 320,
  scrollHeight = 900,
  className,
}: {
  height?: number;
  scrollHeight?: number;
  className?: string;
}) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const progressRef = React.useRef(0);
  const [display, setDisplay] = React.useState(0);

  const onScroll = React.useCallback(() => {
    const node = containerRef.current;
    if (!node) return;

    const max = node.scrollHeight - node.clientHeight;
    const value = max > 0 ? node.scrollTop / max : 0;
    progressRef.current = value;
    setDisplay(value);
  }, []);

  return (
    <div className={cn("w-full space-y-2", className)}>
      <div
        ref={containerRef}
        onScroll={onScroll}
        className="relative w-full overflow-y-auto rounded-2xl border bg-black"
        style={{ height }}
      >
        <div className="sticky top-0" style={{ height }}>
          <Canvas camera={{ position: [0, 1, 5], fov: 45 }} dpr={[1, 2]}>
            <ambientLight intensity={0.5} />
            <directionalLight position={[4, 5, 3]} intensity={2} />
            <pointLight position={[-4, -2, -3]} intensity={16} color="#f472b6" />
            <Scene progressRef={progressRef} />
          </Canvas>
        </div>

        {/* Gives the container something to scroll. */}
        <div style={{ height: scrollHeight }} />
      </div>

      <div className="flex items-center gap-3">
        <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
          <div
            className="h-full rounded-full bg-primary transition-[width] duration-100"
            style={{ width: display * 100 + "%" }}
          />
        </div>
        <span className="w-10 text-end text-xs tabular-nums text-muted-foreground">
          {Math.round(display * 100)}%
        </span>
      </div>
    </div>
  );
}
Related components
