// components/field/PressureField.tsx
'use client'
 
import { Suspense, lazy, useEffect, useState } from 'react'
import { useReducedMotion } from '@/lib/hooks/use-reduced-motion'
 
const FieldScene = lazy(() => import('./FieldScene'))
 
type Tier = 'A' | 'B' | 'C'
 
function detectTier(prefersReducedMotion: boolean): Tier {
  if (prefersReducedMotion) return 'C'
  if (!('WebGLRenderingContext' in window)) return 'C'
 
  const memory = (navigator as any).deviceMemory ?? 4
  const isTouchHeavy = navigator.maxTouchPoints > 4
 
  if (memory <= 2 || isTouchHeavy) return 'B'
  return 'A'
}
 
export function PressureField({ posterSrc }: { posterSrc: string }) {
  const prefersReducedMotion = useReducedMotion()
  const [tier, setTier] = useState<Tier | null>(null)
 
  useEffect(() => {
    setTier(detectTier(prefersReducedMotion))
  }, [prefersReducedMotion])
 
  if (tier === null || tier === 'C') {
    return <img src={posterSrc} alt="" aria-hidden className="field-poster" />
  }
 
  return (
    <Suspense fallback={<img src={posterSrc} alt="" aria-hidden className="field-poster" />}>
      <FieldScene tier={tier} />
    </Suspense>
  )
}

// components/field/FieldMaterial.tsx
import { shaderMaterial } from '@react-three/drei'
import { extend, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import vertexShader from './field.vert.glsl'
import fragmentShader from './field.frag.glsl'
 
export const FieldMaterial = shaderMaterial(
  {
    uTime: 0,
    uAgitation: 0, // 0..~0.97，随24小时气压降幅增大
    uIsoDensity: 14,
    uInk: [0.06, 0.07, 0.07],
    uGreen: [0.12, 0.48, 0.35],
  },
  vertexShader,
  fragmentShader
)
 
extend({ FieldMaterial })
 
export function agitationFromPressureDelta(deltaHpa24h: number): number {
  // 气压下降会驱动场；上升或稳定则让场保持平静
  const drop = Math.max(0, -deltaHpa24h)
  return 1 - Math.exp(-drop / 7)
}
 
export function FieldMesh({ pressureDelta24h }: { pressureDelta24h: number }) {
  const materialRef = useRef<any>(null)
  const targetAgitation = agitationFromPressureDelta(pressureDelta24h)
 
  useFrame((state, delta) => {
    if (!materialRef.current) return
    materialRef.current.uTime = state.clock.elapsedTime
    // 平滑lerp到目标值——数据刷新时不会跳变
    materialRef.current.uAgitation +=
      (targetAgitation - materialRef.current.uAgitation) * Math.min(1, delta * 2)
  })
 
  return (
    <mesh scale={[2, 2, 1]}>
      <planeGeometry args={[1, 1]} />
      {/* @ts-expect-error – extended material via shaderMaterial */}
      <fieldMaterial ref={materialRef} transparent />
    </mesh>
  )
}

// field.frag.glsl
uniform float uTime;
uniform float uAgitation;   // 0（平静）..~0.97（气压大幅下降）
uniform float uIsoDensity;  // 等值线基础密度
uniform vec3 uInk;
uniform vec3 uGreen;
 
varying vec2 vUv;
 
float snoise(vec2 v); // 2D simplex噪声，实现从略
 
void main() {
  vec2 uv = vUv * 2.0 - 1.0;
 
  // 场在两个噪声倍频上"呼吸"；第二个倍频随躁动程度增强，
  // 天气平静时几乎不可察觉
  float breathing =
    snoise(uv * 1.6 + uTime * 0.075) * 0.5 +
    snoise(uv * 3.7 - uTime * 0.028) * (0.2 + uAgitation * 0.3);
 
  float density = uIsoDensity * (0.82 + uAgitation * 0.55);
  float field = length(uv) * density + breathing * (0.055 + uAgitation * 0.05);
 
  // 等值线：场的取模值到最近"线"的距离
  float line = abs(fract(field) - 0.5) * 2.0;
  float iso = 1.0 - smoothstep(0.0, fwidth(field) * 1.5, line);
 
  // 每三条线中有一条是强调色，其余为"墨色"
  bool isAccent = mod(floor(field), 3.0) < 1.0;
  vec3 color = isAccent ? uGreen : uInk;
  float alpha = iso * (isAccent ? 0.55 : 0.24);
 
  gl_FragColor = vec4(color, alpha);
}