"use client";

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

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 uPixelSize;
uniform float uPaletteSteps;
uniform float uContrast;
uniform float uSaturation;
uniform float uEdgeStrength;

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

float bayer4(vec2 position) {
  int x = int(mod(position.x, 4.0));
  int y = int(mod(position.y, 4.0));
  int index = x + y * 4;

  if (index == 0) return 0.0 / 16.0;
  if (index == 1) return 8.0 / 16.0;
  if (index == 2) return 2.0 / 16.0;
  if (index == 3) return 10.0 / 16.0;
  if (index == 4) return 12.0 / 16.0;
  if (index == 5) return 4.0 / 16.0;
  if (index == 6) return 14.0 / 16.0;
  if (index == 7) return 6.0 / 16.0;
  if (index == 8) return 3.0 / 16.0;
  if (index == 9) return 11.0 / 16.0;
  if (index == 10) return 1.0 / 16.0;
  if (index == 11) return 9.0 / 16.0;
  if (index == 12) return 15.0 / 16.0;
  if (index == 13) return 7.0 / 16.0;
  if (index == 14) return 13.0 / 16.0;
  return 5.0 / 16.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 uv;
}

void main() {
  vec2 uv = coverUv(vUv, uResolution, uImageResolution);
  vec2 cellCount = max(vec2(1.0), floor(uResolution / max(uPixelSize, 1.0)));
  vec2 snappedUv = (floor(uv * cellCount) + 0.5) / cellCount;
  vec2 sampleStep = 1.0 / cellCount;

  vec3 center = texture(uImage, snappedUv).rgb;
  vec3 right = texture(uImage, clamp(snappedUv + vec2(sampleStep.x, 0.0), 0.0, 1.0)).rgb;
  vec3 up = texture(uImage, clamp(snappedUv + vec2(0.0, sampleStep.y), 0.0, 1.0)).rgb;

  float dither = (bayer4(gl_FragCoord.xy) - 0.5) / max(uPaletteSteps, 2.0);
  vec3 color = applySaturation(center, uSaturation);
  color = applyContrast(color, uContrast);
  color = clamp(color + dither, 0.0, 1.0);
  color = floor(color * (uPaletteSteps - 1.0) + 0.5) / max(uPaletteSteps - 1.0, 1.0);

  float edge = abs(luminance(center) - luminance(right)) + abs(luminance(center) - luminance(up));
  edge = smoothstep(0.08, 0.32, edge) * uEdgeStrength;
  color = mix(color, color * 0.52, edge);

  float vignette = smoothstep(0.92, 0.18, distance(vUv, vec2(0.5)));
  color *= mix(0.9, 1.06, vignette);

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

interface PixelPaintingProps {
  src?: string;
  alt?: string;
  className?: string;
  pixelSize?: number;
  paletteSteps?: number;
  contrast?: number;
  saturation?: number;
  edgeStrength?: number;
}

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 PixelPainting({
  src = "/background/1.png",
  alt = "Pixel-painted landscape",
  className,
  pixelSize = 12,
  paletteSteps = 6,
  contrast = 1.12,
  saturation = 1.04,
  edgeStrength = 0.9,
}: PixelPaintingProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [aspectRatio, setAspectRatio] = useState(1229 / 685);
  const [supportsWebgl, setSupportsWebgl] = useState(true);

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

    if (!canvas || !container) return;

    let isDisposed = false;
    let resizeObserver: ResizeObserver | null = null;
    let imageLoaded = false;
    let imageWidth = 1229;
    let imageHeight = 685;

    const gl = canvas.getContext("webgl2", {
      alpha: false,
      antialias: false,
      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"),
      pixelSize: gl.getUniformLocation(program, "uPixelSize"),
      paletteSteps: gl.getUniformLocation(program, "uPaletteSteps"),
      contrast: gl.getUniformLocation(program, "uContrast"),
      saturation: gl.getUniformLocation(program, "uSaturation"),
      edgeStrength: gl.getUniformLocation(program, "uEdgeStrength"),
    };

    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 render = () => {
      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(0.047, 0.059, 0.074, 1.0);
      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.pixelSize) {
        gl.uniform1f(uniforms.pixelSize, pixelSize);
      }
      if (uniforms.paletteSteps) {
        gl.uniform1f(uniforms.paletteSteps, Math.max(2, paletteSteps));
      }
      if (uniforms.contrast) {
        gl.uniform1f(uniforms.contrast, contrast);
      }
      if (uniforms.saturation) {
        gl.uniform1f(uniforms.saturation, saturation);
      }
      if (uniforms.edgeStrength) {
        gl.uniform1f(uniforms.edgeStrength, edgeStrength);
      }

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

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

      render();
    };

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

    resizeObserver = new ResizeObserver(() => {
      render();
    });
    resizeObserver.observe(container);

    return () => {
      isDisposed = true;
      resizeObserver?.disconnect();
      gl.bindTexture(gl.TEXTURE_2D, null);
      gl.bindVertexArray(null);
      gl.deleteTexture(texture);
      gl.deleteVertexArray(vao);
      gl.deleteProgram(program);
    };
  }, [contrast, edgeStrength, paletteSteps, pixelSize, saturation, src]);

  return (
    <div
      ref={containerRef}
      className={className}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: aspectRatio.toString(),
        overflow: "hidden",
        background:
          "linear-gradient(135deg, rgba(17, 23, 31, 0.96), rgba(10, 15, 22, 1))",
      }}
    >
      {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",
            imageRendering: "pixelated",
            filter: "contrast(1.14) saturate(1.05)",
          }}
        />
      )}
    </div>
  );
}

