"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 — Image layer: planet earth composited onto background (normal blend) */
const FRAG_IMAGE_1 = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uSourceImage;
uniform vec2 uArtboardResolution;
uniform vec2 uMousePos;
uniform sampler2D uBgTexture;
const float TAU = 6.28318530718;
const float PI = 3.14159265359;
out vec4 fragColor;
vec2 rotate2D(vec2 p, float angle) {
  float s = sin(angle);
  float c = cos(angle);
  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);
}
vec2 getAnchorOffsets() {
  return vec2(0.5, 0.5);
}
vec4 sampleImage(vec2 canvasUV, vec2 mouseOffset, vec2 mouseRotOffset) {
  vec2 canvasPos = vec2(canvasUV.x * uArtboardResolution.x, (1.0 - canvasUV.y) * uArtboardResolution.y);
  vec2 imageUV;
  float absWidth = 1.2700 * uArtboardResolution.x;
  float absHeight = 1.2700 * uArtboardResolution.y;
  absWidth = absWidth;
  absHeight = (0 != 2 && 2 == 2) ? absWidth / 1.6000 : absHeight;
  vec2 elementSizePx = vec2(absWidth, absHeight);
  vec2 elementPosPx = vec2(0.5000, 0.5900) * uArtboardResolution - getAnchorOffsets() * elementSizePx;
  vec2 centerPos = elementPosPx + (elementSizePx * 0.5);
  vec2 relPos = canvasPos - centerPos + mouseOffset;
  vec2 unrotatedRelPos = rotate2D(relPos, 0.0000 * -TAU);
  vec2 elementPos = unrotatedRelPos + (elementSizePx * 0.5);
  imageUV = elementPos / elementSizePx;
  vec2 flippedUV = vec2(imageUV.x, 1.0 - imageUV.y);
  vec4 color = textureLod(uSourceImage, flippedUV, 0.0);
  if (imageUV.x >= 0.0 && imageUV.x <= 1.0 && imageUV.y >= 0.0 && imageUV.y <= 1.0) {
    return color;
  } else {
    return vec4(0.0);
  }
}
vec4 getNormalOutput(vec4 color, vec4 background) {
  return mix(background, color + background * (1.0 - color.a), 1.0000);
}
vec4 getOutputByMode(vec4 color, vec4 background) {
  return getNormalOutput(color, background);
}
vec4 applyImageAdjustments(vec4 color) {
  float luminance = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  color.rgb = mix(vec3(luminance), color.rgb, 1.2500);
  vec3 contrasted = 1.0600 * (color.rgb - 0.5) + 0.5;
  color.rgb = mix(color.rgb, contrasted, color.a);
  color.rgb = clamp(color.rgb, 0.0, 1.0);
  color.rgb *= color.a;
  return color;
}
vec4 getCompositeOutput(vec2 uv, vec2 mouseOffsetPx, vec2 mouseRotOffset) {
  vec4 background = vec4(0);
  background = texture(uBgTexture, vTextureCoord);
  vec4 color = sampleImage(uv, mouseOffsetPx, mouseRotOffset);
  color = applyImageAdjustments(color);
  return getOutputByMode(color, background);
}
void main() {
  vec2 uv = vTextureCoord;
  vec2 mouseOffsetUV = (uMousePos - 0.5) * 0.0000;
  vec2 mouseOffsetPx = mouseOffsetUV;
  vec2 mouseRotOffset = (uMousePos - 0.5) * 0.0000 * PI * 0.5;
  uv -= mouseOffsetUV;
  fragColor = getCompositeOutput(uv, mouseOffsetPx, mouseRotOffset);
}`;

/** Pass 2 — Voronoi noise distortion (animated) */
const FRAG_NOISE = /* 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;
float ease(int easingFunc, float t) {
  return t;
}
out vec4 fragColor;
const float PI = 3.14159265359;
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, vec2 textureCoord, float direction, float time, float phase) {
  float u = 1.;
  float v = 1.;
  uv *= vec2(direction, 1.0 - direction);
  uv *= 2.91;
  vec2 x = uv;
  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(time * 0.1 + phase + o.x * 6.28));
      vec2 r = g - f + o.xy;
      float dd = dot(r, r);
      float ww = pow(1.0 - smoothstep(0.0, 1.414, sqrt(dd)), k);
      va += o.z * ww;
      wt += ww;
    }
  return va / wt;
}
vec2 getVoronoiNoise(vec2 uv, vec2 textureCoord, float direction, float time, float phase, float turbulence) {
  vec2 offset = vec2(
    voronoise(uv, textureCoord, direction, time, phase),
    voronoise(uv + vec2(9.2, 1.2), textureCoord, direction, time, phase)
  );
  return mix(textureCoord, offset, turbulence);
}
vec2 getNoiseOffset(vec2 uv, vec2 textureCoord, float direction, float phase, float time, float turbulence) {
  return getVoronoiNoise(uv, textureCoord, direction, time, phase, turbulence);
}
vec2 distortUV(vec2 uv) {
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 mPos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos - 0.5), 0.0000);
  float dist = ease(0, max(0., 1. - distance(uv * vec2(aspectRatio, 1), mPos * vec2(aspectRatio, 1)) * 4. * (1. - 1.0000)));
  if (dist <= 0.001) {
    return uv;
  }
  if (0.1800 <= 0.001) {
    return uv;
  }
  vec2 pos = mix(vec2(0.5, 0.5), mPos, floor(1.0000));
  vec2 drift = vec2(0, 0.6300 * uTime * 0.0125);
  pos += drift * rot(0.0000 * -2. * PI);
  vec2 st = (uv - pos) * vec2(aspectRatio, 1);
  st *= 12. * 0.7400;
  st = rot(0.0000 * -2. * PI) * st;
  vec2 noise = getNoiseOffset(st, uv, 0.5000, 0.0000, uTime, 0.1800);
  return mix(uv, noise, dist);
}
void main() {
  vec2 uv = vTextureCoord;
  uv = distortUV(uv);
  vec4 color = texture(uTexture, uv);
  fragColor = color;
}`;

