<!--
  ParticleSpherePost.vue — 同款粒子球,使用 pmndrs/postprocessing 替代 three 自带的
  EffectComposer。多个 effect 合并成单 fragment shader,GPU 开销更低,效果可叠加更多层。

  迁移说明(Vite→Nuxt):
  - window.devicePixelRatio 加 SSG 守卫(组件虽由 <ClientOnly> 包裹, 仍防御性处理)
  - 本组件须在父级用 <ClientOnly> 包裹, 不在服务端渲染。
-->
<script setup lang="ts">
import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
import * as THREE from 'three'
import {
  EffectComposer,
  EffectPass,
  RenderPass,
  BloomEffect,
  ChromaticAberrationEffect,
  NoiseEffect,
  VignetteEffect,
  ScanlineEffect,
  KernelSize,
  BlendFunction,
} from 'postprocessing'

interface Props {
  count?: number
  radius?: number
  pointSize?: number
  colorA?: string
  colorB?: string
}
const { t: tr } = useI18n({ useScope: 'local' })

const props = withDefaults(defineProps<Props>(), {
  count: 14000,
  radius: 1.6,
  pointSize: 3.0,
  colorA: '#D946EF',
  colorB: '#22D3EE',
})

const containerRef = useTemplateRef<HTMLDivElement>('container')

let renderer: THREE.WebGLRenderer
let composer: EffectComposer
let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let points: THREE.Points
let geometry: THREE.BufferGeometry
let material: THREE.ShaderMaterial
let rafId = 0
let resizeObserver: ResizeObserver | null = null

const mouseTarget = new THREE.Vector3(0, 0, 1)
let mouseStrTarget = 0
const clock = new THREE.Clock()

const vertexShader = /* glsl */`
  uniform float uTime;
  uniform vec3  uMouse;
  uniform float uMouseStr;
  uniform float uPointSize;
  uniform float uPixelRatio;

  attribute float aSeed;
  varying float vDisp;

  float hash(vec3 p) { return fract(sin(dot(p, vec3(12.9898,78.233,37.719))) * 43758.5453); }
  float noise(vec3 p){
    vec3 i = floor(p), f = fract(p);
    f = f*f*(3.0-2.0*f);
    return mix(mix(mix(hash(i), hash(i+vec3(1,0,0)), f.x),
                   mix(hash(i+vec3(0,1,0)), hash(i+vec3(1,1,0)), f.x), f.y),
               mix(mix(hash(i+vec3(0,0,1)), hash(i+vec3(1,0,1)), f.x),
                   mix(hash(i+vec3(0,1,1)), hash(i+vec3(1,1,1)), f.x), f.y), f.z);
  }

  void main() {
    vec3 pos = position;
    vec3 dir = normalize(pos);
    float breathe = sin(uTime * 0.6 + aSeed * 6.28) * 0.04;
    float n = noise(dir * 2.5 + uTime * 0.25);
    float disp = (n - 0.5) * 0.35;
    float md = distance(dir, normalize(uMouse + vec3(0.0001)));
    float ripple = exp(-md * 4.0) * sin(md * 12.0 - uTime * 4.0) * uMouseStr * 0.5;
    float total = breathe + disp + ripple;
    pos += dir * total;
    vDisp = total;
    vec4 mv = modelViewMatrix * vec4(pos, 1.0);
    gl_Position = projectionMatrix * mv;
    float atten = 5.0 / -mv.z;
    gl_PointSize = uPointSize * uPixelRatio * (0.8 + total * 1.0) * atten;
  }
`

const fragmentShader = /* glsl */`
  uniform vec3 uColorA;
  uniform vec3 uColorB;
  varying float vDisp;
  void main() {
    vec2 uv = gl_PointCoord - 0.5;
    float d = length(uv);
    if (d > 0.5) discard;
    float halo = smoothstep(0.5, 0.0, d);
    halo = pow(halo, 1.6);
    float t = smoothstep(-0.2, 0.3, vDisp);
    vec3 col = mix(uColorA, uColorB, t);
    gl_FragColor = vec4(col * halo * 1.4, 1.0);
  }
`

function buildGeometry() {
  const g = new THREE.BufferGeometry()
  const positions = new Float32Array(props.count * 3)
  const seeds = new Float32Array(props.count)
  const phi = Math.PI * (Math.sqrt(5) - 1)
  for (let i = 0; i < props.count; i++) {
    const y = 1 - (i / (props.count - 1)) * 2
    const r = Math.sqrt(1 - y * y)
    const theta = phi * i
    positions[i * 3]     = Math.cos(theta) * r * props.radius
    positions[i * 3 + 1] = y * props.radius
    positions[i * 3 + 2] = Math.sin(theta) * r * props.radius
    seeds[i] = Math.random()
  }
  g.setAttribute('position', new THREE.BufferAttribute(positions, 3))
  g.setAttribute('aSeed', new THREE.BufferAttribute(seeds, 1))
  return g
}

