"use client";

import { useEffect, useRef } from "react";

/* ------------------------------------------------------------------ */
/*  GLSL sources                                                       */
/* ------------------------------------------------------------------ */

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

const MASK_TEXTURE_URL =
  "/background/aurora-square-msdf.png";

/** Pass 1 — adapted from the Unicorn aurora effect */
const AURORA_FRAG = /* glsl */ `#version 300 es
precision highp float;

in vec2 v_uv;
out vec4 fragColor;

uniform float u_time;
uniform float u_angle;
uniform float u_color_position;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

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

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);
}

vec3 pal(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
  return a + b * cos(TAU * (c * t + d));
}

vec3 tonemapReinhard(vec3 x) {
  x *= 4.0;
  return x / (1.0 + x);
}

float sdEllipse(vec2 st, float r) {
  float a = length(st + vec2(0.0, r * 0.8)) - r;
  float b = length(st + vec2(0.0, -r * 0.8)) - r;
  return a + b;
}

float getSdf(vec2 st) {
  return sdEllipse(st, 0.6020);
}

vec2 turb(vec2 pos, float t, float iter, float md, vec2 mousePos) {
  mat2 rot = mat2(0.6, -0.8, 0.8, 0.6);
  float freq = mix(2.0, 15.0, 0.0800);
  float amp = 0.5 * md;
  float xp = 1.4;
  float time = t * 0.1;

  for (float i = 0.0; i < 4.0; i++) {
    vec2 s = sin(freq * ((pos - mousePos) * rot) + i * time + iter);
    pos += amp * rot[0] * s / freq;
    rot *= mat2(0.6, -0.8, 0.8, 0.6);
    freq *= xp;
  }

  return pos;
}

void main() {
  vec2 uv = v_uv;
  float aspect = u_resolution.x / u_resolution.y;
  vec2 sceneAspect = vec2(aspect, 1.0);
  vec2 mousePos = mix(vec2(0.0), u_mouse - 0.5, 0.1900);
  vec2 pos = uv * sceneAspect - vec2(0.6190527508101805, 0.26407409845841157) * sceneAspect;

  float rotation = u_angle * -2.0 * PI;
  mat2 rotMatrix = mat2(cos(rotation), -sin(rotation), sin(rotation), cos(rotation));
  pos = rotMatrix * pos;

  vec3 pp = vec3(0.0);
  vec3 bloom = vec3(0.0);
  float t = u_time * 0.5;
  float md = 1.0;
  float bm = 0.05;
  float spacing = mix(1.0, TAU, 0.4600);
  float smoothing = 1.6500;

  vec2 prevPos = turb(pos, t, -1.0 / ITERATIONS, md, mousePos);

  for (float i = 1.0; i < ITERATIONS + 1.0; i++) {
    float iter = i / ITERATIONS;
    vec2 st = turb(pos, t, iter * spacing, md, mousePos);
    float d = abs(getSdf(st));
    float pd = distance(st, prevPos);
    prevPos = st;

    float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
    float ds = smoothstep(0.0, 0.4600 * bm + max(dynamicBlur * smoothing, 0.001), d);
    vec3 color = pal(
      iter * mix(0.1, 1.9, 0.6900) + u_color_position,
      vec3(0.5),
      vec3(0.5),
      vec3(1.0),
      vec3(0.56, 0.78, 0.0)
    );
    float invd = 1.0 / max(d + dynamicBlur, 0.001);
    pp += (ds - 1.0) * color;
    bloom += clamp(invd, 0.0, 250.0) * color;
  }

  pp *= 1.0 / ITERATIONS;
  bloom = bloom / (bloom + 2e4);

  vec3 color = -pp + bloom * 3.0 * 1.3900;
  color *= 1.2;
  color += (randFibo(gl_FragCoord.xy) - 0.5) / 255.0;
  color = tonemapReinhard(color);

  fragColor = vec4(color, 1.0);
}`;

