wing-ops/frontend/src/tabs/weather/components/WindParticleLayer.tsx

import { useEffect, useRef, useCallback } from 'react'
import { useMap } from '@vis.gl/react-maplibre'
import type { Map as MapLibreMap } from 'maplibre-gl'

interface WindPoint {
  lat: number
  lon: number
  speed: number     // m/s
  direction: number // degrees (0=N, 90=E, 180=S, 270=W)
}

interface Particle {
  x: number
  y: number
  age: number
  maxAge: number
}

interface WindParticleLayerProps {
  visible: boolean
  stations: {
    location: { lat: number; lon: number }
    wind: { speed: number; direction: number }
  }[]
}

// 풍속 기반 색상 (Windy.com 스타일)
function getWindColor(speed: number): string {
  if (speed < 3) return 'rgba(98, 113, 183, 0.8)'
  if (speed < 5) return 'rgba(57, 160, 246, 0.8)'
  if (speed < 7) return 'rgba(80, 213, 145, 0.8)'
  if (speed < 10) return 'rgba(165, 226, 63, 0.8)'
  if (speed < 13) return 'rgba(250, 226, 30, 0.8)'
  if (speed < 16) return 'rgba(250, 170, 25, 0.8)'
  if (speed < 20) return 'rgba(240, 84, 33, 0.8)'
  return 'rgba(180, 30, 70, 0.8)'
}

// 풍속 기반 배경 색상 (반투명 오버레이)
function getWindBgColor(speed: number): string {
  if (speed < 3) return 'rgba(98, 113, 183, 0.12)'
  if (speed < 5) return 'rgba(57, 160, 246, 0.12)'
  if (speed < 7) return 'rgba(80, 213, 145, 0.12)'
  if (speed < 10) return 'rgba(165, 226, 63, 0.12)'
  if (speed < 13) return 'rgba(250, 226, 30, 0.12)'
  if (speed < 16) return 'rgba(250, 170, 25, 0.12)'
  if (speed < 20) return 'rgba(240, 84, 33, 0.12)'
  return 'rgba(180, 30, 70, 0.12)'
}

// 격자 보간으로 특정 위치의 풍속/풍향 추정 (IDW)
function interpolateWind(
  lat: number,
  lon: number,
  windPoints: WindPoint[]
): { speed: number; direction: number } {
  if (windPoints.length === 0) return { speed: 5, direction: 270 }

  let totalWeight = 0
  let weightedSpeed = 0
  let weightedDx = 0
  let weightedDy = 0

  for (const point of windPoints) {
    const dist = Math.sqrt(
      Math.pow(point.lat - lat, 2) + Math.pow(point.lon - lon, 2)
    )
    const weight = 1 / Math.pow(Math.max(dist, 0.01), 2)
    totalWeight += weight
    weightedSpeed += point.speed * weight

    const rad = (point.direction * Math.PI) / 180
    weightedDx += Math.sin(rad) * weight
    weightedDy += -Math.cos(rad) * weight
  }

  const speed = weightedSpeed / totalWeight
  const direction =
    (Math.atan2(weightedDx / totalWeight, -weightedDy / totalWeight) * 180) / Math.PI
  return { speed, direction: (direction + 360) % 360 }
}

// MapLibre map.unproject()를 통해 픽셀 → 경위도 변환
function containerPointToLatLng(
  map: MapLibreMap,
  x: number,
  y: number
): { lat: number; lng: number } {
  const lngLat = map.unproject([x, y])
  return { lat: lngLat.lat, lng: lngLat.lng }
}

const PARTICLE_COUNT = 800
const FADE_ALPHA = 0.93

/**
 * WindParticleLayer
 *
 * 기존: Canvas 2D + requestAnimationFrame + map.containerPointToLatLng() (Leaflet)
 * 전환: Canvas 2D + requestAnimationFrame + map.unproject() (MapLibre)
 *
 * @vis.gl/react-maplibre의 useMap()으로 MapLibre Map 인스턴스를 참조
 * Canvas는 MapLibre 컨테이너 위에 absolute 레이어로 삽입
 */