/** Pass 3 — Pixelate effect */
const FRAG_PIXELATE = /* glsl */ `#version 300 es
precision mediump float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uMousePos;
uniform vec2 uResolution;
out vec4 fragColor;
void main() {
  vec2 uv = vTextureCoord;
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 pos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos - 0.5), 0.0000);
  float gridSize = (0.2200 + 0.01) * 0.083;
  float baseGrid = 1.0 / gridSize;
  vec2 cellSize = vec2(1.0 / (baseGrid * aspectRatio), 1.0 / baseGrid) * mix(aspectRatio, 1. / aspectRatio, 0.5);
  vec2 offsetUv = uv - pos;
  vec2 cell = floor(offsetUv / cellSize);
  vec2 cellCenter = (cell + 0.5) * cellSize;
  vec2 pixelatedCoord = cellCenter + pos;
  vec2 relativePos = mod(offsetUv, cellSize) / cellSize - 0.5;
  float dist = length(relativePos);
  float x = mix(uv.x, pixelatedCoord.x, vec2(1, 1).x);
  float y = mix(uv.y, pixelatedCoord.y, vec2(1, 1).y);
  vec4 color = texture(uTexture, vec2(x, y));
  float edgeSmoothing = 0.02;
  float alpha = 1.0 - smoothstep(1.0000 - edgeSmoothing, 1.0000, dist);
  if (1 == 1) {
    color.rgb = mix(vec3(0, 0, 0), color.rgb, alpha);
  } else {
    color.a *= alpha;
  }
  color *= color.a;
  fragColor = color;
}`;

