/**
 * deck.gl IconLayer용 SVG 아이콘 생성 유틸.
 * MapLibre ship-triangle / gear-diamond 형태와 동일.
 * Data URI로 캐싱하여 반복 생성 방지.
 */

const ICON_SIZE = 64;

/** 선박 삼각형 SVG (heading 0 = north, 위쪽 꼭짓점) */
function createShipTriangleSvg(): string {
  const s = ICON_SIZE;
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">
    <polygon points="${s / 2},2 ${s * 0.12},${s - 2} ${s / 2},${s * 0.62} ${s * 0.88},${s - 2}" fill="white"/>
  </svg>`;
}

/** 어구 마름모 SVG */
function createGearDiamondSvg(): string {
  const s = ICON_SIZE;
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">
    <polygon points="${s / 2},4 ${s - 4},${s / 2} ${s / 2},${s - 4} 4,${s / 2}" fill="white"/>
  </svg>`;
}

function svgToDataUri(svg: string): string {
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}

// ── 정적 캐시 (모듈 로드 시 1회 생성) ──
const SHIP_TRIANGLE_URI = svgToDataUri(createShipTriangleSvg());
const GEAR_DIAMOND_URI = svgToDataUri(createGearDiamondSvg());

export const SHIP_ICON_MAPPING = {
  'ship-triangle': { url: SHIP_TRIANGLE_URI, width: ICON_SIZE, height: ICON_SIZE, anchorY: ICON_SIZE * 0.62, mask: true },
  'gear-diamond': { url: GEAR_DIAMOND_URI, width: ICON_SIZE, height: ICON_SIZE, anchorY: ICON_SIZE / 2, mask: true },
};

export const SHIP_ICON_ATLAS = SHIP_TRIANGLE_URI;
export const GEAR_ICON_ATLAS = GEAR_DIAMOND_URI;
export { ICON_SIZE };