import { ImageOverlay, useMap } from 'react-leaflet'
import { LatLngBounds } from 'leaflet'
import { useEffect, useState } from 'react'
import type { OceanForecastData } from '../services/khoaApi'

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

// 한국 해역 범위 (대략적인 경계)
const KOREA_BOUNDS = new LatLngBounds(
  [33.0, 124.5], // 남서쪽 (제주 남쪽)
  [38.5, 132.0]  // 북동쪽 (동해 북쪽)
)

export function OceanForecastOverlay({
  forecast,
  opacity = 0.6,
  visible = true
}: OceanForecastOverlayProps) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const map = useMap()
  const [imageLoaded, setImageLoaded] = useState(false)

  useEffect(() => {
    if (forecast?.filePath) {
      // 이미지 미리 로드
      const img = new Image()
      img.onload = () => setImageLoaded(true)
      img.onerror = () => setImageLoaded(false)
      img.src = forecast.filePath
    } else {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setImageLoaded(false)
    }
  }, [forecast?.filePath])

  if (!visible || !forecast || !imageLoaded) {
    return null
  }

  return (
    <ImageOverlay
      url={forecast.filePath}
      bounds={KOREA_BOUNDS}
      opacity={opacity}
      zIndex={400} // 지도 위에 표시되지만 마커보다는 아래
      eventHandlers={{
        load: () => console.log('해황예보도 이미지 로드 완료'),
        error: () => console.error('해황예보도 이미지 로드 실패')
      }}
    />
  )
}