/** Pass 4 — Image layer: same planet earth with COLOR_DODGE blend onto scene */
const FRAG_IMAGE_DODGE = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uSourceImage;
uniform vec2 uArtboardResolution;
uniform vec2 uMousePos;
uniform sampler2D uBgTexture;
const float TAU = 6.28318530718;
const float PI = 3.14159265359;
out vec4 fragColor;
vec2 rotate2D(vec2 p, float angle) {
  float s = sin(angle);
  float c = cos(angle);
  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);
}
vec2 getAnchorOffsets() {
  return vec2(0.5, 0.5);
}
vec4 sampleImage(vec2 canvasUV, vec2 mouseOffset, vec2 mouseRotOffset) {
  vec2 canvasPos = vec2(canvasUV.x * uArtboardResolution.x, (1.0 - canvasUV.y) * uArtboardResolution.y);
  vec2 imageUV;
  float absWidth = 1.2500 * uArtboardResolution.x;
  float absHeight = 1.2500 * uArtboardResolution.y;
  absWidth = absWidth;
  absHeight = (0 != 2 && 2 == 2) ? absWidth / 1.6000 : absHeight;
  vec2 elementSizePx = vec2(absWidth, absHeight);
  vec2 elementPosPx = vec2(0.5000, 0.4133) * uArtboardResolution - getAnchorOffsets() * elementSizePx;
  vec2 centerPos = elementPosPx + (elementSizePx * 0.5);
  vec2 relPos = canvasPos - centerPos + mouseOffset;
  vec2 unrotatedRelPos = rotate2D(relPos, 0.0000 * -TAU);
  vec2 elementPos = unrotatedRelPos + (elementSizePx * 0.5);
  imageUV = elementPos / elementSizePx;
  vec2 flippedUV = vec2(imageUV.x, 1.0 - imageUV.y);
  vec4 color = textureLod(uSourceImage, flippedUV, 0.0);
  if (imageUV.x >= 0.0 && imageUV.x <= 1.0 && imageUV.y >= 0.0 && imageUV.y <= 1.0) {
    return color;
  } else {
    return vec4(0.0);
  }
}
vec4 applyImageAdjustments(vec4 color) {
  vec3 exposureColor = clamp(color.rgb + 0.1500, 0.0, 1.0);
  color.rgb = mix(color.rgb, exposureColor, color.a);
  float luminance = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  color.rgb = mix(vec3(luminance), color.rgb, 1.0500);
  vec3 contrasted = 2.0000 * (color.rgb - 0.5) + 0.5;
  color.rgb = mix(color.rgb, contrasted, color.a);
  color.rgb = clamp(color.rgb, 0.0, 1.0);
  color.rgb *= color.a;
  return color;
}
vec4 getSourceOutput(vec2 uv, vec2 mouseOffsetPx, vec2 mouseRotOffset) {
  vec4 color = sampleImage(uv, mouseOffsetPx, mouseRotOffset);
  return applyImageAdjustments(color);
}
void main() {
  vec2 uv = vTextureCoord;
  vec2 mouseOffsetUV = (uMousePos - 0.5) * 0.0000;
  vec2 mouseOffsetPx = mouseOffsetUV;
  vec2 mouseRotOffset = (uMousePos - 0.5) * 0.0000 * PI * 0.5;
  uv -= mouseOffsetUV;
  vec4 fg = getSourceOutput(uv, mouseOffsetPx, mouseRotOffset);
  vec4 bg = texture(uBgTexture, vTextureCoord);
  // COLOR_DODGE: base / (1 - blend)
  vec3 dodged = bg.rgb / max(1.0 - fg.rgb, vec3(0.004));
  dodged = clamp(dodged, 0.0, 1.0);
  vec3 result = mix(bg.rgb, dodged, fg.a);
  fragColor = vec4(result, max(bg.a, fg.a));
}`;

/** Pass 5a — Bloom: horizontal blur with luminance threshold */
const FRAG_BLOOM_H = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;
out vec4 fragColor;
const float PI = 3.14159265359;
const float TAU = 6.28318530718;
float luma(vec4 color) {
  return dot(color.rgb, vec3(0.299, 0.587, 0.114));
}
float getGaussianWeight(int index) {
  switch(index) {
    case 0: return 1.000000;
    case 1: return 0.687719;
    case 2: return 0.497017;
    case 3: return 0.369784;
    case 4: return 0.279890;
    case 5: return 0.213571;
    case 6: return 0.163045;
    case 7: return 0.123612;
    case 8: return 0.092212;
    case 9: return 0.066840;
    case 10: return 0.046045;
    case 11: return 0.000000;
    default: return 0.0;
  }
}
vec4 thresholdPass(vec4 color) {
  color.rgb = pow(color.rgb, vec3(1.0 / 2.2));
  color.rgb = 1.2 * (color.rgb - 0.5) + 0.5;
  vec4 bloom = color * smoothstep(0.5600 - 0.1, 0.5600, luma(color));
  return vec4(bloom.rgb, color.a);
}
vec4 blur(vec2 uv, bool vertical, float radius, bool diamond, bool threshold) {
  vec4 color = vec4(0.0);
  float total_weight = 0.0;
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 dir;
  if (diamond) {
    dir = vertical ? vec2(1, 1) : vec2(1, -1);
  } else {
    dir = vertical ? vec2(0, 1) : vec2(1, 0);
  }
  dir.x /= aspectRatio;
  vec4 center = texture(uTexture, uv);
  if (threshold) center = thresholdPass(center);
  float center_weight = getGaussianWeight(0);
  color += center * center_weight;
  total_weight += center_weight;
  radius *= (0.2 + 0.4600) * 1.8;
  for (int i = 1; i <= 12; i++) {
    float weight = getGaussianWeight(i);
    float step = float(i) / 12.;
    float offset = mix(0.015, 0.025, radius) * step;
    vec4 sample1 = texture(uTexture, uv + offset * dir);
    vec4 sample2 = texture(uTexture, uv - offset * dir);
    if (threshold) {
      sample1 = thresholdPass(sample1);
      sample2 = thresholdPass(sample2);
    }
    color += (sample1 + sample2) * weight;
    total_weight += 2.0 * weight;
  }
  return color / total_weight;
}
vec4 blurPass(vec2 uv, bool vertical, float radius, bool diamond, bool threshold) {
  return blur(uv, vertical, radius, diamond, threshold);
}
vec4 getColor(vec4 color) {
  return blurPass(vTextureCoord, false, 7.5, false, true);
}
void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  color = getColor(color);
  fragColor = color;
}`;

