"use client";

import { useEffect, useRef } from "react";

/* ------------------------------------------------------------------ */
/*  Vertex shader (shared by all passes)                               */
/* ------------------------------------------------------------------ */

const VERT = /* glsl */ `#version 300 es
precision highp float;
in vec2 aPosition;
out vec2 vTextureCoord;
out vec3 vVertexPosition;
void main() {
  vTextureCoord = aPosition * 0.5 + 0.5;
  vVertexPosition = vec3(aPosition, 0.0);
  gl_Position = vec4(aPosition, 0.0, 1.0);
}`;

/* ------------------------------------------------------------------ */
/*  Fragment shaders — extracted from Unicorn Studio project           */
/* ------------------------------------------------------------------ */

/** Pass 1 — NoiseFill: voronoi noise with anchored palette */
const FRAG_NOISE_FILL = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

uvec2 pcg2d(uvec2 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  v ^= v >> 16;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  return v;
}
float randFibo(vec2 p) {
  uvec2 v = floatBitsToUint(p);
  v = pcg2d(v);
  uint r = v.x ^ v.y;
  return float(r) / float(0xffffffffu);
}

out vec4 fragColor;

const float PI = 3.14159265359;
const float TAU = 6.28318530718;

vec3 anchoredPal(float t, vec3 col1, vec3 col2) {
  vec3 mid = 0.5 * (col1 + col2);
  vec3 axisAmp = 0.5 * (col2 - col1);
  vec3 base = mid + axisAmp * cos(TAU * t);
  vec3 axis = length(axisAmp) > 0.0001 ? normalize(axisAmp) : vec3(1.0, 0.0, 0.0);
  vec3 ref = abs(axis.x) > 0.9 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);
  vec3 tangent1 = normalize(cross(axis, ref));
  vec3 tangent2 = normalize(cross(axis, tangent1));
  float richness = 0.24 * length(axisAmp) + 0.02;
  vec3 ripple = tangent1 * sin(TAU * (t * 2.0 + 0.123)) + tangent2 * sin(TAU * (t * 3.0 + 0.437));
  vec3 col = base + (richness * 0.6300) * ripple;
  col = 1./(1. + exp(-col * 4. + 0.25) * 7.5);
  return col;
}

mat2 rot(float a) { return mat2(cos(a),-sin(a),sin(a),cos(a)); }

vec3 hash3(vec2 p) {
  vec3 q = vec3(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)));
  return fract(sin(q)*43758.5453);
}

float voronoise(vec2 uv) {
  float u = 1.;
  float v = 1.;
  vec2 drift = vec2(0, 0.0000 * uTime * 0.008);
  vec2 skew = vec2(0.5000, 1.0 - 0.5000);
  vec2 x = (uv * skew * 2.) - drift * mix(1., 14., 0.1200) * 2.;
  vec2 p = floor(x);
  vec2 f = fract(x);
  float k = 1.0 + 63.0 * pow(1.0-v,4.0);
  float va = 0.0;
  float wt = 0.0;
  for( int j=-2; j<=2; j++ )
  for( int i=-2; i<=2; i++ ) {
    vec2 g = vec2( float(i),float(j) );
    vec3 o = hash3( p + g ) * vec3(u,u,1.0);
    o.xy += 0.5 * vec2( sin(uTime * 0.1 + 0.0000 + o.x * 6.28), cos(uTime * 0.1 + 0.0000 + o.y * 6.28) );
    vec2 r = g - f + o.xy;
    float d = dot(r,r);
    float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
    va += o.z*ww;
    wt += ww;
  }
  return va/wt;
}

float getVoronoiNoise(vec2 uv) {
  float turb = 0.5400 * 2.5;
  float noise = voronoise(uv);
  return mix(0.5, noise, turb);
}

float getNoise(vec2 uv) { return getVoronoiNoise(uv); }

