"use client";

import { useEffect, useRef, useState } from "react";

import { cn } from "@/lib/utils";

const DEFAULT_ASPECT_RATIO = 1536 / 1024;

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

const vec2 POSITIONS[6] = vec2[](
  vec2(-1.0, -1.0),
  vec2(1.0, -1.0),
  vec2(-1.0, 1.0),
  vec2(-1.0, 1.0),
  vec2(1.0, -1.0),
  vec2(1.0, 1.0)
);

out vec2 vUv;

void main() {
  vec2 position = POSITIONS[gl_VertexID];
  vUv = position * 0.5 + 0.5;
  vUv.y = 1.0 - vUv.y;
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

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

in vec2 vUv;
out vec4 fragColor;

uniform sampler2D uImage;
uniform vec2 uResolution;
uniform vec2 uImageResolution;
uniform float uTime;
uniform float uContrast;
uniform float uSaturation;
uniform float uEdgeStrength;
uniform float uLineStrength;
uniform float uLineScale;
uniform float uHalftoneStrength;
uniform float uHalftoneScale;
uniform float uPosterize;
uniform float uAnimationSpeed;
uniform float uBloomStrength;
uniform vec3 uDeepBlue;
uniform vec3 uMidBlue;
uniform vec3 uLightBlue;
uniform vec3 uHighlight;

float luminance(vec3 color) {
  return dot(color, vec3(0.2126, 0.7152, 0.0722));
}

vec3 applySaturation(vec3 color, float amount) {
  float luma = luminance(color);
  return mix(vec3(luma), color, amount);
}

vec3 applyContrast(vec3 color, float amount) {
  return clamp((color - 0.5) * amount + 0.5, 0.0, 1.0);
}

vec2 coverUv(vec2 uv, vec2 canvasSize, vec2 imageSize) {
  float canvasRatio = canvasSize.x / canvasSize.y;
  float imageRatio = imageSize.x / imageSize.y;

  if (canvasRatio > imageRatio) {
    float scale = imageRatio / canvasRatio;
    uv.y = (uv.y - 0.5) * scale + 0.5;
  } else {
    float scale = canvasRatio / imageRatio;
    uv.x = (uv.x - 0.5) * scale + 0.5;
  }

  return clamp(uv, 0.0, 1.0);
}

float hash21(vec2 p) {
  p = fract(p * vec2(123.34, 345.45));
  p += dot(p, p + 34.345);
  return fract(p.x * p.y);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);

  return mix(
    mix(hash21(i), hash21(i + vec2(1.0, 0.0)), u.x),
    mix(hash21(i + vec2(0.0, 1.0)), hash21(i + vec2(1.0, 1.0)), u.x),
    u.y
  );
}

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

vec3 remapBlue(float t) {
  vec3 color = mix(uDeepBlue, uMidBlue, smoothstep(0.02, 0.34, t));
  color = mix(color, uLightBlue, smoothstep(0.3, 0.78, t));
  color = mix(color, uHighlight, smoothstep(0.72, 1.0, t));
  return color;
}