/** Pass 5b — Bloom: vertical blur */
const FRAG_BLOOM_V = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;
out vec4 fragColor;
const float PI = 3.14159265359;
const float TAU = 6.28318530718;
float luma(vec4 color) {
  return dot(color.rgb, vec3(0.299, 0.587, 0.114));
}
float getGaussianWeight(int index) {
  switch(index) {
    case 0: return 1.000000;
    case 1: return 0.687719;
    case 2: return 0.497017;
    case 3: return 0.369784;
    case 4: return 0.279890;
    case 5: return 0.213571;
    case 6: return 0.163045;
    case 7: return 0.123612;
    case 8: return 0.092212;
    case 9: return 0.066840;
    case 10: return 0.046045;
    case 11: return 0.000000;
    default: return 0.0;
  }
}
vec4 thresholdPass(vec4 color) {
  color.rgb = pow(color.rgb, vec3(1.0 / 2.2));
  color.rgb = 1.2 * (color.rgb - 0.5) + 0.5;
  vec4 bloom = color * smoothstep(0.5600 - 0.1, 0.5600, luma(color));
  return vec4(bloom.rgb, color.a);
}
vec4 blur(vec2 uv, bool vertical, float radius, bool diamond, bool threshold) {
  vec4 color = vec4(0.0);
  float total_weight = 0.0;
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 dir;
  if (diamond) {
    dir = vertical ? vec2(1, 1) : vec2(1, -1);
  } else {
    dir = vertical ? vec2(0, 1) : vec2(1, 0);
  }
  dir.x /= aspectRatio;
  vec4 center = texture(uTexture, uv);
  if (threshold) center = thresholdPass(center);
  float center_weight = getGaussianWeight(0);
  color += center * center_weight;
  total_weight += center_weight;
  radius *= (0.2 + 0.4600) * 1.8;
  for (int i = 1; i <= 12; i++) {
    float weight = getGaussianWeight(i);
    float step = float(i) / 12.;
    float offset = mix(0.015, 0.025, radius) * step;
    vec4 sample1 = texture(uTexture, uv + offset * dir);
    vec4 sample2 = texture(uTexture, uv - offset * dir);
    if (threshold) {
      sample1 = thresholdPass(sample1);
      sample2 = thresholdPass(sample2);
    }
    color += (sample1 + sample2) * weight;
    total_weight += 2.0 * weight;
  }
  return color / total_weight;
}
vec4 blurPass(vec2 uv, bool vertical, float radius, bool diamond, bool threshold) {
  return blur(uv, vertical, radius, diamond, threshold);
}
vec4 getColor(vec4 color) {
  return blurPass(vTextureCoord, true, 7.5, false, false);
}
void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  color = getColor(color);
  fragColor = color;
}`;

/** Pass 5c — Bloom: final composite (blurred bloom + original scene) */
const FRAG_BLOOM_FINAL = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uBgTexture;
out vec4 fragColor;
const float PI = 3.14159265359;
const float TAU = 6.28318530718;
float interleavedGradientNoise(vec2 st) {
  return fract(52.9829189 * fract(dot(st, vec2(0.06711056, 0.00583715))));
}
vec4 finalPass(vec4 bloomColor) {
  float nx = interleavedGradientNoise(gl_FragCoord.xy) - 0.5;
  vec2 jitter = vec2(nx) * 0.02 * (0.4600 + 0.1);
  bloomColor = texture(uTexture, vTextureCoord + jitter);
  bloomColor.rgb *= vec3(1, 0.9450980392156862, 0.7411764705882353);
  vec4 sceneColor = texture(uBgTexture, vTextureCoord);
  vec4 finalColor = mix(sceneColor, sceneColor + bloomColor, 0.2700 * 3.5);
  return finalColor;
}
vec4 getColor(vec4 color) {
  return finalPass(color);
}
void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  color = getColor(color);
  fragColor = color;
}`;

