interface MapCrosshairProps {
  onClick?: () => void;
}

/**
 * Persistent crosshair overlay at the dead center of the map.
 * The center dot is tappable — clicking it triggers `onClick` to add
 * a new location at the crosshair position.
 *
 * Crosshair lines remain pointer-events: none so they don't block
 * map dragging. Only the center tap target captures clicks.
 */
export default function MapCrosshair({ onClick }: MapCrosshairProps) {
  return (
    <>
      <style>{`
        @keyframes crosshair-pulse {
          0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
          50% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.4; }
        }
      `}</style>
      {/* Crosshair lines — no pointer events so map drags work */}
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 999,
          pointerEvents: 'none',
          width: 44,
          height: 44,
        }}
      >
        {/* Vertical line */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: '50%',
            transform: 'translateX(-50%)',
            width: 2,
            height: '100%',
            background: 'rgba(255,255,255,0.6)',
            borderRadius: 1,
          }}
        />
        {/* Horizontal line */}
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: 0,
            transform: 'translateY(-50%)',
            width: '100%',
            height: 2,
            background: 'rgba(255,255,255,0.6)',
            borderRadius: 1,
          }}
        />
        {/* Pulse ring */}
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            width: 14,
            height: 14,
            borderRadius: '50%',
            border: '2px solid rgba(52, 152, 219, 0.5)',
            animation: 'crosshair-pulse 2s ease-in-out infinite',
          }}
        />
      </div>
      {/* Tappable center dot — separate layer with pointer events */}
      <div
        onClick={onClick}
        role="button"
        aria-label="Add location at crosshair"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(); }}
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 1000,
          pointerEvents: 'auto',
          cursor: 'pointer',
          width: 44,
          height: 44,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: '50%',
        }}
      >
        <div
          style={{
            width: 12,
            height: 12,
            borderRadius: '50%',
            background: '#3498db',
            border: '2px solid #fff',
            boxShadow: '0 0 6px rgba(0,0,0,0.5)',
          }}
        />
      </div>
    </>
  );
}