void main() {
  vec2 uv = vTextureCoord;
  float aspectRatio = uResolution.x/uResolution.y;
  vec2 aspect = vec2(aspectRatio, 1.0);
  vec2 mPos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos-0.5), 0.0000);
  vec2 pos = mix(vec2(0.5, 0.5), mPos, 0.0000);
  float scale = mix(1., 14., 0.1200);
  vec2 drift = vec2(0, 0.0000 * uTime * 0.0125);
  mat2 rotation = rot(0.0000 * 2. * PI);
  vec2 st = (uv - pos) * aspect * scale * rotation;
  float noise = getNoise(st);
  if (0.0000 > 0.0) {
    vec2 toMouse = (uv - uMousePos) * aspect;
    float r = length(toMouse);
    float radius = mix(0.1, 1., 0.5000);
    float falloff = 1.0 - smoothstep(0.0, radius, r);
    vec2 dir = toMouse / max(r, 1e-5);
    vec2 uvBulgeOffsetAspect = -dir * (0.0000 * radius) * falloff * falloff;
    vec2 offset = uvBulgeOffsetAspect / aspect * r * 5.;
    st = (uv - pos + offset * noise) * aspect * scale * rotation;
    noise = getNoise(st);
  }
  vec4 color = texture(uTexture, uv);
  vec4 bg = color;
  float shift = 0.3100 + (1.0000 * uTime * 0.01);
  vec3 noiseColor = anchoredPal(noise + shift, vec3(0.1843137254901961, 0.15294117647058825, 0), vec3(0.611764705882353, 0.7803921568627451, 1));
  color.rgb = noiseColor.rgb;
  float dither = (randFibo(gl_FragCoord.xy) - 0.5) / 255.0;
  color.rgb += dither * 0.5;
  color.rgb = mix(bg.rgb, color.rgb, 1.0000);
  color.a = max(bg.a, 1.0000);
  fragColor = color;
}`;

/** Pass 2 — Circle: mouse-following soft glow with overlay blend */
const FRAG_CIRCLE = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uMousePos;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return vec3(
    (dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),
    (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),
    (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z))
  );
}

out vec4 fragColor;

mat2 rot(float a) { return mat2(cos(a),-sin(a),sin(a),cos(a)); }

float luma(vec3 color) { return dot(color, vec3(0.299, 0.587, 0.114)); }

void main() {
  vec2 uv = vTextureCoord;
  vec4 bg = texture(uTexture, uv);
  float lum = luma(bg.rgb);
  float displacement = (lum - 0.5) * 0.3200 * 0.5;
  vec2 aspectRatio = vec2(uResolution.x/uResolution.y, 1.0);
  vec2 skew = vec2(0.5000, 1.0 - 0.5000);
  float halfRadius = 0.5840 * 0.5;
  float innerEdge = halfRadius - 1.0000 * halfRadius * 0.5;
  float outerEdge = halfRadius + 1.0000 * halfRadius * 0.5;
  vec2 pos = vec2(0.5, 0.5);
  pos += (uMousePos - 0.5) * 0.6700;
  const float TWO_PI = 6.28318530718;
  vec2 scaledUV = uv * aspectRatio * rot(0.0054 * TWO_PI) * skew;
  vec2 scaledPos = pos * aspectRatio * rot(0.0054 * TWO_PI) * skew;
  float radius = distance(scaledUV, scaledPos);
  float falloff = smoothstep(innerEdge + displacement, outerEdge + displacement, radius);
  falloff = (1.0 - falloff) * 0.8400;
  vec3 circle = vec3(0.03529411764705882, 0.7372549019607844, 0.9490196078431372) * falloff;
  vec3 blended = blend(5, vec3(0.03529411764705882, 0.7372549019607844, 0.9490196078431372), bg.rgb);
  circle = mix(bg.rgb, blended, falloff * 0.8400);
  vec4 color = vec4(circle, max(bg.a, falloff));
  fragColor = color;
}`;