/** Pass 6a — Mouse trail: distorts scene based on mouse trail buffer */
const FRAG_MOUSE_DISTORT = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uTexture;
uniform sampler2D uPingPongTexture;
uniform vec2 uResolution;
const float PI = 3.14159265359;
const float ITERATIONS = 24.0;
out vec4 fragColor;
vec3 rgb2hsv(vec3 c) {
  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
  float d = q.x - min(q.w, q.y);
  float e = 1.0e-10;
  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 chromatic_aberration(vec3 color, vec2 uv, vec2 offset) {
  return color;
  vec4 left = texture(uTexture, uv - offset);
  vec4 right = texture(uTexture, uv + offset);
  color.r = left.r;
  color.b = right.b;
  return color;
}
vec2 angleToDir(float angle) {
  float rad = angle * 2.0 * PI;
  return vec2(cos(rad), sin(rad));
}
vec4 defaultTrail(vec2 uv, vec2 mouseDir) {
  vec4 color = vec4(0);
  vec2 distorted = mouseDir * 0.4;
  uv -= distorted;
  color = texture(uTexture, uv);
  color.rgb = chromatic_aberration(color.rgb, uv, distorted * 0.0000 * 0.12);
  return color;
}
vec4 getTrailColor(vec2 uv, vec2 mouseDir, float strength, float aspectRatio) {
  vec4 color = vec4(0);
  return defaultTrail(uv, mouseDir);
}
void main() {
  vec2 uv = vTextureCoord;
  vec2 pingpongUv = uv;
  float aspectRatio = uResolution.x / uResolution.y;
  vec3 mouseRgb = texture(uPingPongTexture, pingpongUv).rgb;
  vec3 mouseTrail = rgb2hsv(mouseRgb);
  float angle = mouseTrail.x;
  float strength = mouseTrail.z * (0.5700 * 1.5);
  vec2 direction = angleToDir(angle);
  vec2 mouseDir = direction * strength;
  vec4 color = getTrailColor(uv, mouseDir, abs(strength), aspectRatio);
  fragColor = color;
}`;

/** Pass 6b — Mouse trail update: accumulates mouse path into ping-pong buffer */
const FRAG_MOUSE_TRAIL = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uPingPongTexture;
uniform vec2 uPreviousMousePos;
uniform vec2 uMousePos;
uniform vec2 uResolution;
const float PI = 3.14159265359;
const float TAU = 6.28318530718;
out vec4 fragColor;
vec3 hsv2rgb(vec3 c) {
  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
  float aspectRatio = uResolution.x / uResolution.y;
  vec2 aspectVec = vec2(aspectRatio, 1.0);
  vec2 uv = vTextureCoord;
  vec2 correctedUv = uv * aspectVec;
  vec2 dir = (uMousePos - uPreviousMousePos) * aspectVec;
  float dist = length(dir);
  if (dist > 0.0) {
    dir = dir / dist;
  } else {
    dir = vec2(1.0, 0.0);
  }
  float rad = 0.1400 * 0.4 * mix(aspectRatio, 1.0, 0.5);
  float angle = atan(dir.y, dir.x);
  if (angle < 0.0) angle += TAU;
  vec3 lastFrameColor = vec3(0);
  float t = dist > 0.0 ? clamp(dot(correctedUv - uPreviousMousePos * aspectVec, dir) / dist, 0.0, 1.0) : 0.0;
  vec2 closestPoint = mix(uPreviousMousePos, uMousePos, t) * aspectVec;
  float distanceToLine = distance(correctedUv, closestPoint);
  float shrink = mix(0.5, 1.0, clamp(dist * 20.0, 0.0, 1.0));
  rad *= shrink;
  float s = 1.0 - smoothstep(rad * 0.0000, rad, distanceToLine);
  s = s * s;
  vec3 color = vec3(angle / TAU, 1.0, 1.0);
  vec3 mouseColor = hsv2rgb(color);
  vec2 sampleUv = mix(uv, uv / (1.0 + 0.3700 * 0.03) + 0.3700 * 0.015, 0.3700);
  float blurRadius = 0.003;
  lastFrameColor = texture(uPingPongTexture, sampleUv).rgb * 0.4;
  lastFrameColor += texture(uPingPongTexture, sampleUv + vec2(blurRadius, 0.0)).rgb * 0.15;
  lastFrameColor += texture(uPingPongTexture, sampleUv + vec2(-blurRadius, 0.0)).rgb * 0.15;
  lastFrameColor += texture(uPingPongTexture, sampleUv + vec2(0.0, blurRadius)).rgb * 0.15;
  lastFrameColor += texture(uPingPongTexture, sampleUv + vec2(0.0, -blurRadius)).rgb * 0.15;
  lastFrameColor = pow(lastFrameColor, vec3(2.2));
  mouseColor = pow(mouseColor, vec3(2.2));
  lastFrameColor *= pow(0.6700, 0.2);
  float clampedDist = clamp(min(1.0, dist * 10.0) * s, 0.0, 1.0);
  vec3 draw = mix(lastFrameColor, mouseColor, clampedDist);
  draw = pow(draw, vec3(1.0 / 2.2));
  if (max(draw.r, max(draw.g, draw.b)) < 0.001) {
    draw = vec3(0.0);
  }
  fragColor = vec4(draw, 1.0);
}`;

/* ------------------------------------------------------------------ */
/*  Image URL                                                          */
/* ------------------------------------------------------------------ */

const IMAGE_URL =
  "https://assets.unicorn.studio/images/jJpRdn5u4uXnmfUbdzJjMvkPD192/remix_the_top_half_of_planet_earth_in_the_bottom_center_of_the_view_its_80_covered_in_darkness_with_city__v2dijkg4e8i5u4cc8aic_1%20(1).jpeg";

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

function compileShader(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 compile error:", gl.getShaderInfoLog(s));
    gl.deleteShader(s);
    return null;
  }
  return s;
}

