"use client";

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

const VERTEX = [
  "varying vec2 vUv;",
  "void main() {",
  "  vUv = uv;",
  "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
  "}",
].join("\n");

const FRAGMENT = [
  "precision highp float;",
  "varying vec2 vUv;",
  "uniform float uTime;",
  "uniform vec2 uPointer;",
  "uniform vec3 uColorA;",
  "uniform vec3 uColorB;",
  "uniform vec3 uColorC;",
  "",
  "// Classic value noise — cheap and good enough for a soft gradient.",
  "float hash(vec2 p) {",
  "  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);",
  "}",
  "",
  "float noise(vec2 p) {",
  "  vec2 i = floor(p);",
  "  vec2 f = fract(p);",
  "  vec2 u = f * f * (3.0 - 2.0 * f);",
  "  return mix(",
  "    mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x),",
  "    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),",
  "    u.y",
  "  );",
  "}",
  "",
  "float fbm(vec2 p) {",
  "  float total = 0.0;",
  "  float amplitude = 0.5;",
  "  for (int i = 0; i < 5; i++) {",
  "    total += noise(p) * amplitude;",
  "    p *= 2.0;",
  "    amplitude *= 0.5;",
  "  }",
  "  return total;",
  "}",
  "",
  "void main() {",
  "  vec2 uv = vUv;",
  "  vec2 p = uv * 3.0;",
  "  p += uPointer * 0.6;",
  "",
  "  float n = fbm(p + uTime * 0.08);",
  "  float m = fbm(p * 1.6 - uTime * 0.05);",
  "",
  "  vec3 color = mix(uColorA, uColorB, smoothstep(0.2, 0.8, n));",
  "  color = mix(color, uColorC, smoothstep(0.35, 0.9, m));",
  "",
  "  // Vignette so the panel reads as a surface, not a flat fill.",
  "  float d = distance(uv, vec2(0.5));",
  "  color *= 1.0 - d * 0.55;",
  "",
  "  gl_FragColor = vec4(color, 1.0);",
  "}",
].join("\n");

function Plane({ colors, speed }: { colors: string[]; speed: number }) {
  const ref = React.useRef<ShaderMaterial>(null);

  const uniforms = React.useMemo(
    () => ({
      uTime: { value: 0 },
      uPointer: { value: [0, 0] as unknown as { x: number; y: number } },
      uColorA: { value: new Color(colors[0]) },
      uColorB: { value: new Color(colors[1]) },
      uColorC: { value: new Color(colors[2]) },
    }),
    [colors]
  );

  useFrame((state, delta) => {
    if (!ref.current) return;
    ref.current.uniforms.uTime.value += delta * speed;
    const pointer = ref.current.uniforms.uPointer.value as unknown as number[];
    pointer[0] += (state.pointer.x - pointer[0]) * 0.05;
    pointer[1] += (state.pointer.y - pointer[1]) * 0.05;
  });

  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial
        ref={ref}
        vertexShader={VERTEX}
        fragmentShader={FRAGMENT}
        uniforms={uniforms as never}
      />
    </mesh>
  );
}

export function ShaderGradient3D({
  colors = ["#1e1b4b", "#7c3aed", "#06b6d4"],
  speed = 1,
  height = 360,
  children,
  className,
}: {
  colors?: string[];
  speed?: number;
  height?: number;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn("relative w-full overflow-hidden rounded-2xl border", className)}
      style={{ height }}
    >
      <Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }} dpr={[1, 2]}>
        <Plane colors={colors} speed={speed} />
      </Canvas>

      {children && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center p-8">
          {children}
        </div>
      )}
    </div>
  );
}
Related components
