import { useMemo } from 'react';
import { HeatmapLayer } from '@deck.gl/aggregation-layers';
import type { Layer } from '@deck.gl/core';

interface WaterTemperatureLayerProps {
  visible: boolean;
  opacity?: number;
}

interface TemperaturePoint {
  lat: number;
  lon: number;
  temp: number;
}

// 수온 데이터 생성 (실제로는 API에서 받아야 함)
const generateTemperatureData = (): TemperaturePoint[] => {
  const data: TemperaturePoint[] = [];

  for (let lat = 33.0; lat <= 38.5; lat += 0.3) {
    for (let lon = 124.5; lon <= 131.0; lon += 0.3) {
      let temp = 8.0;

      // 위도에 따른 온도 (남쪽이 따뜻함)
      temp += (38.0 - lat) * 2.0;

      // 경도에 따른 조정 (동해는 차가움)
      if (lon > 129) {
        temp -= 2.0;
      } else if (lon < 126) {
        temp += 1.0;
      }

      // 약간의 분포 변화
      temp += Math.sin(lat * 3.14) * 0.5 + Math.cos(lon * 2.0) * 0.5;

      data.push({ lat, lon, temp });
    }
  }

  return data;
};

// 온도 데이터는 컴포넌트 외부에서 한 번만 생성 (안정화)
const TEMPERATURE_DATA = generateTemperatureData();

// temp → HeatmapLayer weight (0~1 정규화, 범위 4~16°C)
function tempToWeight(temp: number): number {
  const MIN_TEMP = 4;
  const MAX_TEMP = 16;
  return Math.max(0, Math.min(1, (temp - MIN_TEMP) / (MAX_TEMP - MIN_TEMP)));
}

/**
 * useWaterTemperatureLayers — deck.gl HeatmapLayer 배열 반환 훅
 *
 * 기존: L.Layer 확장 커스텀 클래스 + Canvas RadialGradient
 * 전환: @deck.gl/aggregation-layers HeatmapLayer
 *
 * 색상 스케일 (차가움 → 따뜻함):
 *   파랑(진한) → 파랑 → 하늘 → 연두 → 노랑 → 주황 → 빨강
 */
// eslint-disable-next-line react-refresh/only-export-components
export function useWaterTemperatureLayers(props: WaterTemperatureLayerProps): Layer[] {
  const { visible, opacity = 0.5 } = props;

  return useMemo(() => {
    if (!visible) return [];

    const data = TEMPERATURE_DATA.map((p) => ({
      position: [p.lon, p.lat] as [number, number],
      weight: tempToWeight(p.temp),
    }));

    return [
      new HeatmapLayer({
        id: 'water-temperature-heatmap',
        data,
        getPosition: (d) => d.position,
        getWeight: (d) => d.weight,
        radiusPixels: 40,
        intensity: 1,
        threshold: 0.03,
        opacity,
        colorRange: [
          // 진한 파랑 (차가움)
          [0, 0, 139, 255],
          // 파랑
          [0, 68, 204, 255],
          // 하늘색
          [51, 153, 255, 255],
          // 연두색
          [102, 204, 102, 255],
          // 노랑
          [255, 255, 102, 255],
          // 주황
          [255, 153, 51, 255],
          // 빨강 (따뜻함)
          [255, 68, 68, 255],
        ] as [number, number, number, number][],
      }) as unknown as Layer,
    ];
  }, [visible, opacity]);
}

/**
 * WaterTemperatureLayer — React 컴포넌트 (null 반환)
 *
 * WeatherView에서 useWaterTemperatureLayers()의 결과를 DeckGLOverlay layers에 주입한다.
 * 이 컴포넌트는 이전 Leaflet 방식과의 호환성을 위해 시그니처를 유지한다.
 */
export function WaterTemperatureLayer() {
  return null;
}