function linkProgram(gl: WebGL2RenderingContext, vert: string, frag: string) {
  const p = gl.createProgram()!;
  const vs = compileShader(gl, gl.VERTEX_SHADER, vert);
  const fs = compileShader(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("Program 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 PixelShockI() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

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

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

    gl.getExtension("EXT_color_buffer_float");

    /* ---- fullscreen quad ---- */
    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,
    );
    const vao = gl.createVertexArray()!;
    gl.bindVertexArray(vao);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    /* ---- compile all programs ---- */
    const progImage1 = linkProgram(gl, VERT, FRAG_IMAGE_1);
    const progNoise = linkProgram(gl, VERT, FRAG_NOISE);
    const progPixelate = linkProgram(gl, VERT, FRAG_PIXELATE);
    const progImageDodge = linkProgram(gl, VERT, FRAG_IMAGE_DODGE);
    const progBloomH = linkProgram(gl, VERT, FRAG_BLOOM_H);
    const progBloomV = linkProgram(gl, VERT, FRAG_BLOOM_V);
    const progBloomFinal = linkProgram(gl, VERT, FRAG_BLOOM_FINAL);
    const progMouseDistort = linkProgram(gl, VERT, FRAG_MOUSE_DISTORT);
    const progMouseTrail = linkProgram(gl, VERT, FRAG_MOUSE_TRAIL);

    const programs = [
      progImage1,
      progNoise,
      progPixelate,
      progImageDodge,
      progBloomH,
      progBloomV,
      progBloomFinal,
      progMouseDistort,
      progMouseTrail,
    ];
    if (programs.some((p) => !p)) {
      console.error("Failed to compile one or more programs");
      return;
    }

    /* ---- canvas sizing ---- */
    const dpr = Math.min(window.devicePixelRatio, 1.5);
    let w = 0,
      h = 0;
    let fboA = makeFBO(gl, 1, 1);
    let fboB = makeFBO(gl, 1, 1);
    let fboC = makeFBO(gl, 1, 1);
    let mouseFboA = makeFBO(gl, 1, 1);
    let mouseFboB = makeFBO(gl, 1, 1);

    const resize = () => {
      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);
        destroyFBO(gl, fboC);
        destroyFBO(gl, mouseFboA);
        destroyFBO(gl, mouseFboB);
        fboA = makeFBO(gl, w, h);
        fboB = makeFBO(gl, w, h);
        fboC = makeFBO(gl, w, h);
        mouseFboA = makeFBO(gl, w, h);
        mouseFboB = makeFBO(gl, w, h);
      }
    };
    resize();
    window.addEventListener("resize", resize);

    /* ---- image texture ---- */
    let imgTex: WebGLTexture | null = null;
    let imageReady = false;
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      imgTex = gl.createTexture()!;
      gl.bindTexture(gl.TEXTURE_2D, imgTex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
      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);
      imageReady = true;
    };
    img.src = IMAGE_URL;

    /* ---- mouse tracking ---- */
    let rawMX = 0.5,
      rawMY = 0.5;
    let prevMX = 0.5,
      prevMY = 0.5;
    let smMX = 0.5,
      smMY = 0.5;

    const onMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect();
      rawMX = (e.clientX - rect.left) / rect.width;
      rawMY = 1 - (e.clientY - rect.top) / rect.height;
    };
    canvas.addEventListener("mousemove", onMove);

    /* ---- animation state ---- */
    let noiseTime = 0;
    let prevTime = performance.now();
    let raf = 0;

    /* ---- render helpers ---- */
    function setUniforms(
      prog: WebGLProgram,
      uniforms: Record<string, number | [number, number]>,
    ) {
      for (const [name, val] of Object.entries(uniforms)) {
        const loc = gl!.getUniformLocation(prog, name);
        if (!loc) continue;
        if (Array.isArray(val)) {
          gl!.uniform2f(loc, val[0], val[1]);
        } else {
          gl!.uniform1f(loc, val);
        }
      }
    }

    function bindTex(unit: number, tex: WebGLTexture, prog: WebGLProgram, name: string) {
      gl!.activeTexture(gl!.TEXTURE0 + unit);
      gl!.bindTexture(gl!.TEXTURE_2D, tex);
      gl!.uniform1i(gl!.getUniformLocation(prog, name), unit);
    }

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

      if (!imageReady || !imgTex) {
        raf = requestAnimationFrame(frame);
        return;
      }

      // Accumulate time for noise layer (speed=0.25)
      noiseTime += dt * 0.25 * 60;

      // Smooth mouse for mouse trail (momentum=0.65)
      const mouseLerp = 1 - Math.pow(0.65, dt * 60);
      smMX += (rawMX - smMX) * mouseLerp;
      smMY += (rawMY - smMY) * mouseLerp;

      gl!.bindVertexArray(vao);

      /* ---- Pass 0: Clear fboA to gray (layer 0 gradient replacement) ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.clearColor(0.933, 0.933, 0.933, 1);
      gl!.clear(gl!.COLOR_BUFFER_BIT);

      /* ---- Pass 1: Image layer 1 (normal blend onto gray bg) → fboB ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(progImage1!);
      bindTex(0, fboA.tex, progImage1!, "uBgTexture");
      bindTex(1, imgTex, progImage1!, "uSourceImage");
      setUniforms(progImage1!, {
        uArtboardResolution: [w, h],
        uMousePos: [0.5, 0.5],
      });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 2: Noise distortion → fboA ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.useProgram(progNoise!);
      bindTex(0, fboB.tex, progNoise!, "uTexture");
      setUniforms(progNoise!, {
        uTime: noiseTime,
        uMousePos: [0.5, 0.5],
        uResolution: [w, h],
      });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 3: Pixelate → fboB ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(progPixelate!);
      bindTex(0, fboA.tex, progPixelate!, "uTexture");
      setUniforms(progPixelate!, {
        uMousePos: [0.5, 0.5],
        uResolution: [w, h],
      });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 4: Image layer 4 + COLOR_DODGE → fboA ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.useProgram(progImageDodge!);
      bindTex(0, fboB.tex, progImageDodge!, "uBgTexture");
      bindTex(1, imgTex, progImageDodge!, "uSourceImage");
      setUniforms(progImageDodge!, {
        uArtboardResolution: [w, h],
        uMousePos: [0.5, 0.5],
      });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 5a: Bloom horizontal blur → fboB (fboA preserved as preBloom) ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(progBloomH!);
      bindTex(0, fboA.tex, progBloomH!, "uTexture");
      setUniforms(progBloomH!, { uResolution: [w, h] });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 5b: Bloom vertical blur → fboC ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboC.fb);
      gl!.useProgram(progBloomV!);
      bindTex(0, fboB.tex, progBloomV!, "uTexture");
      setUniforms(progBloomV!, { uResolution: [w, h] });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 5c: Bloom final composite → fboB ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(progBloomFinal!);
      bindTex(0, fboC.tex, progBloomFinal!, "uTexture");
      bindTex(1, fboA.tex, progBloomFinal!, "uBgTexture");
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      /* ---- Pass 6a: Mouse trail update → mouseFboB ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, mouseFboB.fb);
      gl!.useProgram(progMouseTrail!);
      bindTex(0, mouseFboA.tex, progMouseTrail!, "uPingPongTexture");
      setUniforms(progMouseTrail!, {
        uMousePos: [smMX, smMY],
        uPreviousMousePos: [prevMX, prevMY],
        uResolution: [w, h],
      });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
      // Swap mouse FBOs
      const tmpMouse = mouseFboA;
      mouseFboA = mouseFboB;
      mouseFboB = tmpMouse;

      /* ---- Pass 6b: Mouse distortion → screen ---- */
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
      gl!.viewport(0, 0, w, h);
      gl!.useProgram(progMouseDistort!);
      bindTex(0, fboB.tex, progMouseDistort!, "uTexture");
      bindTex(1, mouseFboA.tex, progMouseDistort!, "uPingPongTexture");
      setUniforms(progMouseDistort!, { uResolution: [w, h] });
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // Save previous mouse position for next frame
      prevMX = smMX;
      prevMY = smMY;

      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);
      destroyFBO(gl, fboC);
      destroyFBO(gl, mouseFboA);
      destroyFBO(gl, mouseFboB);
      if (imgTex) gl.deleteTexture(imgTex);
      for (const p of programs) {
        if (p) gl.deleteProgram(p);
      }
    };
  }, []);

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