/** Pass 3 — FlowField: Perlin noise-driven UV distortion */
const FRAG_FLOW_FIELD = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

float ease(int easingFunc, float t) { return t; }

vec3 hash33(vec3 p3) {
  p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
  p3 += dot(p3, p3.yxz + 19.19);
  return -1.0 + 2.0 * fract(vec3(
    (p3.x + p3.y) * p3.z,
    (p3.x + p3.z) * p3.y,
    (p3.y + p3.z) * p3.x
  ));
}

float perlin_noise(vec3 p) {
  vec3 pi = floor(p);
  vec3 pf = p - pi;
  vec3 w = pf * pf * (3.0 - 2.0 * pf);
  float n000 = dot(pf - vec3(0,0,0), hash33(pi + vec3(0,0,0)));
  float n100 = dot(pf - vec3(1,0,0), hash33(pi + vec3(1,0,0)));
  float n010 = dot(pf - vec3(0,1,0), hash33(pi + vec3(0,1,0)));
  float n110 = dot(pf - vec3(1,1,0), hash33(pi + vec3(1,1,0)));
  float n001 = dot(pf - vec3(0,0,1), hash33(pi + vec3(0,0,1)));
  float n101 = dot(pf - vec3(1,0,1), hash33(pi + vec3(1,0,1)));
  float n011 = dot(pf - vec3(0,1,1), hash33(pi + vec3(0,1,1)));
  float n111 = dot(pf - vec3(1,1,1), hash33(pi + vec3(1,1,1)));
  float nx00 = mix(n000, n100, w.x);
  float nx01 = mix(n001, n101, w.x);
  float nx10 = mix(n010, n110, w.x);
  float nx11 = mix(n011, n111, w.x);
  float nxy0 = mix(nx00, nx10, w.y);
  float nxy1 = mix(nx01, nx11, w.y);
  return mix(nxy0, nxy1, w.z);
}

const float MAX_ITERATIONS = 16.;

vec2 flow(in vec2 st) {
  float aspectRatio = uResolution.x/uResolution.y;
  vec2 mPos = vec2(0.5017421602787456, 0.49163763066202093) + mix(vec2(0), (uMousePos-0.5), 0.0000);
  vec2 pos = mix(vec2(0.5017421602787456, 0.49163763066202093), mPos, floor(1.0000));
  float dist = ease(0, max(0.,1. - distance(st * vec2(aspectRatio, 1), mPos * vec2(aspectRatio, 1)) * 4. * (1. - 1.0000)));
  float sprd = (0.2000 + 0.01) / ((aspectRatio + 1.) / 2.);
  float amt = 0.7200 * 0.01 * dist;
  if(amt <= 0.) { return st; }
  vec2 invPos = 1. - pos;
  float freq = 5. * sprd;
  float t = 0.0000*5. + uTime/60.;
  float degrees = 360. * (0.5000 * 6.);
  float radians = degrees * 3.1415926 / 180.;
  for (float i = 0.; i < MAX_ITERATIONS; i++) {
    vec2 scaled = (st - 0.5) * vec2(aspectRatio, 1) + invPos;
    float perlin = perlin_noise(vec3((scaled - 0.5) * freq, t)) - 0.5;
    float ang = perlin * radians;
    st += vec2(cos(ang), sin(ang)) * amt;
    st = clamp(st, 0., 1.);
  }
  return st;
}

out vec4 fragColor;