void main() {
  vec2 uv = coverUv(vUv, uResolution, uImageResolution);
  vec2 texel = 1.0 / max(uImageResolution, vec2(1.0));

  vec3 source = texture(uImage, uv).rgb;
  source = applySaturation(source, uSaturation);
  source = applyContrast(source, uContrast);

  vec3 sampleL = applyContrast(applySaturation(texture(uImage, clamp(uv - vec2(texel.x * 1.4, 0.0), 0.0, 1.0)).rgb, uSaturation), uContrast);
  vec3 sampleR = applyContrast(applySaturation(texture(uImage, clamp(uv + vec2(texel.x * 1.4, 0.0), 0.0, 1.0)).rgb, uSaturation), uContrast);
  vec3 sampleD = applyContrast(applySaturation(texture(uImage, clamp(uv - vec2(0.0, texel.y * 1.4), 0.0, 1.0)).rgb, uSaturation), uContrast);
  vec3 sampleU = applyContrast(applySaturation(texture(uImage, clamp(uv + vec2(0.0, texel.y * 1.4), 0.0, 1.0)).rgb, uSaturation), uContrast);

  float luma = clamp(luminance(source), 0.0, 1.0);
  float lumaL = luminance(sampleL);
  float lumaR = luminance(sampleR);
  float lumaD = luminance(sampleD);
  float lumaU = luminance(sampleU);

  vec2 gradient = vec2(lumaR - lumaL, lumaU - lumaD);
  float edge = length(gradient);
  vec2 tangent = normalize(vec2(-gradient.y, gradient.x) + vec2(1e-5, 0.0));

  float posterized = floor(luma * max(uPosterize, 2.0)) / max(uPosterize - 1.0, 1.0);
  float tonal = mix(pow(luma, 0.9), posterized, 0.36);
  vec3 color = remapBlue(tonal);

  float cloudMask = smoothstep(0.42, 0.98, luma);
  float edgeGlow = smoothstep(0.018, 0.12, edge) * cloudMask;
  color = mix(color, uHighlight, edgeGlow * uEdgeStrength * 0.78);

  float time = uTime * uAnimationSpeed;
  float aspect = uResolution.x / max(uResolution.y, 1.0);
  vec2 scaledUv = vUv * vec2(aspect, 1.0);
  vec2 flowUv = scaledUv * uLineScale;
  float driftA = noise(flowUv * 0.9 + tangent * 7.0 + vec2(time * 0.24, -time * 0.13));
  float driftB = noise(flowUv * 1.55 - tangent * 11.0 + vec2(-time * 0.11, time * 0.18));
  float stripeA = 0.5 + 0.5 * sin(dot(flowUv, tangent * vec2(6.0, 6.0)) + driftA * 6.28318 + driftB * 3.5);
  float stripeB = 0.5 + 0.5 * sin(dot(flowUv * 1.8, vec2(tangent.y, -tangent.x) * 5.0) - driftB * 5.4);
  stripeA = pow(stripeA, 10.0);
  stripeB = pow(stripeB, 13.0);

  float lineMask = (stripeA * 0.82 + stripeB * 0.4) * smoothstep(0.16, 0.98, luma) * (0.36 + edgeGlow * 1.35);
  color = mix(color, mix(color, uHighlight, 0.72), lineMask * uLineStrength);

  vec2 halftoneUv = rotate2d(radians(18.0)) * ((vUv - 0.5) * uHalftoneScale);
  vec2 halftoneCell = fract(halftoneUv) - 0.5;
  float halftoneTone = smoothstep(0.24, 0.92, luma);
  float dotRadius = mix(0.42, 0.14, halftoneTone);
  float dot = 1.0 - smoothstep(dotRadius, dotRadius + 0.09, length(halftoneCell));
  float halftone = dot * halftoneTone * uHalftoneStrength * 0.52;
  color = mix(color, color * 0.82 + uHighlight * 0.12, halftone);

  float bloom = smoothstep(0.58, 1.0, luma) * (0.42 + edgeGlow * 0.88);
  color = mix(color, mix(color, uHighlight, 0.88), bloom * uBloomStrength);

  float grain = (hash21(gl_FragCoord.xy + vec2(time * 17.0, time * 9.0)) - 0.5) / 170.0;
  color += grain;

  float vignette = smoothstep(1.04, 0.12, distance(vUv, vec2(0.54, 0.44)));
  color *= mix(0.88, 1.08, vignette);

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

export interface DigitalEtchSkyPalette {
  deepBlue?: string;
  midBlue?: string;
  lightBlue?: string;
  highlight?: string;
}

export interface DigitalEtchSkyProps {
  src?: string;
  alt?: string;
  className?: string;
  contrast?: number;
  saturation?: number;
  edgeStrength?: number;
  lineStrength?: number;
  lineScale?: number;
  halftoneStrength?: number;
  halftoneScale?: number;
  posterizeLevels?: number;
  animationSpeed?: number;
  bloomStrength?: number;
  palette?: DigitalEtchSkyPalette;
}

function hexToRgbTriplet(hex: string) {
  const normalized = hex.replace("#", "").trim();
  const expanded =
    normalized.length === 3
      ? normalized
          .split("")
          .map((char) => `${char}${char}`)
          .join("")
      : normalized;

  const value = Number.parseInt(expanded, 16);
  return [
    ((value >> 16) & 255) / 255,
    ((value >> 8) & 255) / 255,
    (value & 255) / 255,
  ] as const;
}

function compileShader(
  gl: WebGL2RenderingContext,
  type: number,
  source: string,
) {
  const shader = gl.createShader(type);
  if (!shader) return null;

  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

function createProgram(gl: WebGL2RenderingContext) {
  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);

  if (!vertexShader || !fragmentShader) {
    return null;
  }

  const program = gl.createProgram();
  if (!program) {
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);
    return null;
  }

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

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

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    gl.deleteProgram(program);
    return null;
  }

  return program;
}

