"use client";

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

const SIZE = 14;
const SPACING = 0.42;

function Grid({ accent }: { accent: string }) {
  const ref = React.useRef<InstancedMesh>(null);
  const matrix = React.useMemo(() => new Matrix4(), []);
  const base = React.useMemo(() => new Color("#1e293b"), []);
  const highlight = React.useMemo(() => new Color(accent), [accent]);
  const mixed = React.useMemo(() => new Color(), []);
  const { viewport } = useThree();

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

    const time = state.clock.elapsedTime;
    const pointerX = (state.pointer.x * viewport.width) / 2;
    const pointerZ = (-state.pointer.y * viewport.height) / 2;

    let index = 0;
    for (let x = 0; x < SIZE; x++) {
      for (let z = 0; z < SIZE; z++) {
        const px = (x - SIZE / 2) * SPACING;
        const pz = (z - SIZE / 2) * SPACING;

        const distance = Math.hypot(px - pointerX, pz - pointerZ);
        const pulse = Math.sin(time * 1.6 - distance * 2.2) * 0.12;
        const proximity = Math.max(0, 1 - distance / 1.8);
        const height = 0.08 + pulse + proximity * 0.7;

        matrix.makeScale(1, Math.max(height, 0.05) * 10, 1);
        matrix.setPosition(px, Math.max(height, 0.05) / 2, pz);
        mesh.setMatrixAt(index, matrix);

        mixed.copy(base).lerp(highlight, Math.min(proximity * 1.4, 1));
        mesh.setColorAt(index, mixed);

        index++;
      }
    }

    mesh.instanceMatrix.needsUpdate = true;
    if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
  });

  return (
    <instancedMesh ref={ref} args={[undefined, undefined, SIZE * SIZE]}>
      <boxGeometry args={[0.26, 0.1, 0.26]} />
      <meshStandardMaterial roughness={0.4} metalness={0.3} />
    </instancedMesh>
  );
}

export function CubeGrid3D({
  accent = "#8b5cf6",
  height = 380,
  className,
}: {
  accent?: string;
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 3.4, 4.6], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.7} />
        <directionalLight position={[3, 6, 2]} intensity={1.8} />
        <Grid accent={accent} />
        <OrbitControls enableZoom={false} enablePan={false} minPolarAngle={0.4} maxPolarAngle={1.2} />
      </Canvas>
    </div>
  );
}

Related components