export function WindParticleLayer({ visible, stations }: WindParticleLayerProps) {
  const { current: mapRef } = useMap()
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const particlesRef = useRef<Particle[]>([])
  const animFrameRef = useRef<number>(0)

  const windPoints: WindPoint[] = stations.map((s) => ({
    lat: s.location.lat,
    lon: s.location.lon,
    speed: s.wind.speed,
    direction: s.wind.direction,
  }))

  const initParticles = useCallback((width: number, height: number) => {
    particlesRef.current = []
    for (let i = 0; i < PARTICLE_COUNT; i++) {
      particlesRef.current.push({
        x: Math.random() * width,
        y: Math.random() * height,
        age: Math.floor(Math.random() * 80),
        maxAge: 60 + Math.floor(Math.random() * 40),
      })
    }
  }, [])

  useEffect(() => {
    const map = mapRef?.getMap()
    if (!map) return

    if (!visible) {
      if (canvasRef.current) {
        canvasRef.current.remove()
        canvasRef.current = null
      }
      cancelAnimationFrame(animFrameRef.current)
      return
    }

    const container = map.getContainer()

    // Canvas 생성 또는 재사용
    let canvas = canvasRef.current
    if (!canvas) {
      canvas = document.createElement('canvas')
      canvas.style.position = 'absolute'
      canvas.style.top = '0'
      canvas.style.left = '0'
      canvas.style.pointerEvents = 'none'
      canvas.style.zIndex = '450'
      container.appendChild(canvas)
      canvasRef.current = canvas
    }

    const resize = () => {
      if (!canvas) return
      const { clientWidth: w, clientHeight: h } = container
      canvas.width = w
      canvas.height = h
    }
    resize()

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    initParticles(canvas.width, canvas.height)

    // 오프스크린 캔버스 (트레일 효과)
    let offCanvas: HTMLCanvasElement | null = null
    let offCtx: CanvasRenderingContext2D | null = null

    function drawWindOverlay() {
      if (!ctx || !canvas) return
      const gridSize = 30

      for (let x = 0; x < canvas.width; x += gridSize) {
        for (let y = 0; y < canvas.height; y += gridSize) {
          const { lat, lng } = containerPointToLatLng(map!, x + gridSize / 2, y + gridSize / 2)
          const wind = interpolateWind(lat, lng, windPoints)
          ctx.fillStyle = getWindBgColor(wind.speed)
          ctx.fillRect(x, y, gridSize, gridSize)
        }
      }
    }

    function animate() {
      if (!ctx || !canvas) return

      // 오프스크린 캔버스 크기 동기화
      if (!offCanvas || offCanvas.width !== canvas.width || offCanvas.height !== canvas.height) {
        offCanvas = document.createElement('canvas')
        offCanvas.width = canvas.width
        offCanvas.height = canvas.height
        offCtx = offCanvas.getContext('2d')
      }

      if (!offCtx) return

      // 트레일 페이드 효과
      offCtx.globalCompositeOperation = 'destination-in'
      offCtx.fillStyle = `rgba(0, 0, 0, ${FADE_ALPHA})`
      offCtx.fillRect(0, 0, offCanvas.width, offCanvas.height)
      offCtx.globalCompositeOperation = 'source-over'

      // 현재 지도 bounds 확인
      const bounds = map!.getBounds()

      for (const particle of particlesRef.current) {
        particle.age++

        // 수명 초과 시 리셋
        if (particle.age > particle.maxAge) {
          particle.x = Math.random() * canvas.width
          particle.y = Math.random() * canvas.height
          particle.age = 0
          particle.maxAge = 60 + Math.floor(Math.random() * 40)
          continue
        }

        const { lat, lng } = containerPointToLatLng(map!, particle.x, particle.y)

        // 화면 밖이면 리셋
        if (!bounds.contains([lng, lat])) {
          particle.x = Math.random() * canvas.width
          particle.y = Math.random() * canvas.height
          particle.age = 0
          continue
        }

        const wind = interpolateWind(lat, lng, windPoints)
        const rad = (wind.direction * Math.PI) / 180
        const pixelSpeed = wind.speed * 0.4

        const oldX = particle.x
        const oldY = particle.y
        particle.x += Math.sin(rad) * pixelSpeed
        particle.y += -Math.cos(rad) * pixelSpeed

        // 파티클 트레일 그리기
        const alpha = 1 - particle.age / particle.maxAge
        offCtx.strokeStyle = getWindColor(wind.speed).replace('0.8', String(alpha * 0.8))
        offCtx.lineWidth = 1.2
        offCtx.beginPath()
        offCtx.moveTo(oldX, oldY)
        offCtx.lineTo(particle.x, particle.y)
        offCtx.stroke()
      }

      // 메인 캔버스에 합성
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      drawWindOverlay()
      ctx.drawImage(offCanvas, 0, 0)

      animFrameRef.current = requestAnimationFrame(animate)
    }

    animate()

    // 지도 이동/줌 시 리셋
    const onMoveEnd = () => {
      resize()
      if (canvas) initParticles(canvas.width, canvas.height)
      if (offCanvas && canvas) {
        offCanvas.width = canvas.width
        offCanvas.height = canvas.height
      }
    }
    map.on('moveend', onMoveEnd)
    map.on('zoomend', onMoveEnd)

    return () => {
      cancelAnimationFrame(animFrameRef.current)
      map.off('moveend', onMoveEnd)
      map.off('zoomend', onMoveEnd)
      if (canvasRef.current) {
        canvasRef.current.remove()
        canvasRef.current = null
      }
    }
    // windPoints 배열은 렌더마다 재생성되므로 stations만 의존
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mapRef, visible, stations, initParticles])

  return null
}