export function DigitalEtchSky({
  src = "/cloud.png",
  alt = "Blue halftone cloud study",
  className,
  contrast = 1.22,
  saturation = 1.28,
  edgeStrength = 0.86,
  lineStrength = 0.7,
  lineScale = 150,
  halftoneStrength = 0.18,
  halftoneScale = 220,
  posterizeLevels = 7,
  animationSpeed = 0.08,
  bloomStrength = 0.24,
  palette,
}: DigitalEtchSkyProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [aspectRatio, setAspectRatio] = useState(DEFAULT_ASPECT_RATIO);
  const [supportsWebgl, setSupportsWebgl] = useState(true);

  useEffect(() => {
    const container = containerRef.current;
    const canvas = canvasRef.current;

    if (!container || !canvas) return;

    let isDisposed = false;
    let animationFrame = 0;
    let resizeObserver: ResizeObserver | null = null;
    let imageLoaded = false;
    let imageWidth = 1536;
    let imageHeight = 1024;
    let prefersReducedMotion = false;

    const mediaQuery =
      typeof window !== "undefined"
        ? window.matchMedia("(prefers-reduced-motion: reduce)")
        : null;

    prefersReducedMotion = mediaQuery?.matches ?? false;

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

    if (!gl) {
      setSupportsWebgl(false);
      return;
    }

    setSupportsWebgl(true);

    const program = createProgram(gl);
    if (!program) {
      setSupportsWebgl(false);
      return;
    }

    const vao = gl.createVertexArray();
    const texture = gl.createTexture();

    if (!vao || !texture) {
      gl.deleteProgram(program);
      setSupportsWebgl(false);
      return;
    }

    const uniforms = {
      image: gl.getUniformLocation(program, "uImage"),
      resolution: gl.getUniformLocation(program, "uResolution"),
      imageResolution: gl.getUniformLocation(program, "uImageResolution"),
      time: gl.getUniformLocation(program, "uTime"),
      contrast: gl.getUniformLocation(program, "uContrast"),
      saturation: gl.getUniformLocation(program, "uSaturation"),
      edgeStrength: gl.getUniformLocation(program, "uEdgeStrength"),
      lineStrength: gl.getUniformLocation(program, "uLineStrength"),
      lineScale: gl.getUniformLocation(program, "uLineScale"),
      halftoneStrength: gl.getUniformLocation(program, "uHalftoneStrength"),
      halftoneScale: gl.getUniformLocation(program, "uHalftoneScale"),
      posterize: gl.getUniformLocation(program, "uPosterize"),
      animationSpeed: gl.getUniformLocation(program, "uAnimationSpeed"),
      bloomStrength: gl.getUniformLocation(program, "uBloomStrength"),
      deepBlue: gl.getUniformLocation(program, "uDeepBlue"),
      midBlue: gl.getUniformLocation(program, "uMidBlue"),
      lightBlue: gl.getUniformLocation(program, "uLightBlue"),
      highlight: gl.getUniformLocation(program, "uHighlight"),
    };

    const deepBlue = hexToRgbTriplet(palette?.deepBlue ?? "#0001D6");
    const midBlue = hexToRgbTriplet(palette?.midBlue ?? "#2145F5");
    const lightBlue = hexToRgbTriplet(palette?.lightBlue ?? "#82A8FF");
    const highlight = hexToRgbTriplet(palette?.highlight ?? "#F7F9FF");

    gl.bindVertexArray(vao);
    gl.useProgram(program);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

    if (uniforms.image) {
      gl.uniform1i(uniforms.image, 0);
    }

    const renderFrame = (timeMs: number) => {
      if (isDisposed || !imageLoaded) return;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const nextWidth = Math.max(1, Math.round(container.clientWidth * dpr));
      const nextHeight = Math.max(1, Math.round(container.clientHeight * dpr));

      if (canvas.width !== nextWidth || canvas.height !== nextHeight) {
        canvas.width = nextWidth;
        canvas.height = nextHeight;
      }

      gl.viewport(0, 0, nextWidth, nextHeight);
      gl.clearColor(deepBlue[0], deepBlue[1], deepBlue[2], 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.useProgram(program);
      gl.bindVertexArray(vao);

      if (uniforms.resolution) {
        gl.uniform2f(uniforms.resolution, nextWidth, nextHeight);
      }
      if (uniforms.imageResolution) {
        gl.uniform2f(uniforms.imageResolution, imageWidth, imageHeight);
      }
      if (uniforms.time) {
        gl.uniform1f(uniforms.time, prefersReducedMotion ? 0 : timeMs * 0.001);
      }
      if (uniforms.contrast) {
        gl.uniform1f(uniforms.contrast, contrast);
      }
      if (uniforms.saturation) {
        gl.uniform1f(uniforms.saturation, saturation);
      }
      if (uniforms.edgeStrength) {
        gl.uniform1f(uniforms.edgeStrength, edgeStrength);
      }
      if (uniforms.lineStrength) {
        gl.uniform1f(uniforms.lineStrength, lineStrength);
      }
      if (uniforms.lineScale) {
        gl.uniform1f(uniforms.lineScale, lineScale);
      }
      if (uniforms.halftoneStrength) {
        gl.uniform1f(uniforms.halftoneStrength, halftoneStrength);
      }
      if (uniforms.halftoneScale) {
        gl.uniform1f(uniforms.halftoneScale, halftoneScale);
      }
      if (uniforms.posterize) {
        gl.uniform1f(uniforms.posterize, Math.max(2, posterizeLevels));
      }
      if (uniforms.animationSpeed) {
        gl.uniform1f(uniforms.animationSpeed, animationSpeed);
      }
      if (uniforms.bloomStrength) {
        gl.uniform1f(uniforms.bloomStrength, bloomStrength);
      }
      if (uniforms.deepBlue) {
        gl.uniform3fv(uniforms.deepBlue, deepBlue);
      }
      if (uniforms.midBlue) {
        gl.uniform3fv(uniforms.midBlue, midBlue);
      }
      if (uniforms.lightBlue) {
        gl.uniform3fv(uniforms.lightBlue, lightBlue);
      }
      if (uniforms.highlight) {
        gl.uniform3fv(uniforms.highlight, highlight);
      }

      gl.drawArrays(gl.TRIANGLES, 0, 6);
    };

    const animateFrame = (timeMs: number) => {
      renderFrame(timeMs);

      if (!isDisposed && !prefersReducedMotion) {
        animationFrame = window.requestAnimationFrame(animateFrame);
      }
    };

    const handleMotionPreference = (event: MediaQueryListEvent) => {
      prefersReducedMotion = event.matches;
      window.cancelAnimationFrame(animationFrame);

      if (!imageLoaded || isDisposed) return;

      if (prefersReducedMotion) {
        renderFrame(0);
      } else {
        animationFrame = window.requestAnimationFrame(animateFrame);
      }
    };

    mediaQuery?.addEventListener("change", handleMotionPreference);

    const image = new Image();
    image.decoding = "async";
    image.crossOrigin = "anonymous";
    image.src = src;

    image.onload = () => {
      if (isDisposed) return;

      imageLoaded = true;
      imageWidth = image.naturalWidth || image.width;
      imageHeight = image.naturalHeight || image.height;
      setAspectRatio(imageWidth / imageHeight);

      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        image,
      );

      if (prefersReducedMotion) {
        renderFrame(0);
      } else {
        animationFrame = window.requestAnimationFrame(animateFrame);
      }
    };

    image.onerror = () => {
      if (isDisposed) return;
      setSupportsWebgl(false);
    };

    resizeObserver = new ResizeObserver(() => {
      if (!imageLoaded) return;
      renderFrame(prefersReducedMotion ? 0 : performance.now());
    });
    resizeObserver.observe(container);

    return () => {
      isDisposed = true;
      window.cancelAnimationFrame(animationFrame);
      resizeObserver?.disconnect();
      mediaQuery?.removeEventListener("change", handleMotionPreference);
      gl.bindTexture(gl.TEXTURE_2D, null);
      gl.bindVertexArray(null);
      gl.deleteTexture(texture);
      gl.deleteVertexArray(vao);
      gl.deleteProgram(program);
    };
  }, [
    animationSpeed,
    bloomStrength,
    contrast,
    edgeStrength,
    halftoneScale,
    halftoneStrength,
    lineScale,
    lineStrength,
    palette?.deepBlue,
    palette?.highlight,
    palette?.lightBlue,
    palette?.midBlue,
    posterizeLevels,
    saturation,
    src,
  ]);

  return (
    <div
      ref={containerRef}
      className={cn("relative w-full overflow-hidden", className)}
      style={{
        aspectRatio: `${aspectRatio}`,
        background:
          "radial-gradient(circle at 18% 76%, rgba(112, 164, 255, 0.42), transparent 34%), linear-gradient(180deg, #0f2c9c 0%, #0001d6 100%)",
      }}
    >
      {supportsWebgl ? (
        <canvas
          ref={canvasRef}
          aria-label={alt}
          style={{
            display: "block",
            width: "100%",
            height: "100%",
          }}
        />
      ) : (
        <img
          src={src}
          alt={alt}
          style={{
            display: "block",
            width: "100%",
            height: "100%",
            objectFit: "cover",
            filter:
              "contrast(1.16) saturate(1.28) hue-rotate(-12deg) brightness(0.96)",
          }}
        />
      )}

      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(circle at 18% 76%, rgba(153, 200, 255, 0.2), transparent 22%), linear-gradient(180deg, rgba(0, 5, 42, 0.1), rgba(0, 2, 30, 0.22))",
          mixBlendMode: "screen",
        }}
      />
    </div>
  );
}
Digital Etch Sky
