"use client";

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

/** Draws text (or an image) to an offscreen canvas and samples opaque pixels. */
function useSampledPoints({
  text,
  src,
  density = 4,
}: {
  text?: string;
  src?: string;
  density?: number;
}) {
  const [data, setData] = React.useState<{ positions: Float32Array; colors: Float32Array } | null>(
    null
  );

  React.useEffect(() => {
    let cancelled = false;

    function sample(draw: (ctx: CanvasRenderingContext2D, w: number, h: number) => void) {
      const width = 220;
      const height = 110;
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;

      const ctx = canvas.getContext("2d", { willReadFrequently: true });
      if (!ctx) return;

      ctx.clearRect(0, 0, width, height);
      draw(ctx, width, height);

      const image = ctx.getImageData(0, 0, width, height).data;
      const positions: number[] = [];
      const colors: number[] = [];

      for (let y = 0; y < height; y += density) {
        for (let x = 0; x < width; x += density) {
          const index = (y * width + x) * 4;
          if (image[index + 3] < 128) continue;

          positions.push((x - width / 2) / 26, -(y - height / 2) / 26, (Math.random() - 0.5) * 0.2);
          colors.push(image[index] / 255, image[index + 1] / 255, image[index + 2] / 255);
        }
      }

      if (!cancelled) {
        setData({
          positions: new Float32Array(positions),
          colors: new Float32Array(colors),
        });
      }
    }

    if (src) {
      const image = new Image();
      image.crossOrigin = "anonymous";
      image.onload = () =>
        sample((ctx, w, h) => {
          ctx.drawImage(image, 0, 0, w, h);
        });
      image.src = src;
    } else {
      sample((ctx, w, h) => {
        ctx.fillStyle = "#8b5cf6";
        ctx.font = "bold 64px system-ui, sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(text ?? "3D", w / 2, h / 2);
      });
    }

    return () => {
      cancelled = true;
    };
  }, [text, src, density]);

  return data;
}

function Cloud({ positions, colors }: { positions: Float32Array; colors: Float32Array }) {
  const ref = React.useRef<Points>(null);
  const home = React.useMemo(() => Float32Array.from(positions), [positions]);
  const { viewport } = useThree();

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

    const attribute = geometry.attributes.position as BufferAttribute;
    const array = attribute.array as Float32Array;

    const px = (state.pointer.x * viewport.width) / 2;
    const py = (state.pointer.y * viewport.height) / 2;

    for (let i = 0; i < array.length; i += 3) {
      const hx = home[i];
      const hy = home[i + 1];

      const dx = hx - px;
      const dy = hy - py;
      const distance = Math.hypot(dx, dy);
      const push = distance < 1.4 ? (1.4 - distance) * 1.6 : 0;

      const targetX = hx + (distance ? (dx / distance) * push : 0);
      const targetY = hy + (distance ? (dy / distance) * push : 0);

      array[i] += (targetX - array[i]) * 0.12;
      array[i + 1] += (targetY - array[i + 1]) * 0.12;
    }

    attribute.needsUpdate = true;
  });

  return (
    <points ref={ref}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
      </bufferGeometry>
      <pointsMaterial size={0.045} vertexColors sizeAttenuation transparent opacity={0.95} />
    </points>
  );
}

export function ImageParticles3D({
  text = "3D",
  src,
  density = 4,
  height = 320,
  className,
}: {
  text?: string;
  src?: string;
  density?: number;
  height?: number;
  className?: string;
}) {
  const data = useSampledPoints({ text, src, density });

  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 6], fov: 50 }} dpr={[1, 2]}>
        {data && <Cloud positions={data.positions} colors={data.colors} />}
      </Canvas>
    </div>
  );
}
Related components