/** Pass 2 — adapted from the Unicorn two-dimensional SDF glass effect */
const COMPOSITE_FRAG = /* glsl */ `#version 300 es
precision highp float;

in vec2 v_uv;
out vec4 fragColor;

uniform sampler2D u_scene;
uniform sampler2D u_mask;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

const float PI = 3.14159265359;

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

float screenPxRange(vec2 range) {
  vec2 unitRange = range / vec2(textureSize(u_mask, 0));
  vec2 screenTexSize = vec2(1.0) / fwidth(v_uv);
  return max(0.5 * dot(unitRange, screenTexSize), 1.0);
}

float sdCustom(vec2 uv) {
  ivec2 customTexSize = textureSize(u_mask, 0);
  float customTexAspect = float(customTexSize.x) / float(customTexSize.y);
  uv.x /= customTexAspect;
  uv += 0.5;
  vec4 sdColor = texture(u_mask, uv);
  float sd = sdColor.a;
  float screenPxDistance = screenPxRange(vec2(0.0833333)) * -(sd - 0.5);
  return screenPxDistance;
}

float getDist(vec2 uv) {
  float sd = sdCustom(uv);
  vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
  vec2 mousePos = u_mouse * aspect;
  float mouseDistance = length(v_uv * aspect - mousePos);
  float falloff = smoothstep(0.0, 0.8, mouseDistance);
  float md = mix(0.02 / falloff, 0.1 / falloff, -0.5 * sd);
  md = max(md * 0.0, 0.0);
  sd -= md;
  return sd;
}

vec4 refrakt(float sd, vec2 st, vec4 bg) {
  vec2 offset = mix(vec2(0.0), normalize(st) / sd, length(st));
  offset *= 3.0;

  vec4 refracted = vec4(0.0, 0.0, 0.0, 1.0);
  float rdisp = mix(0.01, 0.008, 0.9000);
  float gdisp = mix(0.01, 0.01, 0.9000);
  float bdisp = mix(0.01, 0.012, 0.9000);
  vec2 uv = (v_uv - 0.5) / mix(1.0, 4.0, 0.3000) + 0.5;

  refracted.r = texture(u_scene, uv + offset * 0.5 * rdisp).r;
  refracted.g = texture(u_scene, uv + offset * 0.5 * gdisp).g;
  refracted.b = texture(u_scene, uv + offset * 0.5 * bdisp).b;

  float opacity = smoothstep(0.0, 0.005, -sd);
  return mix(bg, refracted, opacity);
}

vec4 getEffect(vec2 st, vec4 bg) {
  float eps = 0.0005;
  float sd = getDist(st);
  vec4 r = refrakt(sd, st, bg);
  vec4 r1 = refrakt(getDist(st + vec2(eps, 0.0)), st + vec2(eps, 0.0), bg);
  vec4 r2 = refrakt(getDist(st - vec2(eps, 0.0)), st - vec2(eps, 0.0), bg);
  vec4 r3 = refrakt(getDist(st + vec2(0.0, eps)), st + vec2(0.0, eps), bg);
  vec4 r4 = refrakt(getDist(st - vec2(0.0, eps)), st - vec2(0.0, eps), bg);
  return (r + r1 + r2 + r3 + r4) * 0.2;
}

void main() {
  vec2 uv = v_uv;
  vec4 bg = texture(u_scene, uv);
  vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
  vec2 mousePos = mix(vec2(0.0), u_mouse - 0.5, 0.0);
  vec2 st = uv - (vec2(0.5, 0.5) + mousePos);
  st *= aspect;
  st *= 1.0 / (0.4200 + 0.2);
  st *= rot(0.0 * 2.0 * PI);
  fragColor = getEffect(st, bg);
}`;

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

function compileShader(gl: WebGL2RenderingContext, type: number, src: string): WebGLShader {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
    const log = gl.getShaderInfoLog(s);
    gl.deleteShader(s);
    throw new Error(`Shader compile error: ${log}`);
  }
  return s;
}

function linkProgram(gl: WebGL2RenderingContext, vs: WebGLShader, fs: WebGLShader): WebGLProgram {
  const p = gl.createProgram()!;
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.linkProgram(p);
  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
    const log = gl.getProgramInfoLog(p);
    gl.deleteProgram(p);
    throw new Error(`Program link error: ${log}`);
  }
  return p;
}

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

