/**
 * 선박/어구 아이콘 레이어 (deck.gl IconLayer)
 *
 * 선박: 삼각형, COG 방향 반영 (getAngle)
 * 어구: 마름모, 고정 방향
 * SVG Data URI + mask 모드로 색상 동적 적용
 */
import { IconLayer } from 'deck.gl';

// ── SVG 아이콘 생성 (모듈 로드 시 1회) ──

const ICON_SIZE = 64;

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>`;
}

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)}`;
}

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 },
} as const;

function hexToRgba(hex: string, alpha = 220): [number, number, number, number] {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b, alpha];
}

// ── 데이터 타입 ──

export interface ShipIconData {
  lat: number;
  lon: number;
  cog?: number;       // 침로 (0=North, 시계 방향)
  color?: string;
  size?: number;
  label?: string;
  isParent?: boolean;
}

export interface GearIconData {
  lat: number;
  lon: number;
  color?: string;
  size?: number;
  label?: string;
}

// ── 레이어 팩토리 ──

/** 선박 아이콘 레이어 — COG 방향 반영 삼각형 */
export function createShipIconLayer(
  id: string,
  data: ShipIconData[],
  defaultColor = '#06b6d4',
  defaultSize = 20,
) {
  return new IconLayer<ShipIconData>({
    id,
    data,
    pickable: true,
    iconAtlas: SHIP_TRIANGLE_URI,
    iconMapping: {
      ship: { x: 0, y: 0, width: ICON_SIZE, height: ICON_SIZE, anchorY: ICON_SIZE * 0.62, mask: true },
    },
    getIcon: () => 'ship',
    getPosition: (d) => [d.lon, d.lat],
    getSize: (d) => d.size ?? defaultSize,
    getAngle: (d) => -(d.cog ?? 0), // deck.gl: 반시계 방향이므로 음수
    getColor: (d) => hexToRgba(d.color ?? defaultColor),
    sizeUnits: 'pixels',
    sizeMinPixels: 8,
    sizeMaxPixels: 40,
    billboard: false,
  });
}

/** 어구 아이콘 레이어 — 마름모 (방향 고정) */
export function createGearIconLayer(
  id: string,
  data: GearIconData[],
  defaultColor = '#f59e0b',
  defaultSize = 16,
) {
  return new IconLayer<GearIconData>({
    id,
    data,
    pickable: true,
    iconAtlas: GEAR_DIAMOND_URI,
    iconMapping: {
      gear: { x: 0, y: 0, width: ICON_SIZE, height: ICON_SIZE, anchorY: ICON_SIZE / 2, mask: true },
    },
    getIcon: () => 'gear',
    getPosition: (d) => [d.lon, d.lat],
    getSize: (d) => d.size ?? defaultSize,
    getAngle: 0,
    getColor: (d) => hexToRgba(d.color ?? defaultColor),
    sizeUnits: 'pixels',
    sizeMinPixels: 6,
    sizeMaxPixels: 30,
    billboard: false,
  });
}