function setSize(w: number, h: number) {
  renderer.setSize(w, h, false)
  composer.setSize(w, h)
  camera.aspect = w / h
  camera.updateProjectionMatrix()
}

function onPointerMove(e: PointerEvent) {
  const el = containerRef.value!
  const rect = el.getBoundingClientRect()
  const x = ((e.clientX - rect.left) / rect.width) * 2 - 1
  const y = -((e.clientY - rect.top) / rect.height) * 2 + 1
  mouseTarget.set(x, y, Math.sqrt(Math.max(0, 1 - x * x - y * y)))
  mouseStrTarget = 1
}
function onPointerLeave() {
  mouseStrTarget = 0
}

onMounted(() => {
  const el = containerRef.value!
  const w = el.clientWidth
  const h = el.clientHeight

  scene = new THREE.Scene()
  scene.background = new THREE.Color(0x0d0418)
  camera = new THREE.PerspectiveCamera(55, w / h, 0.1, 100)
  camera.position.set(0, 0, 5)

  // postprocessing 推荐 powerPreference: 'high-performance' + stencil/depth 关闭
  renderer = new THREE.WebGLRenderer({
    antialias: false,
    powerPreference: 'high-performance',
    stencil: false,
    depth: false,
  })
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  renderer.setSize(w, h)
  el.appendChild(renderer.domElement)

  geometry = buildGeometry()
  material = new THREE.ShaderMaterial({
    uniforms: {
      uTime:       { value: 0 },
      uMouse:      { value: new THREE.Vector3(0, 0, 1) },
      uMouseStr:   { value: 0 },
      uPointSize:  { value: props.pointSize },
      uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
      uColorA:     { value: new THREE.Color(props.colorA) },
      uColorB:     { value: new THREE.Color(props.colorB) },
    },
    vertexShader,
    fragmentShader,
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
  })
  points = new THREE.Points(geometry, material)
  scene.add(points)

  // ===== postprocessing pipeline =====
  // 单个 EffectPass 把 4 个 effect 合并成一个 fragment shader,只一次全屏 quad
  composer = new EffectComposer(renderer)
  composer.addPass(new RenderPass(scene, camera))
  composer.addPass(new EffectPass(
    camera,
    new BloomEffect({
      intensity: 2.0,
      luminanceThreshold: 0.1,
      luminanceSmoothing: 0.5,
      kernelSize: KernelSize.LARGE,
      mipmapBlur: true,
    }),
    new ChromaticAberrationEffect({
      offset: new THREE.Vector2(0.006, 0.006),
      radialModulation: true,
      modulationOffset: 0.15,
    }),
    new ScanlineEffect({
      blendFunction: BlendFunction.OVERLAY,
      density: 1.4,
    }),
    new NoiseEffect({
      blendFunction: BlendFunction.OVERLAY,
      premultiply: true,
    }),
    new VignetteEffect({
      offset: 0.25,
      darkness: 0.85,
    }),
  ))

  const tick = () => {
    const t = clock.getElapsedTime()
    material.uniforms.uTime.value = t
    material.uniforms.uMouse.value.lerp(mouseTarget, 0.1)
    material.uniforms.uMouseStr.value += (mouseStrTarget - material.uniforms.uMouseStr.value) * 0.08
    points.rotation.y = t * 0.08
    points.rotation.x = Math.sin(t * 0.15) * 0.2
    composer.render()
    rafId = requestAnimationFrame(tick)
  }
  tick()

  resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const cr = entry.contentRect
      setSize(cr.width, cr.height)
    }
  })
  resizeObserver.observe(el)
})

onBeforeUnmount(() => {
  cancelAnimationFrame(rafId)
  resizeObserver?.disconnect()
  geometry?.dispose()
  material?.dispose()
  composer?.dispose()
  renderer?.dispose()
  if (renderer?.domElement?.parentNode) {
    renderer.domElement.parentNode.removeChild(renderer.domElement)
  }
})
</script>

<template>
  <div ref="container" class="ps-wrap" @pointermove="onPointerMove" @pointerleave="onPointerLeave">
    <div class="ps-hint">{{ tr('hint') }}</div>
  </div>
</template>

<i18n lang="json">
{
  "zh": { "hint": "移动鼠标" },
  "en": { "hint": "Move cursor" }
}
</i18n>

<style scoped>
.ps-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: radial-gradient(ellipse at center, #1a0822 0%, #06040c 70%);
  overflow: hidden;
  border-radius: 12px;
  cursor: crosshair;
}
.ps-hint {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 10;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  user-select: none;
}
</style>