void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, mix(uv, flow(uv), 1.0000));
  fragColor = color;
}`;

/** Pass 4 — Grain: film grain with overlay blend */
const FRAG_GRAIN = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return vec3(
    (dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),
    (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),
    (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z))
  );
}

uvec2 pcg2d(uvec2 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  v ^= v >> 16;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  return v;
}
float randFibo(vec2 p) {
  uvec2 v = floatBitsToUint(p);
  v = pcg2d(v);
  uint r = v.x ^ v.y;
  return float(r) / float(0xffffffffu);
}

out vec4 fragColor;

void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  if(color.a <= 0.001) { fragColor = vec4(0); return; }
  vec2 st = uv;
  vec3 grainRGB = vec3(0);
  st *= uResolution;
  float delta = fract((floor(uTime)/20.));
  if(1 == 1) {
    grainRGB = vec3(
      randFibo(st + vec2(1, 2) + delta),
      randFibo(st + vec2(2, 3) + delta),
      randFibo(st + vec2(3, 4) + delta)
    );
  } else {
    grainRGB = vec3(randFibo(st + vec2(delta)));
  }
  color.rgb = mix(color.rgb, blend(5, grainRGB, color.rgb), 0.1300);
  fragColor = color;
}`;

/* ------------------------------------------------------------------ */
/*  WebGL helpers                                                      */
/* ------------------------------------------------------------------ */

function compile(gl: WebGL2RenderingContext, type: number, src: string) {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
    console.error("Shader error:", gl.getShaderInfoLog(s));
    gl.deleteShader(s);
    return null;
  }
  return s;
}

function link(gl: WebGL2RenderingContext, vert: string, frag: string) {
  const p = gl.createProgram()!;
  const vs = compile(gl, gl.VERTEX_SHADER, vert);
  const fs = compile(gl, gl.FRAGMENT_SHADER, frag);
  if (!vs || !fs) return null;
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.bindAttribLocation(p, 0, "aPosition");
  gl.linkProgram(p);
  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
    console.error("Link error:", gl.getProgramInfoLog(p));
    return null;
  }
  gl.deleteShader(vs);
  gl.deleteShader(fs);
  return p;
}

interface FBO {
  fb: WebGLFramebuffer;
  tex: WebGLTexture;
}

function makeFBO(gl: WebGL2RenderingContext, w: number, h: number): FBO {
  const tex = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, w, h, 0, gl.RGBA, gl.HALF_FLOAT, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  const fb = gl.createFramebuffer()!;
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  return { fb, tex };
}