export default function AuroraGlass() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const mouseRef = useRef({ x: 0.5, y: 0.5 });
  const mouseSmooth = useRef({ x: 0.5, y: 0.5 });

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

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

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

    /* ---- compile programs ---- */
    const vert = compileShader(gl, gl.VERTEX_SHADER, VERT);
    const auroraProg = linkProgram(gl, vert, compileShader(gl, gl.FRAGMENT_SHADER, AURORA_FRAG));
    const compositeProg = linkProgram(gl, vert, compileShader(gl, gl.FRAGMENT_SHADER, COMPOSITE_FRAG));

    /* ---- aurora program uniforms ---- */
    const a_time = gl.getUniformLocation(auroraProg, "u_time");
    const a_angle = gl.getUniformLocation(auroraProg, "u_angle");
    const a_colorPos = gl.getUniformLocation(auroraProg, "u_color_position");
    const a_mouse = gl.getUniformLocation(auroraProg, "u_mouse");
    const a_res = gl.getUniformLocation(auroraProg, "u_resolution");

    /* ---- composite program uniforms ---- */
    const c_scene = gl.getUniformLocation(compositeProg, "u_scene");
    const c_mask = gl.getUniformLocation(compositeProg, "u_mask");
    const c_mouse = gl.getUniformLocation(compositeProg, "u_mouse");
    const c_res = gl.getUniformLocation(compositeProg, "u_resolution");

    /* ---- framebuffer for pass 1 ---- */
    const fbTex = gl.createTexture()!;
    const fb = gl.createFramebuffer()!;
    const maskTex = gl.createTexture()!;
    let fbW = 0;
    let fbH = 0;

    gl.bindTexture(gl.TEXTURE_2D, maskTex);
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      1,
      1,
      0,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      new Uint8Array([0, 0, 0, 255]),
    );
    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);

    let disposed = false;
    const maskImage = new Image();
    maskImage.crossOrigin = "anonymous";
    maskImage.onload = () => {
      if (disposed) return;
      gl.bindTexture(gl.TEXTURE_2D, maskTex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, maskImage);
      gl.generateMipmap(gl.TEXTURE_2D);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    };
    maskImage.src = MASK_TEXTURE_URL;

    function resizeFB(w: number, h: number) {
      if (w === fbW && h === fbH) return;
      fbW = w;
      fbH = h;
      gl.bindTexture(gl.TEXTURE_2D, fbTex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, 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);
      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fbTex, 0);
    }

    /* ---- resize handling ---- */
    function resize() {
      const dpr = Math.min(window.devicePixelRatio, 2);
      const w = Math.round(canvas!.clientWidth * dpr);
      const h = Math.round(canvas!.clientHeight * dpr);
      if (canvas!.width !== w || canvas!.height !== h) {
        canvas!.width = w;
        canvas!.height = h;
      }
      resizeFB(w, h);
    }

    const ro = new ResizeObserver(resize);
    ro.observe(canvas);
    resize();

    /* ---- mouse tracking ---- */
    function onMouseMove(e: MouseEvent) {
      const rect = canvas!.getBoundingClientRect();
      mouseRef.current.x = (e.clientX - rect.left) / rect.width;
      mouseRef.current.y = 1.0 - (e.clientY - rect.top) / rect.height;
    }
    function onMouseLeave() {
      mouseRef.current.x = 0.5;
      mouseRef.current.y = 0.5;
    }
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseleave", onMouseLeave);

    /* ---- render loop ---- */
    let raf = 0;
    const t0 = performance.now();

    function draw() {
      raf = requestAnimationFrame(draw);

      const t = (performance.now() - t0) * 0.001;
      const w = canvas!.width;
      const h = canvas!.height;

      // smooth mouse with lerp
      const lerpSpeed = 0.06;
      mouseSmooth.current.x += (mouseRef.current.x - mouseSmooth.current.x) * lerpSpeed;
      mouseSmooth.current.y += (mouseRef.current.y - mouseSmooth.current.y) * lerpSpeed;
      const mx = mouseSmooth.current.x;
      const my = mouseSmooth.current.y;

      gl.bindVertexArray(vao);

      /* pass 1: aurora → framebuffer */
      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
      gl.viewport(0, 0, w, h);
      gl.useProgram(auroraProg);
      gl.uniform1f(a_time, t);
      gl.uniform1f(a_angle, -0.1188);
      gl.uniform1f(a_colorPos, 0.43 + t * 0.2);
      gl.uniform2f(a_mouse, mx, my);
      gl.uniform2f(a_res, w, h);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

      /* pass 2: composite with glass → screen */
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      gl.viewport(0, 0, w, h);
      gl.useProgram(compositeProg);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, fbTex);
      gl.uniform1i(c_scene, 0);
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, maskTex);
      gl.uniform1i(c_mask, 1);
      gl.uniform2f(c_mouse, mx, my);
      gl.uniform2f(c_res, w, h);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    raf = requestAnimationFrame(draw);

    /* ---- cleanup ---- */
    return () => {
      disposed = true;
      cancelAnimationFrame(raf);
      canvas.removeEventListener("mousemove", onMouseMove);
      canvas.removeEventListener("mouseleave", onMouseLeave);
      ro.disconnect();
      gl.deleteProgram(auroraProg);
      gl.deleteProgram(compositeProg);
      gl.deleteBuffer(vbo);
      gl.deleteVertexArray(vao);
      gl.deleteTexture(maskTex);
      gl.deleteTexture(fbTex);
      gl.deleteFramebuffer(fb);
    };
  }, []);

  return (
    <div className="relative h-[560px] w-full overflow-hidden rounded-[20px] md:h-[590px]"
      style={{
        background: "#050507",
        boxShadow:
          "0 0 0 1px rgba(255,255,255,0.03), 0 18px 50px rgba(0,0,0,0.34)",
      }}
    >
      <canvas
        ref={canvasRef}
        className="h-full w-full"
        style={{ display: "block" }}
      />
    </div>
  );
}
Aurora Glass
