import { useEffect, useRef } from 'react'
import { useMap } from '@vis.gl/react-maplibre'
import type { OceanForecastData } from '../services/khoaApi'

interface OceanForecastOverlayProps {
  forecast: OceanForecastData | null
  opacity?: number
  visible?: boolean
}

// 한국 해역 범위 [lon, lat]
const BOUNDS = {
  nw: [124.5, 38.5] as [number, number],
  ne: [132.0, 38.5] as [number, number],
  se: [132.0, 33.0] as [number, number],
  sw: [124.5, 33.0] as [number, number],
}

// www.khoa.go.kr 이미지는 CORS 미지원 → Vite 프록시 경유
function toProxyUrl(url: string): string {
  return url.replace('https://www.khoa.go.kr', '')
}

/**
 * OceanForecastOverlay
 *
 * MapLibre raster layer는 deck.gl 캔버스보다 항상 아래 렌더링되므로,
 * WindParticleLayer와 동일하게 canvas를 직접 map 컨테이너에 삽입하는 방식 사용.
 * z-index 500으로 WindParticleLayer(450) 위에 렌더링.
 */
export function OceanForecastOverlay({
  forecast,
  opacity = 0.6,
  visible = true,
}: OceanForecastOverlayProps) {
  const { current: mapRef } = useMap()
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const imgRef = useRef<HTMLImageElement | null>(null)

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

    const container = map.getContainer()

    // canvas 생성 (최초 1회)
    if (!canvasRef.current) {
      const canvas = document.createElement('canvas')
      canvas.style.position = 'absolute'
      canvas.style.top = '0'
      canvas.style.left = '0'
      canvas.style.pointerEvents = 'none'
      canvas.style.zIndex = '500'  // WindParticleLayer(450) 위
      container.appendChild(canvas)
      canvasRef.current = canvas
    }

    const canvas = canvasRef.current

    if (!visible || !forecast?.imgFilePath) {
      canvas.style.display = 'none'
      return
    }

    canvas.style.display = 'block'
    const proxyUrl = toProxyUrl(forecast.imgFilePath)

    function draw() {
      const img = imgRef.current
      if (!canvas || !img || !img.complete || img.naturalWidth === 0) return

      const { clientWidth: w, clientHeight: h } = container
      canvas.width = w
      canvas.height = h

      const ctx = canvas.getContext('2d')
      if (!ctx) return
      ctx.clearRect(0, 0, w, h)

      // 4개 꼭짓점을 픽셀 좌표로 변환
      const nw = map!.project(BOUNDS.nw)
      const ne = map!.project(BOUNDS.ne)
      const sw = map!.project(BOUNDS.sw)

      const x = Math.min(nw.x, sw.x)
      const y = nw.y
      const w2 = ne.x - nw.x
      const h2 = sw.y - nw.y

      ctx.globalAlpha = opacity
      ctx.drawImage(img, x, y, w2, h2)
    }

    // 이미지가 바뀌었으면 새로 로드
    if (!imgRef.current || imgRef.current.dataset.src !== proxyUrl) {
      const img = new Image()
      img.dataset.src = proxyUrl
      img.onload = draw
      img.src = proxyUrl
      imgRef.current = img
    } else {
      draw()
    }

    map.on('move', draw)
    map.on('zoom', draw)
    map.on('resize', draw)

    return () => {
      map.off('move', draw)
      map.off('zoom', draw)
      map.off('resize', draw)
    }
  }, [mapRef, visible, forecast?.imgFilePath, opacity])

  // 언마운트 시 canvas 제거
  useEffect(() => {
    return () => {
      canvasRef.current?.remove()
      canvasRef.current = null
    }
  }, [])

  return null
}