function destroyFBO(gl: WebGL2RenderingContext, fbo: FBO) {
  gl.deleteFramebuffer(fbo.fb);
  gl.deleteTexture(fbo.tex);
}

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export default function FlowI() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const gl = canvas.getContext("webgl2", {
      alpha: false,
      premultipliedAlpha: false,
      antialias: false,
    });
    if (!gl) return;

    gl.getExtension("EXT_color_buffer_float");

    /* --- Fullscreen quad ------------------------------------------ */
    const vao = gl.createVertexArray()!;
    gl.bindVertexArray(vao);
    const vbo = gl.createBuffer()!;
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    /* --- Compile programs ----------------------------------------- */
    const pNoiseFill = link(gl, VERT, FRAG_NOISE_FILL);
    const pCircle    = link(gl, VERT, FRAG_CIRCLE);
    const pFlowField = link(gl, VERT, FRAG_FLOW_FIELD);
    const pGrain     = link(gl, VERT, FRAG_GRAIN);
    if (!pNoiseFill || !pCircle || !pFlowField || !pGrain) return;

    /* --- FBOs ----------------------------------------------------- */
    let w = 2, h = 2;
    let fboA = makeFBO(gl, w, h);
    let fboB = makeFBO(gl, w, h);

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio, 1.5);
      const rect = canvas.getBoundingClientRect();
      const newW = Math.floor(rect.width * dpr);
      const newH = Math.floor(rect.height * dpr);
      if (canvas.width !== newW || canvas.height !== newH) {
        w = newW;
        h = newH;
        canvas.width = w;
        canvas.height = h;
        gl.viewport(0, 0, w, h);
        destroyFBO(gl, fboA);
        destroyFBO(gl, fboB);
        fboA = makeFBO(gl, w, h);
        fboB = makeFBO(gl, w, h);
      }
    };
    resize();
    window.addEventListener("resize", resize);

    /* --- Mouse ---------------------------------------------------- */
    let rawMX = 0.5, rawMY = 0.5;
    let smMX = 0.5, smMY = 0.5; // circle layer (momentum 0.995 capped from 1.0)
    const onMove = (e: MouseEvent) => {
      const r = canvas.getBoundingClientRect();
      rawMX = (e.clientX - r.left) / r.width;
      rawMY = (e.clientY - r.top) / r.height;
    };
    canvas.addEventListener("mousemove", onMove);

    /* --- Render pass helper --------------------------------------- */
    function pass(
      prog: WebGLProgram,
      inputTex: WebGLTexture,
      target: WebGLFramebuffer | null,
      time: number,
      mx: number,
      my: number,
    ) {
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, target);
      gl!.useProgram(prog);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, inputTex);
      gl!.uniform1i(gl!.getUniformLocation(prog, "uTexture"), 0);
      const uT = gl!.getUniformLocation(prog, "uTime");
      if (uT) gl!.uniform1f(uT, time);
      const uM = gl!.getUniformLocation(prog, "uMousePos");
      if (uM) gl!.uniform2f(uM, mx, my);
      const uR = gl!.getUniformLocation(prog, "uResolution");
      if (uR) gl!.uniform2f(uR, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
    }

    /* --- Animation loop ------------------------------------------- */
    let noiseFillTime = 0;  // speed=0.13
    let flowFieldTime = 0;  // speed=0.1
    let grainTime     = 0;  // speed=0.5
    let prev = performance.now();
    let raf  = 0;

    const frame = (now: number) => {
      const dt = Math.min((now - prev) / 1000, 0.1);
      prev = now;

      // Accumulate per-layer time (speed * 60 normalizes to frame-based time)
      noiseFillTime += dt * 0.13 * 60;
      flowFieldTime += dt * 0.1 * 60;
      grainTime     += dt * 0.5 * 60;

      // Smooth mouse for circle layer (momentum=1.0 capped to 0.995)
      const cLerp = 1 - Math.pow(0.995, dt * 60);
      smMX += (rawMX - smMX) * cLerp;
      smMY += (rawMY - smMY) * cLerp;

      resize();
      gl!.bindVertexArray(vao);

      // 0. Clear FBO A → black (replaces trivial all-black gradient layer)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.clearColor(0, 0, 0, 1);
      gl!.clear(gl!.COLOR_BUFFER_BIT);

      // 1. NoiseFill: FBO A → FBO B
      pass(pNoiseFill!, fboA.tex, fboB.fb, noiseFillTime, 0.5, 0.5);

      // 2. Circle: FBO B → FBO A (mouse-interactive)
      pass(pCircle!, fboB.tex, fboA.fb, 0, smMX, smMY);

      // 3. FlowField: FBO A → FBO B
      pass(pFlowField!, fboA.tex, fboB.fb, flowFieldTime, 0.5, 0.5);

      // 4. Grain: FBO B → screen
      pass(pGrain!, fboB.tex, null, grainTime, 0.5, 0.5);

      raf = requestAnimationFrame(frame);
    };
    raf = requestAnimationFrame(frame);

    /* --- Cleanup -------------------------------------------------- */
    return () => {
      cancelAnimationFrame(raf);
      canvas.removeEventListener("mousemove", onMove);
      window.removeEventListener("resize", resize);
      gl.deleteBuffer(vbo);
      gl.deleteVertexArray(vao);
      destroyFBO(gl, fboA);
      destroyFBO(gl, fboB);
      gl.deleteProgram(pNoiseFill);
      gl.deleteProgram(pCircle);
      gl.deleteProgram(pFlowField);
      gl.deleteProgram(pGrain);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        width: "100%",
        height: "100%",
        display: "block",
        background: "#000",
      }}
    />
  );
}
Flow I
