'use client'

import { useCallback, memo, type ReactNode } from 'react'
import { Marker, type MarkerEvent, type MarkerDragEvent } from 'react-map-gl/maplibre'
import type { LngLat } from 'maplibre-gl'
import type { MarkerData } from '../types'

export interface MapMarkerProps {
  marker: MarkerData
  onClick?: (marker: MarkerData) => void
  children?: ReactNode
  anchor?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  draggable?: boolean
  onDragStart?: (marker: MarkerData) => void
  onDrag?: (marker: MarkerData, lngLat: LngLat) => void
  onDragEnd?: (marker: MarkerData, lngLat: LngLat) => void
  color?: string
  size?: number
}

const DefaultPin = memo(function DefaultPin({
  size = 24,
  color = '#ef4444'
}: {
  size?: number
  color?: string
}) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      style={{ cursor: 'pointer' }}
    >
      <path
        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
        fill={color}
        stroke="#fff"
        strokeWidth="1.5"
      />
      <circle cx="12" cy="9" r="2.5" fill="#fff" />
    </svg>
  )
})

export const MapMarker = memo(function MapMarker({
  marker,
  onClick,
  children,
  anchor = 'bottom',
  draggable = false,
  onDragStart,
  onDrag,
  onDragEnd,
  color,
  size,
}: MapMarkerProps) {
  const handleClick = useCallback(
    (e: MarkerEvent<MouseEvent>) => {
      e.originalEvent.stopPropagation()
      onClick?.(marker)
    },
    [onClick, marker]
  )

  const handleDragStart = useCallback(
    (e: MarkerDragEvent) => {
      onDragStart?.(marker)
    },
    [onDragStart, marker]
  )

  const handleDrag = useCallback(
    (e: MarkerDragEvent) => {
      onDrag?.(marker, e.lngLat)
    },
    [onDrag, marker]
  )

  const handleDragEnd = useCallback(
    (e: MarkerDragEvent) => {
      onDragEnd?.(marker, e.lngLat)
    },
    [onDragEnd, marker]
  )

  return (
    <Marker
      longitude={marker.longitude}
      latitude={marker.latitude}
      anchor={anchor}
      draggable={draggable}
      onClick={handleClick}
      onDragStart={handleDragStart}
      onDrag={handleDrag}
      onDragEnd={handleDragEnd}
    >
      {children ?? <DefaultPin color={color} size={size} />}
    </Marker>
  )
})
