import L from 'leaflet'

// v2 waypoint glyphs — match the map legend shapes exactly:
//   start  → green diamond (.wp-diamond)
//   middle → cyan-bordered square (.wp-square)
//   finish → red octagon (.wp-octagon)
function glyphIcon(html: string, size: number) {
  return L.divIcon({
    className: '',
    html: `<div style="display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;">${html}</div>`,
    iconSize: [size, size],
    iconAnchor: [size / 2, size / 2],
    popupAnchor: [0, -(size / 2) - 2],
  })
}

export const wpStartIcon = glyphIcon(
  `<div style="width:14px;height:14px;background:#3DDC84;border:1.5px solid #0A0D10;box-shadow:0 0 0 1px #3DDC84;transform:rotate(45deg);"></div>`,
  20,
)
export const wpMidIcon = glyphIcon(
  `<div style="width:12px;height:12px;background:#0A0D10;border:1.5px solid #36D6C5;"></div>`,
  16,
)
export const wpFinishIcon = glyphIcon(
  `<div style="width:16px;height:16px;background:#FF4756;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);"></div>`,
  18,
)

// v2 current-position beacon: amber center dot with an expanding pulse ring.
// Self-contained SVG/SMIL animation so it needs no global CSS keyframes.
export const currentPositionIcon = L.divIcon({
  className: '',
  html: `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
    <circle cx="17" cy="17" r="5" fill="none" stroke="#FF9D3D" stroke-width="1.5">
      <animate attributeName="r" values="5;15" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.7;0" dur="1.6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="17" cy="17" r="8" fill="none" stroke="#FF9D3D" stroke-width="1" opacity="0.45"/>
    <circle cx="17" cy="17" r="4" fill="#FF9D3D" stroke="#0A0D10" stroke-width="1"/>
  </svg>`,
  iconSize: [34, 34],
  iconAnchor: [17, 17],
  popupAnchor: [0, -17],
})
