/**
 * 베이스맵 레이어 설정
 * - 메인 프로젝트(mda-react-front)의 mapLayer.ts 참조
 */
import { XYZ } from 'ol/source';
import { transformExtent } from 'ol/proj';
import WebGLTileLayer from 'ol/layer/WebGLTile';

// 좌표계 상수
const EPSG_3857 = 'EPSG:3857';
const EPSG_4326 = 'EPSG:4326';

// 1x1 투명 PNG (타일 로드 실패 시 대체용)
const TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

/**
 * 타일 로드 함수 (fetch 사용으로 콘솔 에러 완전 방지)
 * - 404/네트워크 에러 시 투명 이미지로 대체
 * - 브라우저 네트워크 탭에는 표시되지만 콘솔 에러는 없음
 */
function silentTileLoadFunction(imageTile, src) {
  const img = imageTile.getImage();

  fetch(src)
    .then(response => {
      if (!response.ok) {
        throw new Error('Tile not found');
      }
      return response.blob();
    })
    .then(blob => {
      img.src = URL.createObjectURL(blob);
    })
    .catch(() => {
      img.src = TRANSPARENT_PIXEL;
    });
}

/**
 * 레이어 설정
 */
export const mapLayerConfig = {
  // 일반지도 (줌 0-11)
  worldLayer: {
    source: new XYZ({
      url: '/MAPS/WORLD_webp/{z}/{x}/{y}.webp',
      minZoom: 0,
      maxZoom: 11,
      attributions: 'ⓒ OpenStreetMap',
      tileLoadFunction: silentTileLoadFunction,
    }),
    preload: Infinity,
  },

  // 전자해도 (줌 0-11) - URL은 임시로 worldLayer와 동일
  encLayer: {
    source: new XYZ({
      url: '/MAPS/WORLD_webp/{z}/{x}/{y}.webp',
      minZoom: 0,
      maxZoom: 11,
      attributions: 'ⓒ OpenStreetMap',
      tileLoadFunction: silentTileLoadFunction,
    }),
    preload: Infinity,
  },

  // 야간지도 (줌 5-15, 타일은 6-11레벨까지만 로드 → 12+ 확대 표시)
  darkLayer: {
    source: new XYZ({
      url: '/MAPS/SIMPLE_B_webp/{z}/{x}/{y}.webp',
      minZoom: 6,
      maxZoom: 11, // 타일은 11레벨까지만 로드 (12+ 는 11레벨 타일 확대)
      tileLoadFunction: silentTileLoadFunction,
    }),
    preload: Infinity,
  },

  // 동아시아 상세 (줌 12-15, 타일은 12레벨까지만 로드 → 13+ 확대 표시)
  eastAsiaLayer: {
    source: new XYZ({
      url: '/MAPS/EAST_ASIA_webp/{z}/{x}/{y}.webp',
      minZoom: 12,
      maxZoom: 12, // 타일은 12레벨까지만 로드 (13+ 는 12레벨 타일 확대)
      tileLoadFunction: silentTileLoadFunction,
    }),
    preload: 0,
    minZoom: 12,
    zIndex: 1,
    extent: transformExtent([110, 20, 140, 45], EPSG_4326, EPSG_3857),
  },

  // 한국 상세 (줌 16-17)
  korLayer: {
    source: new XYZ({
      url: '/MAPS/KOR_webp/{z}/{x}/{y}.webp',
      minZoom: 16,
      maxZoom: 17,
      tileLoadFunction: silentTileLoadFunction,
    }),
    preload: Infinity,
    minZoom: 16,
    zIndex: 1,
    extent: transformExtent([124, 32, 133, 39], EPSG_4326, EPSG_3857),
  },
};

/**
 * 베이스맵 레이어 생성
 * @param {string} baseMapType - 배경지도 타입 ('normal' | 'enc' | 'dark')
 */
export const createBaseLayers = (baseMapType = 'dark') => {
  // 3가지 배경지도 레이어 생성
  const worldMap = new WebGLTileLayer({
    ...mapLayerConfig.worldLayer,
    visible: baseMapType === 'normal',
  });
  const encMap = new WebGLTileLayer({
    ...mapLayerConfig.encLayer,
    visible: baseMapType === 'enc',
  });
  const darkMap = new WebGLTileLayer({
    ...mapLayerConfig.darkLayer,
    visible: baseMapType === 'dark',
  });

  // 상세 지도 레이어 (일반지도/전자해도 전용, 야간지도에서는 숨김)
  const isDarkMode = baseMapType === 'dark';
  const eastAsiaMap = new WebGLTileLayer({
    ...mapLayerConfig.eastAsiaLayer,
    visible: !isDarkMode,
  });
  const korMap = new WebGLTileLayer({
    ...mapLayerConfig.korLayer,
    visible: !isDarkMode,
  });

  return {
    worldMap,
    encMap,
    darkMap,
    eastAsiaMap,
    korMap,
  };
};

export default createBaseLayers;