const presets = [
  {
    name: "Arcade",
    pixelSize: 20,
    paletteSteps: 5,
    contrast: 1.2,
    saturation: 1.06,
    edgeStrength: 1.08,
    caption: "Chunky squares and tighter value steps.",
  },
  {
    name: "Studio",
    pixelSize: 12,
    paletteSteps: 7,
    contrast: 1.12,
    saturation: 1.02,
    edgeStrength: 0.88,
    caption: "A cleaner balance for product shots and portraits.",
  },
  {
    name: "Poster",
    pixelSize: 28,
    paletteSteps: 4,
    contrast: 1.26,
    saturation: 0.94,
    edgeStrength: 1.2,
    caption: "Reduced palette with heavier shading for a printed-card feel.",
  },
] as const;

export default function PixelPaintingPreview() {
  const [activePreset, setActivePreset] = useState(1);
  const preset = presets[activePreset];

  return (
    <div className="w-full max-w-[840px]">
      <div
        className="rounded-[28px] border p-3"
        style={{
          borderColor: "color-mix(in srgb, var(--villa-border) 85%, white 15%)",
          background:
            "linear-gradient(180deg, color-mix(in srgb, var(--villa-surface) 88%, white 12%), color-mix(in srgb, var(--villa-bg-subtle) 94%, #dfe8f5 6%))",
          boxShadow: "0 28px 80px rgba(19, 33, 52, 0.12)",
        }}
      >
        <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_240px]">
          <div
            className="overflow-hidden rounded-[22px] border"
            style={{
              borderColor:
                "color-mix(in srgb, var(--villa-border) 70%, rgba(22, 34, 46, 0.16) 30%)",
              backgroundColor: "#0c1218",
            }}
          >
            <div className="relative">
              <PixelPainting
                src="/background/1.png"
                pixelSize={preset.pixelSize}
                paletteSteps={preset.paletteSteps}
                contrast={preset.contrast}
                saturation={preset.saturation}
                edgeStrength={preset.edgeStrength}
              />

              <div
                className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-4 p-4"
                style={{
                  background:
                    "linear-gradient(180deg, rgba(4, 8, 12, 0) 0%, rgba(4, 8, 12, 0.72) 100%)",
                }}
              >
                <div>
                  <p
                    className="text-[10px] uppercase tracking-[0.12em]"
                    style={{
                      fontFamily: "var(--font-mono)",
                      color: "rgba(233, 239, 246, 0.64)",
                    }}
                  >
                    Pixel Painting
                  </p>
                  <p
                    className="mt-1 text-[14px]"
                    style={{
                      fontFamily: "var(--font-body)",
                      color: "rgba(246, 248, 251, 0.96)",
                    }}
                  >
                    Pixelize a source image into a soft retro sprite study.
                  </p>
                </div>

                <div
                  className="rounded-full px-3 py-1.5 text-[10px]"
                  style={{
                    fontFamily: "var(--font-mono)",
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                    color: "rgba(246, 248, 251, 0.92)",
                    backgroundColor: "rgba(246, 248, 251, 0.12)",
                    border: "1px solid rgba(246, 248, 251, 0.14)",
                    backdropFilter: "blur(14px)",
                  }}
                >
                  {preset.name}
                </div>
              </div>
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <div
              className="rounded-[22px] border p-4"
              style={{
                borderColor: "var(--villa-border)",
                backgroundColor: "rgba(250, 252, 255, 0.78)",
              }}
            >
              <p
                className="text-[10px] uppercase tracking-[0.12em]"
                style={{
                  fontFamily: "var(--font-mono)",
                  color: "var(--villa-text-tertiary)",
                }}
              >
                Shader presets
              </p>

              <div className="mt-3 flex flex-wrap gap-2">
                {presets.map((item, index) => {
                  const isActive = index === activePreset;

                  return (
                    <button
                      key={item.name}
                      type="button"
                      className="rounded-full px-3 py-1.5 text-[11px] transition-colors"
                      style={{
                        fontFamily: "var(--font-mono)",
                        letterSpacing: "0.05em",
                        backgroundColor: isActive
                          ? "var(--villa-text)"
                          : "rgba(17, 24, 39, 0.05)",
                        color: isActive
                          ? "var(--villa-bg)"
                          : "var(--villa-text-secondary)",
                      }}
                      onClick={() => setActivePreset(index)}
                    >
                      {item.name}
                    </button>
                  );
                })}
              </div>

              <p
                className="mt-4 text-[13px] leading-[1.65]"
                style={{
                  fontFamily: "var(--font-body)",
                  color: "var(--villa-text-secondary)",
                }}
              >
                {preset.caption}
              </p>

              <div
                className="mt-4 rounded-[18px] border p-3"
                style={{
                  borderColor: "rgba(17, 24, 39, 0.08)",
                  backgroundColor: "rgba(255, 255, 255, 0.72)",
                }}
              >
                <div
                  className="flex items-center justify-between text-[11px]"
                  style={{
                    fontFamily: "var(--font-mono)",
                    color: "var(--villa-text-tertiary)",
                  }}
                >
                  <span>pixel size</span>
                  <span>{preset.pixelSize}px</span>
                </div>
                <div
                  className="mt-2 flex items-center justify-between text-[11px]"
                  style={{
                    fontFamily: "var(--font-mono)",
                    color: "var(--villa-text-tertiary)",
                  }}
                >
                  <span>palette steps</span>
                  <span>{preset.paletteSteps}</span>
                </div>
              </div>
            </div>

            <div
              className="overflow-hidden rounded-[22px] border"
              style={{
                borderColor: "var(--villa-border)",
                backgroundColor: "rgba(255, 255, 255, 0.82)",
              }}
            >
              <div className="p-3 pb-0">
                <p
                  className="text-[10px] uppercase tracking-[0.12em]"
                  style={{
                    fontFamily: "var(--font-mono)",
                    color: "var(--villa-text-tertiary)",
                  }}
                >
                  Source image
                </p>
              </div>

              <img
                src="/background/1.png"
                alt="Original background reference"
                style={{
                  display: "block",
                  width: "100%",
                  height: "auto",
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}