<script setup lang="ts">
import { Mesh, Program, Renderer, Triangle } from 'ogl';
import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';

type PrismProps = {
  height?: number;
  baseWidth?: number;
  animationType?: 'rotate' | 'hover' | '3drotate';
  glow?: number;
  offset?: { x?: number; y?: number };
  noise?: number;
  transparent?: boolean;
  scale?: number;
  hueShift?: number;
  colorFrequency?: number;
  hoverStrength?: number;
  inertia?: number;
  bloom?: number;
  suspendWhenOffscreen?: boolean;
  timeScale?: number;
};

const props = withDefaults(defineProps<PrismProps>(), {
  height: 3.5,
  baseWidth: 5.5,
  animationType: 'rotate',
  glow: 1,
  offset: () => ({ x: 0, y: 0 }),
  noise: 0.5,
  transparent: true,
  scale: 3.6,
  hueShift: 0,
  colorFrequency: 1,
  hoverStrength: 2,
  inertia: 0.05,
  bloom: 1,
  suspendWhenOffscreen: false,
  timeScale: 0.5
});

const containerRef = useTemplateRef('containerRef');

let cleanup: (() => void) | null = null;

const setup = () => {
  const container = containerRef.value;
  if (!container) return;

  const H = Math.max(0.001, props.height);
  const BW = Math.max(0.001, props.baseWidth);
  const BASE_HALF = BW * 0.5;
  const GLOW = Math.max(0.0, props.glow);
  const NOISE = Math.max(0.0, props.noise);
  const offX = props.offset?.x ?? 0;
  const offY = props.offset?.y ?? 0;
  const SAT = props.transparent ? 1.5 : 1;
  const SCALE = Math.max(0.001, props.scale);
  const HUE = props.hueShift || 0;
  const CFREQ = Math.max(0.0, props.colorFrequency || 1);
  const BLOOM = Math.max(0.0, props.bloom || 1);
  const RSX = 1;
  const RSY = 1;
  const RSZ = 1;
  const TS = Math.max(0, props.timeScale || 1);
  const HOVSTR = Math.max(0, props.hoverStrength || 1);
  const INERT = Math.max(0, Math.min(1, props.inertia || 0.12));

  const dpr = Math.min(2, window.devicePixelRatio || 1);
  const renderer = new Renderer({
    dpr,
    alpha: props.transparent,
    antialias: false
  });
  const gl = renderer.gl;
  gl.disable(gl.DEPTH_TEST);
  gl.disable(gl.CULL_FACE);
  gl.disable(gl.BLEND);

  Object.assign(gl.canvas.style, {
    position: 'absolute',
    inset: '0',
    width: '100%',
    height: '100%',
    display: 'block'
  } as Partial<CSSStyleDeclaration>);
  container.appendChild(gl.canvas);

  const vertex = /* glsl */ `
      attribute vec2 position;
      void main() {
        gl_Position = vec4(position, 0.0, 1.0);
      }
    `;

  const fragment = /* glsl */ `
      precision highp float;

      uniform vec2  iResolution;
      uniform float iTime;

      uniform float uHeight;
      uniform float uBaseHalf;
      uniform mat3  uRot;
      uniform int   uUseBaseWobble;
      uniform float uGlow;
      uniform vec2  uOffsetPx;
      uniform float uNoise;
      uniform float uSaturation;
      uniform float uScale;
      uniform float uHueShift;
      uniform float uColorFreq;
      uniform float uBloom;
      uniform float uCenterShift;
      uniform float uInvBaseHalf;
      uniform float uInvHeight;
      uniform float uMinAxis;
      uniform float uPxScale;
      uniform float uTimeScale;

      vec4 tanh4(vec4 x){
        vec4 e2x = exp(2.0*x);
        return (e2x - 1.0) / (e2x + 1.0);
      }

      float rand(vec2 co){
        return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);
      }

      float sdOctaAnisoInv(vec3 p){
        vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);
        float m = q.x + q.y + q.z - 1.0;
        return m * uMinAxis * 0.5773502691896258;
      }

      float sdPyramidUpInv(vec3 p){
        float oct = sdOctaAnisoInv(p);
        float halfSpace = -p.y;
        return max(oct, halfSpace);
      }

      mat3 hueRotation(float a){
        float c = cos(a), s = sin(a);
        mat3 W = mat3(
          0.299, 0.587, 0.114,
          0.299, 0.587, 0.114,
          0.299, 0.587, 0.114
        );
        mat3 U = mat3(
           0.701, -0.587, -0.114,
          -0.299,  0.413, -0.114,
          -0.300, -0.588,  0.886
        );
        mat3 V = mat3(
           0.168, -0.331,  0.500,
           0.328,  0.035, -0.500,
          -0.497,  0.296,  0.201
        );
        return W + U * c + V * s;
      }

      void main(){
        vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;

        float z = 5.0;
        float d = 0.0;

        vec3 p;
        vec4 o = vec4(0.0);

        float centerShift = uCenterShift;
        float cf = uColorFreq;

        mat2 wob = mat2(1.0);
        if (uUseBaseWobble == 1) {
          float t = iTime * uTimeScale;
          float c0 = cos(t + 0.0);
          float c1 = cos(t + 33.0);
          float c2 = cos(t + 11.0);
          wob = mat2(c0, c1, c2, c0);
        }

        const int STEPS = 100;
        for (int i = 0; i < STEPS; i++) {
          p = vec3(f, z);
          p.xz = p.xz * wob;
          p = uRot * p;
          vec3 q = p;
          q.y += centerShift;
          d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));
          z -= d;
          o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;
        }

        o = tanh4(o * o * (uGlow * uBloom) / 1e5);

        vec3 col = o.rgb;
        float n = rand(gl_FragCoord.xy + vec2(iTime));
        col += (n - 0.5) * uNoise;
        col = clamp(col, 0.0, 1.0);

        float L = dot(col, vec3(0.2126, 0.7152, 0.0722));
        col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);

        if(abs(uHueShift) > 0.0001){
          col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);
        }

        gl_FragColor = vec4(col, o.a);
      }
    `;

  const geometry = new Triangle(gl);
  const iResBuf = new Float32Array(2);
  const offsetPxBuf = new Float32Array(2);

  const program = new Program(gl, {
    vertex,
    fragment,
    uniforms: {
      iResolution: { value: iResBuf },
      iTime: { value: 0 },
      uHeight: { value: H },
      uBaseHalf: { value: BASE_HALF },
      uUseBaseWobble: { value: 1 },
      uRot: { value: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]) },
      uGlow: { value: GLOW },
      uOffsetPx: { value: offsetPxBuf },
      uNoise: { value: NOISE },
      uSaturation: { value: SAT },
      uScale: { value: SCALE },
      uHueShift: { value: HUE },
      uColorFreq: { value: CFREQ },
      uBloom: { value: BLOOM },
      uCenterShift: { value: H * 0.25 },
      uInvBaseHalf: { value: 1 / BASE_HALF },
      uInvHeight: { value: 1 / H },
      uMinAxis: { value: Math.min(BASE_HALF, H) },
      uPxScale: {
        value: 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE)
      },
      uTimeScale: { value: TS }
    }
  });
  const mesh = new Mesh(gl, { geometry, program });

  const resize = () => {
    const w = container.clientWidth || 1;
    const h = container.clientHeight || 1;
    renderer.setSize(w, h);
    iResBuf[0] = gl.drawingBufferWidth;
    iResBuf[1] = gl.drawingBufferHeight;
    offsetPxBuf[0] = offX * dpr;
    offsetPxBuf[1] = offY * dpr;
    program.uniforms.uPxScale.value = 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE);
  };
  const ro = new ResizeObserver(resize);
  ro.observe(container);
  resize();

  const rotBuf = new Float32Array(9);
  const setMat3FromEuler = (yawY: number, pitchX: number, rollZ: number, out: Float32Array) => {
    const cy = Math.cos(yawY),
      sy = Math.sin(yawY);
    const cx = Math.cos(pitchX),
      sx = Math.sin(pitchX);
    const cz = Math.cos(rollZ),
      sz = Math.sin(rollZ);
    const r00 = cy * cz + sy * sx * sz;
    const r01 = -cy * sz + sy * sx * cz;
    const r02 = sy * cx;

    const r10 = cx * sz;
    const r11 = cx * cz;
    const r12 = -sx;

    const r20 = -sy * cz + cy * sx * sz;
    const r21 = sy * sz + cy * sx * cz;
    const r22 = cy * cx;

    out[0] = r00;
    out[1] = r10;
    out[2] = r20;
    out[3] = r01;
    out[4] = r11;
    out[5] = r21;
    out[6] = r02;
    out[7] = r12;
    out[8] = r22;
    return out;
  };

  const NOISE_IS_ZERO = NOISE < 1e-6;
  let raf = 0;
  const t0 = performance.now();
  const startRAF = () => {
    if (raf) return;
    raf = requestAnimationFrame(render);
  };
  const stopRAF = () => {
    if (!raf) return;
    cancelAnimationFrame(raf);
    raf = 0;
  };

  const rnd = () => Math.random();
  const wX = (0.3 + rnd() * 0.6) * RSX;
  const wY = (0.2 + rnd() * 0.7) * RSY;
  const wZ = (0.1 + rnd() * 0.5) * RSZ;
  const phX = rnd() * Math.PI * 2;
  const phZ = rnd() * Math.PI * 2;

  let yaw = 0,
    pitch = 0,
    roll = 0;
  let targetYaw = 0,
    targetPitch = 0;
  const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

  const pointer = { x: 0, y: 0, inside: true };
  const onMove = (e: PointerEvent) => {
    const ww = Math.max(1, window.innerWidth);
    const wh = Math.max(1, window.innerHeight);
    const cx = ww * 0.5;
    const cy = wh * 0.5;
    const nx = (e.clientX - cx) / (ww * 0.5);
    const ny = (e.clientY - cy) / (wh * 0.5);
    pointer.x = Math.max(-1, Math.min(1, nx));
    pointer.y = Math.max(-1, Math.min(1, ny));
    pointer.inside = true;
  };
  const onLeave = () => {
    pointer.inside = false;
  };
  const onBlur = () => {
    pointer.inside = false;
  };

  let onPointerMove: ((e: PointerEvent) => void) | null = null;
  if (props.animationType === 'hover') {
    onPointerMove = (e: PointerEvent) => {
      onMove(e);
      startRAF();
    };
    window.addEventListener('pointermove', onPointerMove, { passive: true });
    window.addEventListener('mouseleave', onLeave);
    window.addEventListener('blur', onBlur);
    program.uniforms.uUseBaseWobble.value = 0;
  } else if (props.animationType === '3drotate') {
    program.uniforms.uUseBaseWobble.value = 0;
  } else {
    program.uniforms.uUseBaseWobble.value = 1;
  }

  const render = (t: number) => {
    const time = (t - t0) * 0.001;
    program.uniforms.iTime.value = time;

    let continueRAF = true;

    if (props.animationType === 'hover') {
      const maxPitch = 0.6 * HOVSTR;
      const maxYaw = 0.6 * HOVSTR;
      targetYaw = (pointer.inside ? -pointer.x : 0) * maxYaw;
      targetPitch = (pointer.inside ? pointer.y : 0) * maxPitch;
      const prevYaw = yaw;
      const prevPitch = pitch;
      const prevRoll = roll;
      yaw = lerp(prevYaw, targetYaw, INERT);
      pitch = lerp(prevPitch, targetPitch, INERT);
      roll = lerp(prevRoll, 0, 0.1);
      program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);

      if (NOISE_IS_ZERO) {
        const settled =
          Math.abs(yaw - targetYaw) < 1e-4 && Math.abs(pitch - targetPitch) < 1e-4 && Math.abs(roll) < 1e-4;
        if (settled) continueRAF = false;
      }
    } else if (props.animationType === '3drotate') {
      const tScaled = time * TS;
      yaw = tScaled * wY;
      pitch = Math.sin(tScaled * wX + phX) * 0.6;
      roll = Math.sin(tScaled * wZ + phZ) * 0.5;
      program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
      if (TS < 1e-6) continueRAF = false;
    } else {
      rotBuf[0] = 1;
      rotBuf[1] = 0;
      rotBuf[2] = 0;
      rotBuf[3] = 0;
      rotBuf[4] = 1;
      rotBuf[5] = 0;
      rotBuf[6] = 0;
      rotBuf[7] = 0;
      rotBuf[8] = 1;
      program.uniforms.uRot.value = rotBuf;
      if (TS < 1e-6) continueRAF = false;
    }

    renderer.render({ scene: mesh });
    if (continueRAF) {
      raf = requestAnimationFrame(render);
    } else {
      raf = 0;
    }
  };

  if (props.suspendWhenOffscreen) {
    const io = new IntersectionObserver(entries => {
      const vis = entries.some(e => e.isIntersecting);
      if (vis) startRAF();
      else stopRAF();
    });
    io.observe(container);
    startRAF();
    (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO = io;
  } else {
    startRAF();
  }

  cleanup = () => {
    stopRAF();
    ro.disconnect();
    if (props.animationType === 'hover') {
      if (onPointerMove) window.removeEventListener('pointermove', onPointerMove as EventListener);
      window.removeEventListener('mouseleave', onLeave);
      window.removeEventListener('blur', onBlur);
    }
    if (props.suspendWhenOffscreen) {
      const io = (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO as
        | IntersectionObserver
        | undefined;
      if (io) io.disconnect();
      delete (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO;
    }
    if (gl.canvas.parentElement === container) container.removeChild(gl.canvas);
  };
};

onMounted(() => {
  setup();
});

onBeforeUnmount(() => {
  cleanup?.();
});

watch(
  props,
  () => {
    cleanup?.();
    setup();
  },
  { deep: true }
);
</script>

<template>
  <div class="relative w-full h-full" ref="containerRef" />
</template>
