(() => {
  const vertexShaderSource = `#version 300 es
    in vec2 a_position;
    out vec2 v_position;

    void main() {
      v_position = a_position;
      gl_Position = vec4(a_position, 0.0, 1.0);
    }
  `;

  const fragmentShaderSource = `#version 300 es
    precision highp float;

    uniform vec2 u_viewportSize;
    uniform vec3 u_color1;
    uniform vec3 u_color2;
    uniform vec3 u_color3;
    uniform vec3 u_color4;
    uniform float u_colorSize;
    uniform float u_colorSpacing;
    uniform float u_colorRotation;
    uniform float u_colorSpread;
    uniform vec2 u_colorOffset;
    uniform float u_displacement;
    uniform float u_zoom;
    uniform float u_spacing;
    uniform float u_seed;
    uniform vec2 u_transformPosition;
    uniform float u_time;

    in vec2 v_position;
    out vec4 outColor;

    vec4 permute(vec4 x) {
      return mod(((x * 34.0) + 1.0) * x, 289.0);
    }

    vec4 taylorInvSqrt(vec4 r) {
      return 1.79284291400159 - 0.85373472095314 * r;
    }

    float snoise(vec3 v) {
      const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
      const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

      vec3 i = floor(v + dot(v, C.yyy));
      vec3 x0 = v - i + dot(i, C.xxx);

      vec3 g = step(x0.yzx, x0.xyz);
      vec3 l = 1.0 - g;
      vec3 i1 = min(g.xyz, l.zxy);
      vec3 i2 = max(g.xyz, l.zxy);

      vec3 x1 = x0 - i1 + C.xxx;
      vec3 x2 = x0 - i2 + C.yyy;
      vec3 x3 = x0 - D.yyy;

      i = mod(i, 289.0);
      vec4 p = permute(permute(permute(
        i.z + vec4(0.0, i1.z, i2.z, 1.0))
        + i.y + vec4(0.0, i1.y, i2.y, 1.0))
        + i.x + vec4(0.0, i1.x, i2.x, 1.0));

      float n_ = 0.142857142857;
      vec3 ns = n_ * D.wyz - D.xzx;

      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
      vec4 x_ = floor(j * ns.z);
      vec4 y_ = floor(j - 7.0 * x_);

      vec4 x = x_ * ns.x + ns.yyyy;
      vec4 y = y_ * ns.x + ns.yyyy;
      vec4 h = 1.0 - abs(x) - abs(y);

      vec4 b0 = vec4(x.xy, y.xy);
      vec4 b1 = vec4(x.zw, y.zw);

      vec4 s0 = floor(b0) * 2.0 + 1.0;
      vec4 s1 = floor(b1) * 2.0 + 1.0;
      vec4 sh = -step(h, vec4(0.0));

      vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
      vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;

      vec3 p0 = vec3(a0.xy, h.x);
      vec3 p1 = vec3(a0.zw, h.y);
      vec3 p2 = vec3(a1.xy, h.z);
      vec3 p3 = vec3(a1.zw, h.w);

      vec4 norm = taylorInvSqrt(vec4(
        dot(p0, p0),
        dot(p1, p1),
        dot(p2, p2),
        dot(p3, p3)
      ));
      p0 *= norm.x;
      p1 *= norm.y;
      p2 *= norm.z;
      p3 *= norm.w;

      vec4 m = max(0.6 - vec4(
        dot(x0, x0),
        dot(x1, x1),
        dot(x2, x2),
        dot(x3, x3)
      ), 0.0);
      m = m * m;
      return 42.0 * dot(m * m, vec4(
        dot(p0, x0),
        dot(p1, x1),
        dot(p2, x2),
        dot(p3, x3)
      ));
    }

    vec3 noiseDerivatives(vec3 p) {
      float e = 0.035;
      float n = snoise(p);
      float dx = snoise(p + vec3(e, 0.0, 0.0)) - n;
      float dy = snoise(p + vec3(0.0, e, 0.0)) - n;
      float dz = snoise(p + vec3(0.0, 0.0, e)) - n;
      return vec3(dx, dy, dz) / e;
    }

    float grain(vec2 p) {
      return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
    }

    mat2 rotate2d(float angle) {
      float s = sin(angle);
      float c = cos(angle);
      return mat2(c, -s, s, c);
    }

    void main() {
      vec2 position = v_position;
      position.x *= min(1.0, u_viewportSize.x / u_viewportSize.y);
      position.y *= min(1.0, u_viewportSize.y / u_viewportSize.x);
      position /= u_zoom;
      position += u_transformPosition;

      vec2 noisePosition = position * 0.5 + 0.5;
      vec3 displacementNoise = noiseDerivatives(vec3(noisePosition, u_seed + u_time * 0.015));
      position += displacementNoise.xz * u_displacement * 0.12;

      vec2 offsetPosition = position;
      offsetPosition -= u_colorOffset;
      offsetPosition = mod(offsetPosition - u_spacing, vec2(u_spacing * 2.0)) - u_spacing;
      offsetPosition = rotate2d(offsetPosition.x * 0.04 - u_colorRotation) * offsetPosition;
      offsetPosition /= vec2(max(u_colorSize, 0.001));
      offsetPosition *= vec2(1.0 / max(u_colorSpread, 0.001), 1.0);

      vec3 color = vec3(0.0);
      color = mix(u_color1, color, smoothstep(0.0, 1.0, distance(offsetPosition, vec2(0.0, u_colorSpacing * 1.5))));
      color = mix(u_color2, color, smoothstep(0.0, 1.0, distance(offsetPosition, vec2(0.0, u_colorSpacing * 0.5))));
      color = mix(u_color3, color, smoothstep(0.0, 1.0, distance(offsetPosition, vec2(0.0, -u_colorSpacing * 0.5))));
      color = mix(u_color4, color, smoothstep(0.0, 1.0, distance(offsetPosition, vec2(0.0, -u_colorSpacing * 1.5))));

      float textureNoise = grain(v_position * u_viewportSize * 0.5 + u_time * 12.0);
      float vignette = smoothstep(1.1, 0.16, length(v_position * vec2(0.82, 1.0)));
      color += (textureNoise - 0.5) * 0.055;
      color *= 0.74 + vignette * 0.42;
      color = clamp(color, 0.0, 1.0);

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

  const defaultOptions = {
    color1: "#16254b",
    color2: "#23418a",
    color3: "#aadfd9",
    color4: "#e64f0f",
    colorSize: 0.75,
    colorSpacing: 0.52,
    colorRotation: -0.381592653589793,
    colorSpread: 4.52,
    colorOffset: [-0.7741174697875977, -0.20644775390624992],
    displacement: 5,
    seed: 0.18,
    position: [-0.2816110610961914, -0.43914794921875],
    zoom: 0.72,
    spacing: 4.27
  };

  function compileShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      const message = gl.getShaderInfoLog(shader);
      gl.deleteShader(shader);
      throw new Error(message || "Shader compile failed");
    }

    return shader;
  }

  function createProgram(gl) {
    const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    const program = gl.createProgram();

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      const message = gl.getProgramInfoLog(program);
      gl.deleteProgram(program);
      throw new Error(message || "Program link failed");
    }

    return program;
  }

  function parseHexColor(value) {
    const hex = String(value || "").trim().replace("#", "");
    const normalized = hex.length === 3
      ? hex.split("").map((char) => char + char).join("")
      : hex.padEnd(6, "0").slice(0, 6);
    const int = Number.parseInt(normalized, 16);

    if (!Number.isFinite(int)) return [0, 0, 0];

    return [
      ((int >> 16) & 255) / 255,
      ((int >> 8) & 255) / 255,
      (int & 255) / 255
    ];
  }

  function parseNumber(value, fallback) {
    const number = Number.parseFloat(value);
    return Number.isFinite(number) ? number : fallback;
  }

  function parseVector(value, fallback) {
    if (!value) return fallback;
    const parts = String(value).split(",").map((part) => Number.parseFloat(part.trim()));
    return parts.length >= 2 && parts.every(Number.isFinite) ? [parts[0], parts[1]] : fallback;
  }

  class FluidGradient extends HTMLElement {
    static get observedAttributes() {
      return [
        "color1",
        "color2",
        "color3",
        "color4",
        "colorsize",
        "colorspacing",
        "colorrotation",
        "colorspread",
        "coloroffset",
        "displacement",
        "seed",
        "position",
        "zoom",
        "spacing"
      ];
    }

    constructor() {
      super();
      this.canvas = document.createElement("canvas");
      this.shadow = this.attachShadow({ mode: "open" });
      this.shadow.innerHTML = `
        <style>
          :host {
            display: block;
            position: relative;
            overflow: hidden;
            contain: content;
            touch-action: none;
          }

          canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
          }
        </style>
      `;
      this.shadow.append(this.canvas);

      this.options = structuredClone(defaultOptions);
      this.pointer = {
        x: 0.5,
        y: 0.5,
        targetX: 0.5,
        targetY: 0.5,
        displacement: defaultOptions.displacement,
        seed: defaultOptions.seed
      };
      this.bounds = { width: 1, height: 1, dpr: 1 };
      this.frame = 0;
      this.start = performance.now();
      this.resizeObserver = new ResizeObserver(() => this.resize());
      this.handlePointerMove = this.handlePointerMove.bind(this);
      this.render = this.render.bind(this);
    }

    connectedCallback() {
      this.gl = this.canvas.getContext("webgl2", {
        alpha: false,
        antialias: true,
        depth: false,
        preserveDrawingBuffer: false
      });

      if (!this.gl) {
        this.style.background = "radial-gradient(circle at 30% 15%, #aadfd9, transparent 28%), radial-gradient(circle at 24% 78%, #e64f0f, transparent 38%), radial-gradient(circle at 70% 60%, #23418a, transparent 42%), #05090a";
        return;
      }

      this.program = createProgram(this.gl);
      this.createGeometry();
      this.collectUniforms();
      this.readAttributes();
      this.resizeObserver.observe(this);
      this.addEventListener("pointermove", this.handlePointerMove, { passive: true });
      this.resize();
      this.play();
    }

    disconnectedCallback() {
      cancelAnimationFrame(this.frame);
      this.resizeObserver.disconnect();
      this.removeEventListener("pointermove", this.handlePointerMove);
    }

    attributeChangedCallback() {
      this.readAttributes();
    }

    createGeometry() {
      const gl = this.gl;
      const positions = new Float32Array([
        -1, -1,
        1, -1,
        -1, 1,
        -1, 1,
        1, -1,
        1, 1
      ]);

      this.buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
      gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

      const positionLocation = gl.getAttribLocation(this.program, "a_position");
      gl.enableVertexAttribArray(positionLocation);
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    }

    collectUniforms() {
      const gl = this.gl;
      this.uniforms = {
        viewportSize: gl.getUniformLocation(this.program, "u_viewportSize"),
        color1: gl.getUniformLocation(this.program, "u_color1"),
        color2: gl.getUniformLocation(this.program, "u_color2"),
        color3: gl.getUniformLocation(this.program, "u_color3"),
        color4: gl.getUniformLocation(this.program, "u_color4"),
        colorSize: gl.getUniformLocation(this.program, "u_colorSize"),
        colorSpacing: gl.getUniformLocation(this.program, "u_colorSpacing"),
        colorRotation: gl.getUniformLocation(this.program, "u_colorRotation"),
        colorSpread: gl.getUniformLocation(this.program, "u_colorSpread"),
        colorOffset: gl.getUniformLocation(this.program, "u_colorOffset"),
        displacement: gl.getUniformLocation(this.program, "u_displacement"),
        seed: gl.getUniformLocation(this.program, "u_seed"),
        transformPosition: gl.getUniformLocation(this.program, "u_transformPosition"),
        zoom: gl.getUniformLocation(this.program, "u_zoom"),
        spacing: gl.getUniformLocation(this.program, "u_spacing"),
        time: gl.getUniformLocation(this.program, "u_time")
      };
    }

    readAttributes() {
      this.options.color1 = parseHexColor(this.getAttribute("color1") || defaultOptions.color1);
      this.options.color2 = parseHexColor(this.getAttribute("color2") || defaultOptions.color2);
      this.options.color3 = parseHexColor(this.getAttribute("color3") || defaultOptions.color3);
      this.options.color4 = parseHexColor(this.getAttribute("color4") || defaultOptions.color4);
      this.options.colorSize = parseNumber(this.getAttribute("colorsize"), defaultOptions.colorSize);
      this.options.colorSpacing = parseNumber(this.getAttribute("colorspacing"), defaultOptions.colorSpacing);
      this.options.colorRotation = parseNumber(this.getAttribute("colorrotation"), defaultOptions.colorRotation);
      this.options.colorSpread = parseNumber(this.getAttribute("colorspread"), defaultOptions.colorSpread);
      this.options.colorOffset = parseVector(this.getAttribute("coloroffset"), defaultOptions.colorOffset);
      this.options.displacement = parseNumber(this.getAttribute("displacement"), defaultOptions.displacement);
      this.options.seed = parseNumber(this.getAttribute("seed"), defaultOptions.seed);
      this.options.position = parseVector(this.getAttribute("position"), defaultOptions.position);
      this.options.zoom = parseNumber(this.getAttribute("zoom"), defaultOptions.zoom);
      this.options.spacing = parseNumber(this.getAttribute("spacing"), defaultOptions.spacing);
    }

    resize() {
      if (!this.gl) return;
      const rect = this.getBoundingClientRect();
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const width = Math.max(1, Math.floor(rect.width * dpr));
      const height = Math.max(1, Math.floor(rect.height * dpr));

      if (this.canvas.width !== width || this.canvas.height !== height) {
        this.canvas.width = width;
        this.canvas.height = height;
        this.bounds = { width, height, dpr };
        this.gl.viewport(0, 0, width, height);
      }
    }

    handlePointerMove(event) {
      const rect = this.getBoundingClientRect();
      const x = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
      const y = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5;

      this.pointer.targetX = Math.min(1, Math.max(0, x));
      this.pointer.targetY = Math.min(1, Math.max(0, y));
    }

    play() {
      if (this.frame) return;
      this.frame = requestAnimationFrame(this.render);
    }

    render(now) {
      const gl = this.gl;
      const pointer = this.pointer;
      const options = this.options;

      pointer.x += (pointer.targetX - pointer.x) * 0.1;
      pointer.y += (pointer.targetY - pointer.y) * 0.1;
      pointer.displacement += ((pointer.x * 5) - pointer.displacement) * 0.1;
      pointer.seed += (((pointer.y * 2) - 1) - pointer.seed) * 0.1;

      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.useProgram(this.program);

      gl.uniform2f(this.uniforms.viewportSize, this.bounds.width, this.bounds.height);
      gl.uniform3fv(this.uniforms.color1, options.color1);
      gl.uniform3fv(this.uniforms.color2, options.color2);
      gl.uniform3fv(this.uniforms.color3, options.color3);
      gl.uniform3fv(this.uniforms.color4, options.color4);
      gl.uniform1f(this.uniforms.colorSize, options.colorSize);
      gl.uniform1f(this.uniforms.colorSpacing, options.colorSpacing);
      gl.uniform1f(this.uniforms.colorRotation, options.colorRotation);
      gl.uniform1f(this.uniforms.colorSpread, options.colorSpread);
      gl.uniform2fv(this.uniforms.colorOffset, options.colorOffset);
      gl.uniform1f(this.uniforms.displacement, pointer.displacement);
      gl.uniform1f(this.uniforms.seed, pointer.seed);
      gl.uniform2fv(this.uniforms.transformPosition, options.position);
      gl.uniform1f(this.uniforms.zoom, options.zoom);
      gl.uniform1f(this.uniforms.spacing, options.spacing);
      gl.uniform1f(this.uniforms.time, (now - this.start) / 1000);
      gl.drawArrays(gl.TRIANGLES, 0, 6);

      this.frame = requestAnimationFrame(this.render);
    }
  }

  customElements.define("fluid-gradient", FluidGradient);
})();